• Accueil
•   >  Recueil
•   >  Créer un site statique avec déploiement continu

Créer un site statique avec déploiement continu

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

Sommaire

• Git
• PhpStorm
• Eleventy
• Netlify

Git

Exemple pour GitHub

Dans le menu Repositories, cliquez sur le bouton New

PhpStorm

Mettre en place l'environement sur l'IDE

• Menu Git
• clone
• url : coller le lien du dépot
• Directory : Ajouter un dossier du nom du projet avec un antislash \mon-projet
• Dans le terminal :
  • npm install -y pour installer npm
  • npm install -g @11ty/eleventy pour installer eleventy
  • npx eleventy --serve pour lancer la dev/preview

Coloration syntaxique de Nunjucks

• Go to File -> Settings -> Editor -> File Types
• Find Twig, it's identical template engine but for PHP and add custom extension. click green plus and type *.nunj. Now all *.nunj files are parsed as Twig so in the end - support 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é

# eleventy
_site/

Exclure de la compilation d'Eleventy un dossier/fichier

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

Principal ligne de commande

Compiler du SASS

Merci Dennis Hagemeier et Cassey Lottman

Installer les dépendances

Dossier et fichier de base : _sass/style.scss

Configuration dans 11ty

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)

• Dans le menu Sites, cliquez sur le bouton New site from git
• Continuous Deployment : GitHub
• Autorisé le lien entre les 2 plateformes
• Choisir le dépot
• Deploy site

Renommmer l'url :

• Deploy settings
• Change site name
• mon-projet
• save