Dans cet article nous avons vu comment générer un site, installer un thème et ajouter du contenu. Je vous invite à le lire si ce n’est pas fait.
Comment déployer vers GitHub pages ?
Vous connaissez GitHub, mais connaissez-vous GitHub pages ?
J’imagine que si vous développez un minimum, vous possédez un compte GitHub (Je mentionne GitHub, mais ceci est également valable pour GitLab).
Si c’est le cas, alors vous avez peut être déjà utilisé les pages GitHub. Sinon regardons ensemble brièvement ce que c’est.
Pour faire simple, GitHub Pages est une solution proposée par GitHub pour pouvoir héberger son contenu, nous pouvons héberger tout type de contenu statique, comme de simple page HTML/CSS/JS, mais aussi un projet en React etc…
Étant donné qu’Hugo est un framework au contenu statique, alors cette solution est parfaite pour nous.
Voici un lien pour plus de détails au sujet de GitHub Pages
Créer un repo sur GitHub
Comme tout autre projet, il vous faudra un repo GitHub, faites en sorte que celui-ci soit public ! Ne poussez pas votre code tout de suite !
Comment créer un build de votre site ?
Juste avant pousser le projet sur GitHub, il nous faut créer un build du site. Cela signifie de créer la version statique du projet, avant de générer cette version, il nous faut encore ajouter 2/3 lignes de code dans le fichier config.toml
Il nous faut modifier la première ligne :
baseURL = 'https://<username>.github.com/<nomDuRepoGithub>'
Et également y ajouter celle-ci :
publishDir = "docs"
Cette dernière signifie qu’une fois que l’on créera le build alors celui-ci se trouvera dans un dossier appelé docs.
À présent, rendez-vous dans le dossier à la racine, et taper la commande :
hugo
Cette simple commande va ainsi créer un dossier nommé docs à la racine de votre projet, à l’intérieur de ce dossier, on retrouvera la version statique de votre site. C’est ce dossier qui sera important pour GitHub ou toute autre plateforme d’hébergement.
Poussez et mise en place GitHub Pages
Comme nous venons de créer notre build, nous pouvons désormais pousser notre code vers GitHub.
Une fois que votre code a été envoyé sur GitHub, rendez-vous sur la page de votre repo et cliquez sur Settings puis sur Pages sur votre gauche.
Ensuite, il vous faudra sélectionner la branche sur laquelle se trouve votre projet, et aussi le dossier docs, car c’est lui qui contient le site statique. Enfin, appuyez sur save et vous devriez à présent avoir un lien pour votre site.
Il se peut que votre site ne soit pas en ligne tout de suite, mais ceci ne devrait pas être très long !
Dans un prochain article, nous verrons comment déployer notre site sur un serveur apache.
N’hésitez à me suivre sur GitHub ou LinkedIn.