Construire votre première application Jamstack avec Hugo et Netlify

Construire pour le web est toujours une perspective passionnante. Il permet aux développeurs d’avoir leur chemin pour créer des applications Web. Ils peuvent choisir le cadre, la technologie, les outils et la philosophie qu’ils souhaitent utiliser.

L’une de ces philosophies est Jamstack. Il offre une approche flexible pour résoudre le problème de développement Web.

Dans cet article, vous apprendrez à créer votre première application Jamstack. Commençons.

Qu’est-ce que Jamstack ?

Jamstack est l’une des nouvelles philosophies Web pour créer des choses pour le Web. Techniquement, il offre aux développeurs une architecture web composable. Vous pouvez choisir vos frameworks et outils pour atteindre le même objectif.

Si tu regardes bien,

Jam + pile = JAMstack.

Jamstack est constitué de trois composants principaux :

• J pour JavaScript
• UN pour l’interface de programmation d’applications (API)
• M pour le balisage

Cette approche sépare la logique métier des données, découplant la couche d’expérience Web. Les avantages incluent :

• Temps de chargement plus rapide (presque instantané).
• Un workflow de développement flexible et rapide.
• Évolutivité et maintenabilité améliorées.

Pour en savoir plus sur Jamstack, consultez Jamstack pour les débutants.

Histoire de Jamstack

Jamstack est relativement nouveau. En 2016, Matt Biilmann a introduit Jamstack dans la présentation de l’entreprise, montrant au monde comment créer un site Web sans passer par la voie traditionnelle.

La solution sépare la logique d’application de la dépendance du serveur principal. Ainsi, la plupart des contenus sont diffusés via des fichiers statiques avec des CDN, des fonctionnalités dynamiques prises en charge et accessibles via des API. Et, si des actions dynamiques doivent être traitées par le serveur, elles sont compilées et transmises aux CDN, avant d’être accessibles par l’utilisateur final.

Pour mieux comprendre l’histoire de Jamstack, nous devons examiner les sites Web statiques et dynamiques.

• Site Web statique : Un site Web statique est hébergé sur le serveur mais n’a aucun aspect dynamique. À l’ère initiale d’Internet, la plupart des sites étaient des sites Web statiques qui servaient HTML, CSS et des images stockées sur un serveur. L’approche est rapide car le serveur n’a pas à passer de temps à traiter la demande de l’utilisateur et a toujours les fichiers prêts. Cependant, aucune possibilité de changer quoi que ce soit ne conduit à aucune interactivité.
• Site dynamique : Les sites dynamiques offrent une interactivité en traitant les demandes des utilisateurs et en générant le code HTML requis pour servir. L’approche est lente mais ajoute les avantages de l’interactivité. La plupart des sites modernes sont des sites dynamiques. Le meilleur exemple serait les sites Web alimentés par WordPress.

Et puis, nous avons des sites Web Jamstack. Voyons comment cela a résolu le problème des sites statiques et dynamiques.

Sites Web Jamstack : comment fonctionnent-ils ?

Jamstack résout deux problèmes principaux :

• Temps de chargement lent du site dynamique
• Interactivité des sites statiques

Un site Jamstack sert des fichiers statiques, ce qui est rapide. Mais il contient également du JavaScript, qui peut interagir avec les API pour servir du contenu dynamique.

Dans les coulisses, vous aurez besoin d’un générateur de site statique pour faire le gros du travail de création de pages Web statiques.

Ces générateurs de sites Web statiques utilisent Markdown pour servir des sites Web statiques. Le générateur de site statique génère des fichiers statiques à partir des fichiers HTML, CSS et JavaScript disponibles. Une fois développé, le site statique est ensuite servi via des CDN.

Comme vous servez des fichiers statiques, les sites sont chargés presque instantanément. Cependant, pour ajouter un aspect dynamique 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 le premier site Web Jamstack

Comme Jamtack offre la liberté, vous pouvez choisir n’importe quel framework/générateur de site statique Jamstack, y compris Hugo, Gatsby, Next.js, Hexo et autres.

A lire aussi : Meilleurs frameworks pour JamStack

Et pour le déploiement, vous pouvez le déployer sur les pages GitHub, Netlify, Azure Static Web Apps et autres.

Nous utiliserons Hugo pour le développement Jamstack et Netlify pour héberger notre site pour ce tutoriel.

Le didacticiel suppose que vous avez une compréhension de base du Web. Vous devez savoir comment fonctionne le Web. De plus, vous devez également savoir utiliser Git.

Commençons.

#1. Installation des prérequis : Go et Git

Pour installer Hugo, vous avez besoin de deux choses : Git et Go. Nous avons besoin de Git pour rationaliser notre workflow de build (vous le verrez plus tard avec Netlify). Go est nécessaire car Hugo est construit dessus.

Nous utilisons Ubuntu sous WSL 2 sous Windows 11. Nous accédons au noyau Ubuntu directement depuis Windows.

A lire aussi : Windows 11 rencontre Linux : une plongée approfondie dans les capacités de WSL2

Vous pouvez choisir un système d’exploitation, Windows, Linux ou Mac.

Installer Git

Dans Ubuntu, vous pouvez installer Git en exécutant la commande suivante.

$ sudo apt update

$ sudo apt install git

Dans le cas de Windows, vous devrez télécharger les installateurs binaires Windows. Consultez notre guide d’installation complet de Git.

Pour vérifier si Git est correctement installé, tapez la commande suivante.

nitt@logan99:~$ git --version

git version 2.34.1

Installer Go

Maintenant, il est temps d’installer Golang. Pour ce faire, vous devez exécuter quelques commandes sous Linux. Alors procédons par étapes.

Étape 1: Supprimez l’installation Go précédente 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/bi

Étape 3: Enfin, vérifiez si Golang est correctement installé.

$ go version.

#output
go version go1.18.1 linux/amd64

Génial, nous sommes maintenant prêts à installer Hugo !

Installer Hugo

Selon que vous utilisez Homebrew ou Chocolately, vous devrez utiliser l’une des commandes suivantes.

Pour Homebrew :

$ brew install hugo

Pour Chocolaté :

$ brew install hugo -confirm

Et, si vous n’en utilisez aucun, vous pouvez les 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 vérifier si Hugo est 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/geekflare/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 propose un moyen simple de créer un site. Pour ce faire, exécutez la commande suivante.

$ hugo new site geekflare-jamstack

Congratulations! Your new Hugo site is created in /home/nitt/geekflare-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&gt;" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME&gt;/<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 offre l’accès à des tonnes de thèmes. Ces thèmes fournissent un point de départ pour votre projet. Et, pour créer un site Jamstack avec Hugo, vous avez besoin d’un thème.

#4. Créer un site de petite entreprise avec Jamstack

Pour le tutoriel, nous allons utiliser le thème Hugo Hero. Ce thème polyvalent offre des fonctionnalités telles que des sections pleine largeur et la création de portefeuille via Markdown.

Pour installer le thème, copiez son lien de dépôt et clonez-le. Avant de continuer, assurez-vous que vous êtes 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/. .

Il copie le contenu du exempleSite dossier à la racine de votre site.

Mise à jour du fichier Config.toml

Ensuite, nous devons éditer le fichier Config.toml. Il stocke les informations de configuration du projet et il est nécessaire de le configurer correctement pour que votre site Jamstack fonctionne.

Pour l’instant, vous devez modifier la ligne suivante.

baseURL = "/"

themesDir = "themes"

theme = "hugo-hero-theme"

Note: Vous devez continuer à mettre à jour le fichier Config.toml au fur et à mesure que votre projet progresse. De plus, comme vous avez utilisé le contenu par défaut, votre Config.toml est mis à jour pour prendre en charge l’exemple de contenu.

Tester notre site Jamstack

Pour faire fonctionner notre site, nous devons générer à nouveau le site Hugo avec le Hugo commande.

$ hugo

Ensuite, nous faisons tourner le serveur. Pour ce faire, lancez le hugo servir commande.

$ hugo serve

#output

nitt@logan99:~/geekflare$ 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/geekflare/{archetypes,content,data,layouts,static,themes}

Watching for config changes in /home/nitt/geekflare/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 maintenant hébergé et disponible sur 127.0.0.1. Si, pour une raison quelconque, il ne s’ouvre pas, essayez d’ouvrir l’adresse alternative indiquée à côté. Dans ce cas, il s’agit de localhost:42973

Modification du contenu par défaut des thèmes

À partir de là, vous êtes libre de modifier le contenu par défaut. Vous pouvez le faire en allant dans le dossier Contenu. Modifions le contenu de la page d’index. Pour cela, rendez-vous sur Contenu > Travail > Index.md

Voici à quoi il ressemble après l’avoir modifié.

Création d’un site de blog

Vous devez choisir un thème approprié si vous cherchez uniquement à créer un blog. Pour cela, utilisons le thème Hyde.

Semblable à la façon dont nous avons configuré notre nouveau site, vous devez exécuter les commandes suivantes.

$ hugo new site geekflare-jamstack

$ cd geekflare-jamstack/themes

$ git clone https://github.com/spf13/hyde /themes/hyde

Ensuite, modifiez le fichier Config.toml pour ajouter le thème = ‘hyde’ valeur.

Créer un nouveau message

Vous devez exécuter la commande hugo new pour créer un nouveau message, suivi du fichier Markdown.

$ hugo new hellogeekflare.md

#output

nitt@logan99:~/geefklare-jamstack$ hugo new hellogeekflare.md

Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created

nitt@logan99:~/geefklare-jamstack$

Modification de la publication

Pour modifier le nouveau hellogeefklare.md poster, ouvrir hellogeekflare.md fichier dans votre éditeur de texte préféré.

Il vous montrera le contenu suivant.

---

title: "Hello Geekflare"

date: 2023-05-04T11:39:10+05:30

draft: true

---

Ici, vous pouvez ajouter n’importe quel contenu dans Markdown.

Ajoutons le contenu suivant dans Markdown.

### 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 mis le contenu ci-dessus dans le fichier .md, il devrait ressembler à ce qui suit (selon votre éditeur, nous utilisons Visual Studio Code).

Cependant, il sera complètement différent lorsque nous le servirons.

Note: Assurez-vous de changer la valeur du brouillon de «vrai» à «faux»

Génial! Nous avons créé deux sites Web Jamstack, un site pour petite entreprise et un autre blog.

Après avoir modifié votre site, vous pouvez générer les fichiers en exécutant le Hugo commande. Il 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, déployons-les. Pour cela, nous allons utiliser Netlify.

Netlify est un service soutenu par CDN qui offre aux utilisateurs comme vous l’hébergement de sites rapides. Vous pouvez connecter Netlify à Github et automatiser le processus. C’est un service gratuit avec quelques fonctionnalités derrière le paywall.

Notre travail consiste à pousser le code vers Netlify et à laisser Netlify gérer tout pour nous.

Configurer le référentiel Git localement

Il est maintenant temps pour nous 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 en tant que sous-module. Ceci est une étape importante. Techniquement, il crée des sous-dépôts au sein de votre référentiel. (Rappelez-vous, vous avez fait un clone git du thème Hugo ?). 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 en tant que sous-modules pour les héberger.

Donc, pour ajouter le thème en tant que sous-module, exécutez la commande suivante.

$ git rim --cached themes/hyde

$ git submodule add https://github.com/spf13/hyde themes/hyde

#output

nitt@logan99:~/geekflare-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde

Adding existing repo at 'themes/hyde' to the index

nitt@logan99:~/geekflare-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.

Une fois créé, vous devez ajouter l’origine à votre référentiel local.

$ git remote add origin https://github.com/logan99/geekflare-jamstack-tutorial.git

Maintenant, tirez-le.

$ git branch -M main

$ git pull origin main

Créer un nouveau commit

Il est maintenant 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

nitt@logan99:~/geekflare-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, poussez les modifications vers GitHub.

$ git push --set-upstream origin main

Note: Vous devez entrer votre nom d’utilisateur et votre mot de passe GitHub pour travailler.

#6. Travailler avec Netlify

Excellent, 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, il lancera instantanément un assistant pour vous. Sinon, vous arriverez sur le tableau de bord de votre compte. Si vous atterrissez sur le tableau de bord, cliquez sur le «Ajouter un nouveau site” sous Sites.

Sous Ajouter un nouveau site, choisissez «Importer un projet existant.«

Il vous demandera ensuite de choisir un fournisseur Git. Comme nous utilisons GitHub, nous le choisirons. Vous pouvez également opter pour Bitbucket, GitLab et Azure DevOps.

Il listera ensuite tous vos projets. À partir de là, sélectionnez le référentiel GitHub que vous avez créé pour ce projet. Pour nous, c’est le «tutoriel geekflare-jamstack». Vous pouvez également choisir de télécharger l’autre projet que nous avons créé.

Il vous demandera ensuite de sélectionner la branche à déployer et de choisir les paramètres de construction de base. Pour l’instant, vous pouvez tout mettre par défaut.

Cliquez sur «Depoy Site» pour le déployer.

Maintenant, vous devez attendre que Netlify fasse son travail. Une fois déployé, le message sera «Votre site est déployé».

Maintenant, cliquez sur le site en haut à gauche.

Cependant, vous remarquerez que le site ne se charge pas correctement. Cela est dû au fait que l’URL de base dans le fichier Config.toml n’est pas définie correctement. Comme 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 y 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 pousser le changement, 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 à nouveau automatiquement votre site.

Si vous chargez votre site maintenant, il se chargera parfaitement.

Wooo ! Vous l’avez fait. Je sais qu’il y a beaucoup à apprendre. Cependant, vous trouverez l’ensemble du processus intuitif une fois que vous l’aurez fait plusieurs fois.

Derniers mots

Jamstack a accroché la nouvelle ère des développeurs. Il déverrouille les performances et améliore également la façon dont les sites sont déployés. Jamstack a grandi avec d’excellents membres de l’écosystème tels que Hugo et Netlify. Sans aucun doute, il ne fera que grandir à partir d’ici.

Ensuite, découvrez comment déployer l’application frontale sur Netlify.