Créer un site statique avec déploiement continu
21 avril 2021À 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
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 npmnpm install -g @11ty/eleventy
pour installer eleventynpx 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