Créer un site statique avec déploiement continu

À chaque push, le site sera compilé et mis en ligne

Sommaire

Git

Exemple pour GitHub

Dans le menu Repositories, cliquez sur le bouton New

Label Saisie Remarque
Repository name mon-projet un nom simple et court
add .gitignore Node
Choose a license GNU General Public License v3.0 Open source et qui doit le rester

PhpStorm (IDE)

Mettre en place l'environement

Coloration syntaxique de Nunjucks

Eleventy

Eleventy est un générateur de site statique,
il fonctionne nativement avec de nombreux moteur de template, comme Nunjucks

Exclure de Git le site compilé

Dans le fichier .gitignore, ajouter

# eleventy
_site/

Exclure de la compilation d'Eleventy un dossier/fichier

Modifier ou ajouter le fichier .eleventyignore à la racine du projet

dossier/sous-dossier-exclu/
fichier-exclu.md

Principal ligne de commande

Commande Effet
npx eleventy initialisation
npx eleventy --serve initialisation + lancement serveur local

Compiler du SASS

Merci Dennis Hagemeier et Cassey Lottman

Installer les dépendances

Commande nom
npm install fs-extra fs-extra
npm install --save-dev sass Sass
npm install postcss postcss-cssnext PostCss
npm install postcss-cli autoprefixer Autoprefixer

Dossier et fichier de base : _sass/style.scss

Configuration dans 11ty

Dans .eleventy.js ajouter

const fs = require("fs-extra");
const sass = require("sass");
const postcss = require("postcss");
const autoprefixer = require("autoprefixer");

module.exports = function (eleventyConfig) {

    // compile sass and optimize it https://www.d-hagemeier.com/en/articles/sass-compile-11ty/
    eleventyConfig.on("beforeBuild", () => {

        // Compile Sass
        let result = sass.renderSync({
            file: "_sass/style.scss",
            sourceMap: false,
            outputStyle: "compressed",
        });
        console.log("SCSS compiled");

        // Optimize and write file with PostCSS
        let css = result.css.toString();
        postcss([autoprefixer])
            .process(css, { from: "style.css", to: "style.css" })
            .then((result) => {
                fs.outputFile("_site/style.css", result.css, (err) => {
                    if (err) throw err;
                    console.log("CSS optimized");
                });
            });
    });


    // trigger a rebuild if sass changes
    eleventyConfig.addWatchTarget("_sass/");

};

Netlify

Netlify est une plateforme de déploiement et de collaboration basé sur Git (GitHub, GitLab, Bitbucket)


Renommmer l'url :