La construction pour le web représente toujours une aventure stimulante, offrant aux développeurs la possibilité de façonner leurs propres applications web. Ils ont la liberté de sélectionner le cadre, la technologie, les outils et l’approche qu’ils jugent les plus adaptés.
Parmi ces approches, on retrouve Jamstack, une solution flexible pour la conception web.
Dans cet article, nous explorerons ensemble la création de votre première application Jamstack. C’est parti !
Qu’est-ce que Jamstack ?
Jamstack est une philosophie de développement web contemporaine, axée sur la création de sites et d’applications. D’un point de vue technique, elle offre aux développeurs une architecture web modulaire. Vous êtes libre de choisir les frameworks et les outils qui vous conviennent pour atteindre un objectif commun.
En y regardant de plus près,
Jam + pile = JAMstack.
Jamstack est structuré autour de trois éléments principaux :
- J pour JavaScript
- A pour interface de programmation d’application (API)
- M pour balisage
Cette approche sépare la logique applicative des données, déconnectant ainsi la couche d’expérience web. Ses avantages sont multiples :
- Temps de chargement améliorés, souvent quasi-instantanés.
- Un processus de développement agile et rapide.
- Une évolutivité et une maintenabilité accrues.
Pour en apprendre davantage sur Jamstack, vous pouvez consulter l’article Jamstack pour les débutants.
Histoire de Jamstack
Jamstack est une approche relativement récente. C’est en 2016 que Matt Biilmann a présenté Jamstack lors d’une conférence, montrant ainsi une nouvelle voie pour la création de sites web, en rupture avec les méthodes traditionnelles.
Cette solution distingue la logique applicative des dépendances au serveur principal. La majeure partie du contenu est diffusée par le biais de fichiers statiques via des CDN, tandis que les fonctionnalités dynamiques sont prises en charge par des API. Lorsque des actions dynamiques nécessitent un traitement serveur, elles sont compilées et envoyées aux CDN avant d’être accessibles à l’utilisateur final.
Pour bien saisir l’histoire de Jamstack, il est essentiel de comprendre la différence entre les sites web statiques et dynamiques.
- Site web statique : Un site web statique est hébergé sur un serveur, mais il n’intègre aucun élément dynamique. Au début d’Internet, la plupart des sites étaient statiques, diffusant du HTML, du CSS et des images stockés sur un serveur. Cette approche offre des chargements rapides, car le serveur n’a pas à traiter la requête de l’utilisateur. Cependant, l’impossibilité de modifier le contenu limite l’interactivité.
- Site web dynamique : Les sites web dynamiques offrent une interactivité en traitant les requêtes des utilisateurs et en générant le code HTML nécessaire. Bien que cette méthode soit plus lente, elle permet une interaction accrue. La majorité des sites modernes sont dynamiques, avec comme exemple flagrant les sites web propulsés par WordPress.
Et c’est là qu’interviennent les sites web Jamstack. Voyons comment ils ont résolu les problèmes posés par les sites statiques et dynamiques.
Sites web Jamstack : Comment fonctionnent-ils ?
Jamstack vient résoudre deux problèmes majeurs :
- Les temps de chargement lents des sites dynamiques.
- Le manque d’interactivité des sites statiques.
Un site Jamstack utilise des fichiers statiques, ce qui garantit sa rapidité. Toutefois, il intègre également du JavaScript, capable d’interagir avec des API pour diffuser du contenu dynamique.
En coulisses, un générateur de sites statiques est nécessaire pour effectuer le gros du travail de création de pages web statiques.
Ces générateurs emploient le langage Markdown pour créer des sites web statiques. Le générateur compile des fichiers statiques à partir des fichiers HTML, CSS et JavaScript disponibles. Une fois créé, le site statique est distribué par le biais de CDN.
Puisque les fichiers sont statiques, le chargement des sites est pratiquement instantané. Pour ajouter des éléments dynamiques au site, il faut s’appuyer sur JavaScript. Les fichiers JavaScript peuvent se connecter aux API et ajouter des données dynamiques en communiquant avec une base de données.
Construire votre premier site web Jamstack
Puisque Jamstack offre une grande liberté, vous pouvez choisir n’importe quel framework ou générateur de sites statiques, comme Hugo, Gatsby, Next.js, Hexo, etc.
À lire également : Meilleurs frameworks pour Jamstack
Et pour le déploiement, vous pouvez utiliser GitHub Pages, Netlify, Azure Static Web Apps et d’autres plateformes.
Pour ce tutoriel, nous allons utiliser Hugo pour le développement Jamstack et Netlify pour l’hébergement de notre site.
Ce tutoriel part du principe que vous avez une connaissance de base du web et de son fonctionnement, ainsi que de Git.
C’est parti !
#1. Installation des prérequis : Go et Git
Pour installer Hugo, deux éléments sont nécessaires : Git et Go. Git est essentiel pour rationaliser notre processus de construction (vous le verrez plus tard avec Netlify), tandis que Go est le langage de développement sur lequel Hugo est construit.
Nous utiliserons Ubuntu sur WSL 2 sous Windows 11. Nous accédons au noyau Ubuntu directement depuis Windows.
À lire également : Windows 11 rencontre Linux : une plongée approfondie dans les capacités de WSL2
Vous pouvez choisir le système d’exploitation de votre choix, que ce soit Windows, Linux ou Mac.
Installer Git
Sous Ubuntu, vous pouvez installer Git en exécutant la commande suivante.
$ sudo apt update $ sudo apt install git
Si vous êtes sous Windows, vous devrez télécharger les installateurs binaires Windows. Consultez notre guide d’installation complet de Git.
Pour vérifier si Git a été correctement installé, tapez la commande suivante.
[email protected]:~$ git --version git version 2.34.1
Installer Go
Passons maintenant à l’installation de Golang. Pour ce faire, vous devez exécuter quelques commandes sous Linux. Suivons les étapes.
Étape 1 : Supprimez toute installation précédente de Go et créez une arborescence Go locale.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Étape 2 : Personnalisation de la variable d’environnement PATH.
export PATH=$PATH:/usr/local/go/bin
Étape 3 : Enfin, vérifiez que Golang est bien installé.
$ go version. #output go version go1.18.1 linux/amd64
Parfait, nous sommes maintenant prêts à installer Hugo !
Installer Hugo
En fonction de votre utilisation de Homebrew ou Chocolately, vous devrez utiliser l’une des commandes ci-dessous.
Pour Homebrew :
$ brew install hugo
Pour Chocolately :
$ brew install hugo -confirm
Si vous n’utilisez ni l’un ni l’autre, vous pouvez installer directement à partir de la source.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Pour confirmer que Hugo a été installé avec succès, exécutez la commande suivante :
$ hugo -version
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/toptips.fr/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms
#2. Création d’un site Hugo
Hugo permet de créer facilement un site. Pour ce faire, exécutez la commande suivante :
$ hugo new site toptips.fr-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/toptips.fr-jamstack. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
#3. Choisir un thème Hugo
Hugo donne accès à de nombreux thèmes, qui constituent un bon point de départ pour votre projet. Pour créer un site Jamstack avec Hugo, vous devez choisir un thème.
#4. Créer un site de petite entreprise avec Jamstack
Pour ce tutoriel, nous utiliserons le thème Hugo Hero, un thème polyvalent qui offre des fonctionnalités telles que des sections pleine largeur et la création de portfolios via Markdown.
Pour installer le thème, copiez son lien de dépôt et clonez-le. Avant de continuer, assurez-vous d’être dans le répertoire racine.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#output Cloning into 'themes/hugo-hero-theme'... remote: Enumerating objects: 1141, done. remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141 Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done. Resolving deltas: 100% (489/489), done.
Copie du contenu par défaut
Pour utiliser le contenu par défaut avec le site, exécutez la commande suivante :
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Cela copiera le contenu du dossier exampleSite à la racine de votre site.
Mise à jour du fichier Config.toml
Ensuite, nous devons modifier le fichier Config.toml, qui stocke les informations de configuration du projet. Il est nécessaire de le configurer correctement pour que votre site Jamstack fonctionne.
Pour le moment, vous devez modifier les lignes suivantes :
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Note : Vous devrez continuer à mettre à jour le fichier Config.toml au fur et à mesure que votre projet avance. De plus, puisque vous avez utilisé le contenu par défaut, votre fichier Config.toml est mis à jour pour prendre en charge l’exemple de contenu.
Tester notre site Jamstack
Pour que notre site fonctionne, nous devons générer à nouveau le site Hugo avec la commande hugo :
$ hugo
Ensuite, nous lançons le serveur avec la commande hugo serve :
$ hugo serve
#output [email protected]:~/toptips.fr$ hugo server port 1313 already in use, attempting to use an available port Start building sites … hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 | EN -------------------+----- Pages | 35 Paginator pages | 0 Non-page files | 0 Static files | 23 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0 Built in 71 ms Watching for changes in /home/nitt/toptips.fr/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/toptips.fr/config.toml Environment: "development" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at //localhost:42229/ (bind address 127.0.0.1) Press Ctrl+C to stop
Note : Votre site est désormais hébergé et disponible à l’adresse 127.0.0.1. Si, pour une raison quelconque, il ne s’ouvre pas, essayez d’ouvrir l’adresse alternative indiquée à côté, qui dans ce cas est localhost:42973.
Modification du contenu par défaut des thèmes
Vous êtes maintenant libre de modifier le contenu par défaut. Pour ce faire, allez dans le dossier Contenu. Modifions le contenu de la page d’index. Allez dans Contenu > Travail > Index.md.
Voici à quoi il ressemble après modification :
Création d’un site de blog
Si vous souhaitez créer un blog, vous devez choisir un thème approprié. Nous utiliserons le thème Hyde.
Comme lors de la configuration de notre nouveau site, vous devez exécuter les commandes suivantes :
$ hugo new site toptips.fr-jamstack $ cd toptips.fr-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Modifiez ensuite le fichier Config.toml pour ajouter la valeur theme = ‘hyde’.
Créer un nouveau message
Pour créer un nouveau message, vous devez exécuter la commande hugo new, suivie du fichier Markdown :
$ hugo new hellogeekflare.md
#output [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created [email protected]:~/geefklare-jamstack$
Modification de la publication
Pour modifier la publication hellogeefklare.md nouvellement créée, ouvrez le fichier hellogeekflare.md dans votre éditeur de texte préféré.
Vous verrez le contenu suivant :
--- title: "Hello toptips.fr" date: 2023-05-04T11:39:10+05:30 draft: true ---
Vous pouvez ajouter le contenu de votre choix en Markdown.
Ajoutons le contenu Markdown suivant :
### Hello, World! This is a new post created to show how easy it is to create **Jamstack website**. We’re using Hugo and Netlify to create our *basic Jamstack site*.
Une fois que vous avez ajouté le contenu ci-dessus dans le fichier .md, il devrait ressembler à ce qui suit (en fonction de votre éditeur, nous utilisons Visual Studio Code) :
Cependant, l’affichage sera différent lorsque nous le diffuserons.
Note : Assurez-vous de modifier la valeur du brouillon de « true » à « false ».
Génial ! Nous avons créé deux sites web Jamstack : un site pour petite entreprise et un blog.
Après avoir modifié votre site, vous pouvez générer les fichiers en exécutant la commande hugo. Cela créera le fichier et le placera dans le dossier /public.
$ hugo
#5. Déploiement du site Jamstack sur Netlify
Une fois nos sites créés, nous allons les déployer avec Netlify.
Netlify est un service adossé à un CDN qui offre un hébergement de sites web rapide. Vous pouvez connecter Netlify à GitHub et automatiser le processus. C’est un service gratuit avec quelques fonctionnalités payantes.
Nous allons envoyer le code à Netlify et laisser Netlify gérer le reste.
Configurer le référentiel Git localement
Il est temps de mettre en place le référentiel Git.
Pour lancer le référentiel Git, exécutez la commande suivante à la racine de votre projet :
$ git init
Ensuite, nous devons configurer le thème comme un sous-module, une étape importante. Cela crée des sous-dépôts au sein de votre référentiel. (Rappelez-vous, vous avez cloné le thème Hugo avec git ?). Cela vous donnera plus de contrôle sur votre site Jamstack.
Par exemple, vous pouvez télécharger les mises à jour de votre thème. Vous devez également le faire car Netlify a besoin de thèmes comme sous-modules pour les héberger.
Pour ajouter le thème comme sous-module, exécutez la commande suivante :
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/toptips.fr-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/toptips.fr-jamstack$
Créer un référentiel sur GitHub
Une fois la configuration locale terminée, il est temps de créer un nouveau référentiel GitHub.
Après sa création, vous devez ajouter l’origine à votre référentiel local :
$ git remote add origin https://github.com/logan99/toptips.fr-jamstack-tutorial.git
Maintenant, récupérez-le :
$ git branch -M main $ git pull origin main
Créer un nouveau commit
Il est temps de créer un nouveau commit. Exécutez la commande suivante pour ajouter tous les fichiers à la branche principale :
$ git add .
Maintenant, exécutez la commande commit pour valider les modifications :
$ git commit -m “First commit”
#Output [email protected]:~/toptips.fr-jamstack$ git commit -m "First commit" [main (root-commit) fa69ab2] First commit 21 files changed, 1135 insertions(+) create mode 100644 .gitmodules create mode 100644 .hugo_build.lock create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/hellogeekflare.md create mode 100644 public/404.html create mode 100644 public/apple-touch-icon-144-precomposed.png create mode 100644 public/categories/index.html create mode 100644 public/categories/index.xml create mode 100644 public/css/hyde.css create mode 100644 public/css/poole.css create mode 100644 public/css/print.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/hellogeekflare/index.html create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/index.html create mode 100644 public/tags/index.xml create mode 160000 themes/hyde
Enfin, envoyez les modifications à GitHub :
$ git push --set-upstream origin main
Note : Vous devez saisir votre nom d’utilisateur et votre mot de passe GitHub pour continuer.
#6. Travailler avec Netlify
Parfait, notre dépôt est maintenant créé. Passons maintenant à Netlify. Si vous avez déjà un compte, connectez-vous ou créez un nouveau compte.
Pour les nouveaux comptes, un assistant se lancera automatiquement. Sinon, vous arriverez sur le tableau de bord de votre compte. Si c’est le cas, cliquez sur l’option « Ajouter un nouveau site » sous Sites.
Sous Ajouter un nouveau site, choisissez « Importer un projet existant ».
Il vous sera demandé de choisir un fournisseur Git. Comme nous utilisons GitHub, nous le sélectionnerons. Vous pouvez également opter pour Bitbucket, GitLab et Azure DevOps.
La liste de tous vos projets s’affichera ensuite. Choisissez le référentiel GitHub que vous avez créé pour ce projet. Pour nous, il s’agit de « toptips.fr-jamstack-tutorial ». Vous pouvez également choisir de télécharger l’autre projet que nous avons créé.
Il vous sera alors demandé de sélectionner la branche à déployer et de choisir les paramètres de construction de base. Pour l’instant, vous pouvez laisser les paramètres par défaut.
Cliquez sur « Depoy Site » pour le déployer.
Attendez maintenant que Netlify fasse son travail. Une fois déployé, le message « Votre site est déployé » s’affichera.
Cliquez maintenant sur le site en haut à gauche.
Toutefois, vous constaterez que le site ne se charge pas correctement. C’est parce que l’URL de base dans le fichier Config.toml n’est pas définie correctement. Étant donné que Netlify a généré une nouvelle URL de projet, vous devez l’ajouter au fichier Config.toml.
Dans notre cas, le site est à https://animated-beijinho-2baa8b.netlify.app/
Cela signifie que nous devons ajouter la baseURL.
Pour ce faire, accédez à votre configuration locale et modifiez la valeur :
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Pour envoyer la modification, vous devez exécuter la commande suivante :
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify est intelligent. Lorsqu’il détecte un nouveau commit, il déploie automatiquement votre site à nouveau.
Si vous chargez votre site maintenant, il se chargera parfaitement.
Vous y êtes parvenu ! Il y a beaucoup à apprendre, c’est certain, mais l’ensemble du processus devient intuitif une fois que vous l’avez fait plusieurs fois.
Derniers mots
Jamstack a marqué une nouvelle ère pour les développeurs. Il améliore les performances et la manière dont les sites sont déployés. Jamstack s’est développé grâce aux efforts d’excellents acteurs de l’écosystème tels que Hugo et Netlify, et il ne fait aucun doute qu’il continuera de se développer.
Découvrez maintenant comment déployer l’application frontale sur Netlify.