Aller au contenu principal

Cours

Objectifs​

Comment générer un site statique ?

Présentation​

Générateur de site statique

Programmation Web et bases de données

Site statique

  • Site web (HTML, CSS, JS) dont le contenu est fixe.

    • Sans contenu dynamique (blog, e-commerce, réseau social, …)

    • Sans base de données.

  • Avantages :

    • Hébergement moins cher et plus simple.

    • Chargement des pages plus rapide.

    • Moins de failles de sécurité.

  • Inconvénients :

    • Déploiement pour chaque modification.

  • Similitude des pages.

    • DRY (Don't Repeat Yourself) : philosophie de programmation

    • Solution : Utiliser des templates pour générer les pages à partir de données.

Générateur

https://www.netlify.com/v3/img/blog/ssg-host-flow.png

https://www.netlify.com/blog/2020/04/14/what-is-a-static-site-generator-and-3-ways-to-find-the-best-one/

Template (Liquid)


<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>{{ title }}</title>
  </head>
  <body>
    <header>
      <h1>{{ title }}</h1>
    </header>
    <main>{{ content | markdown }}</main>
  </body>
</html>

Template (Liquid)


−−−
title: Ma page d'accueil
−−−

# Bienvenue

Ceci est ma page d'accueil.

Résultat compilé


<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Ma page d'accueil</title>
  </head>
  <body>
    <header>
      <h1>Ma page d'accueil</h1>
    </header>
    <main>
      <h1>Bienvenue</h1>
      <p>Ceci est ma page d'accueil.</p>
    </main>
  </body>
</html>

Générateur de site statique

  • Static Site Generator (SSG)

  • Outil permettant de générer des sites statiques

    • Templates (Nunjucks, Liquid, Jinja, …)

    • Données (Markdown, JSON, YAML, …)

    • Compilation des pages en HTML, CSS et JS.

  • Exemples :

11ty

  • SSG en JavaScript.

  • Comment exécuter du JavaScript côté serveur ?

    • Node.js

  • Comment installer des dépendances JavaScript ?

    • npm

Node.js

https://nodejs.org/static/logos/nodejsDark.svg

https://nodejs.org/fr/about/branding

  • Environnement d'exécution JavaScript côté serveur (pas dans un navigateur).

    • V8 (moteur JavaScript de Google Chrome et Chromium depuis 2008)

    • Compile le code JavaScript en code machine.

  • Logiciel libre géré par la communauté OpenJS Foundation.

Compiler vs Interpréter

  • Compiler

    • Traduire le code source en code machine.

    • C ou C++ en langage machine.

    • JavaScript avec Node.js.

  • Interpréter

    • Lire et exécuter le code source ligne par ligne.

    • Python dans un terminal.

    • JavaScript dans un navigateur.

npm

https://raw.githubusercontent.com/npm/logos/refs/heads/master/npm%20logo/npm-logo-red.svg

https://github.com/npm/logos/tree/master

  • Gestionnaire de paquets pour JavaScript inclus avec Node.js.

    • Installer des dépendances (bibliothèques, frameworks, …).

    • Gérer les versions des dépendances.

    • Exécuter des scripts (tests, build, …)

  • Registre de dépendances sur npmjs.com.

  • Appartient à GitHub depuis 2020 (à Microsoft depuis 2018).

  • package.json : fichier de configuration

    • scripts : définition des commandes personnalisées.

    • dependencies et devDependencies : dépendances du projet.

    • package-lock.json : version exacte des dépendances utilisées.

  • node_modules : répertoire des dépendances installées.

package.json


{
  "name": "mon-projet",
  "version": "1.0.0",
  "description": "Description de mon projet",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Moi",
  "license": "GPL-3.0",
  "dependencies": {
    "express": "^4.17.1"
  }
}

npm CLI

  • Initialiser un projet Node.js : npm init

  • Installer une dépendance : npm install <package> ou npm i <package>

  • Installer une dépendance de développement : npm install --save-dev <package> ou npm i -D <package>

  • Exécuter le script "start" : npm start

  • Exécuter un autre script : npm run <script>

Semantic Versioning (semver)

  • Numéro de version : MAJEURE.MINEURE.PATCH

    • Exemple : 1.4.2

  • Majeur (major) : 1.0.0

    • Changements majeurs (incompatibles avec les versions précédentes).

  • Mineur (minor) : 0.1.0

    • Nouvelles fonctionnalités (rétrocompatibles).

  • Patch : 0.0.1

    • Corrections de bugs (pas de changement fonctionnel).

  • Utilisé par les gestionnaires de paquets

    • ^1.0.0 (>= 1.0.0 < 2.0.0)

    • ~1.0.0 (>= 1.0.0 < 1.1.0)

F pour passer en plein écran ou O pour afficher la vue d'ensemble.
Versions sans animation, plein écran, imprimable.

Références​

Dernière mise à jour le