https://elastiq.ch/ website
This setup uses node and NPM to built the website statically.
- install node and npm (https://nodejs.org/en/)
- use the terminal/command-line to navigate to the folder where you checked out the project
- install deps by typing
npm install - once done type
npm startto work on the project
- parcel.js builds everything
- posthtml-expressions This plugin provides a syntax for including local variables and expressions in your templates, and also extends custom tags to act as helpers for conditionals and looping. Mainly used to include content from data.yml. posthtml-load-config makes sure .posthtmlrc.js the data from the YML ends up in the
localsfromposthtml-expressions. - .browserslistrc Sets the browser compatibility for autoprefixer
┌──────────┐ ┌────────────────────┐
│ data.yml │───▶│posthtml-expressions│──┐
└──────────┘ └────────────────────┘ │
┌──────────┐ ┌───────────────────┐ │
│style.scss│───▶│ sass & postCSS │──┐│ ┌─────────────┐
└──────────┘ └───────────────────┘ ├┴─▶│ /index.html │
┌──────────┐ ┌───────────────────┐ │ └──────┬──────┘
│ main.js │───▶│ babel.js │──┤ ┌┘
└──────────┘ └───────────────────┘ │ │
┌──────────┐ │ ▼
│ images │──┘ ┌─────────┐
└──────────┘ │ Magic * │
└─────────┘
│
│
│
* Magic = parcel.js ┌───────────▼─────────┐
│ ./dist │
┌┴─────────────────────┴┐
│ index.html │
├───────────────────────┤
│ style.css │
├───────────────────────┤
│ *.{jpg|png|gif...} │
└┬─────────────────────┬┘
└─────────────────────┘
© David Aerne Feel free to do whatever with the sources. Except for the illustrations. Don't share or reuse them.