Hosted on digital forest, uploaded by FTP (github action)

URL: https://moly.internet2000.net

FTP: ftp@moly.internet2000.net

Anciennes URLs

• https://molyrichez.github.io/molydesign/
• https://internet2000.net/molydesign/

Tools we use @Internet 2000

• 11ty static site generator
• Silex website builder
• forestry headless CMS
• snipcart e-commerce
• Deployment and hosting on github pages with a Github action or Netlify
• Deployment to any hosting company (FTP) with a Github action

This repo contains an eleventy website with

• basic structure for a site with tags, products, posts and pages
• optimized images (webP, different sizes, requires modernizr lib to be loaded on the front end)

It also contains a file to use with Stastic designer, a fork of Silex. This lets you edit the 11ty layouts with a drag and drop interface.

If the build environment has the env var NODE_ENV set to production then any error will break the build (see optimize.js)

These plugins are preconfigured:

• sitemap
• splide (slideshow)

Here are the available collections:

• collections.page which take the content of content/pages
• collections.post which take the content of content/posts
• collections.product which take the content of content/products
• collections.categories which is an array of all the categories found in all your posts and pages and products (e.g. the categories in this post)

Here are the available includes:

• collection: display a list of links, to posts, categories or other collection, this will be useful for navigation and tag cloud, see the comment here
• pagination: to be documented
• slideshow: insert a slideshow which shows the images of the images key in the page front matter, see the comment here
• tags: insert a list of page/post/product filtered by category, see the comment here

Shortcodes

• image: display a responsive image with {% image src_attribute, alt_attribute, 480, 999999999, width_on_mobile, width_on_desktop %} - use as shown in this screenshot:
• bg-image: display a responsive background image on an element with {% bg-image src_attribute, css_selector, 480, 999999999, width_on_mobile, width_on_desktop %} - this will create the css rules to apply an optimized bg image, use it as shown in this screenshot:

There is a bug with shortcodes and liquid tempaltes, if you get errors like "Missing param mobileBP, check your liquid syntax (${src})" then try this workaround:

• replace {% image a, b, c, d, e, f %} with {% render 'image.liquid', src: a, alt: b, mobileBP: c, desktopBP: d, mobileW: e, desktopW: f %}, e.g. {% render 'image.liquid', src: module.image, alt: module.title, mobileBP: 480, desktopBP: 999999999, mobileW: 480, desktopW: 462 %}
• replace {% bg-image a, b, c, d, e, f %} with {% render 'bg-image.liquid', src: a, selector: b, mobileBP: c, desktopBP: d, mobileW: e, desktopW: f %}

SEO

In order for the sitemap to be generated, add the URL secret to your website, and set it to the final website URL. To do so, open the settings of the website, "secret" section and create the "URL" secret.

Import this repo in forestry and you will be able to edit pages, posts and products

In order to edit 11ty layouts, we use Stastic, a fork of Silex augmented with templates / layout editing features. In stastic you can use 11ty's builtin language "liquid" to create layouts.

Start with the sample site .silex/example.html, also called "the starter template". Open it in Stastic and publish at the root of this repo.

In this starter template you have:

• examples of liquid templates/code you can use with this 11ty starter
• the modernizr library is loaded on all pages - see the script tag in the HEAD editor, this is necessary to have the image optimizations working for background images and slideshows

Links:

• stastic latest version is available online here
• stastic source code
• Silex documentation
• Silex forums to ask for help

This repository is a template you can use to create a site with 11ty and Stastic which is based on Silex website builder

Here is how to start:

1. Browse to this repository and click "use this template" (/!\ be sure to select "Include all branches")
2. In the settings of your new repository, in the "secret" section, create a new secret, call it BASE_URL and set its value to your website path, e.g. /my-site if your site will be served on https://my-name.github.io/my-site (this path will be used for all links and image URLs, e.g. <img src="/my-site/assets/image.png">)
3. Open .silex/example.html with Stastic designer
4. Publish from Stastic designer to the root of this repo (on your local hard drive or in github)
5. Create a page: new file in this repo like test.md, add layout: YOUR PAGE NAME IN STASTIC

Check the minimum version of node in .nvmrc or use nvm i

$ npm i
$ npm run build

Useful env vars on the build server

• URL optional website URL
• BASE_URL optional base url, when defined it should start with a /
• DEPLOY_TOKEN for deployment to branch gh-pages

This repository conains an action to deploy on github pages automatically

Here is what you need to do to activate it:

1. Create a deploy token here with the access write public_repo
2. In the settings of the website, "secret" section, create a new secret, call it DEPLOY_TOKEN and paste the token as its value
3. Enable actions in the settings of the repo and in the "Actions" tab

In order to use a custom domain, open your repository settings, "pages" section, set the custom domain there.

All you need to do is go to netlify.com and import your website from github (select this repository and "eleventy" if it asks for a static site generator)

Here is what you need to do to activate it:

1. Enable actions in the settings of the repo and in the "Actions" tab
2. In the settings of the repository, in the "secret" section, create 1 new secret, per option: ftp_host, ftp_port, ftp_username, ftp_password, ftp_protocol, ftp_path, ftp_local_path - see the meaning of each option in the FTP deployment action docs here

This is what the secret section should look like:

Editable on https://design.stastic.net/ Published on Main