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 : Gestion de versions décentralisé
IDE : Environnement de développement
- PhpStorm
- Gitpod
Eleventy : Générateur de site statique
Netlify : Plateforme de déploiement

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

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é

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)

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