Pour être honnête, je n'étais pas certain de découvrir le meilleur framework pour site internet lorsque j'ai débuté avec Hugo. Ceci étant, utiliser des fichiers Markdown, un temps de build très permformant pour n'avoir qu'à héberger des fichiers html statique et la possibilité de produire le site sur gitlab CI/CD, ça avait de quoi m'attirer !
Mais vous devez faire attention, car le quickstart de la doc officielle n'est pas compatible avec un déploiement sur Gitlab Pages.
Comment démarrer rapidement avec hugo
Voici comment mieux commencer avec Hugo selon moi :
étape 1 - Sélection du thème
Tout d'abord, choisissez attentivement le thème que vous souhaitez utiliser. C'est important car la façon dont vous allez configurer votre site Web peut être (très) spécifique à votre thème.
Pour choisir judicieusement, il suffit d'aller sur themes.gohugo.io et de regarder la démo de ceux qui vous intéressent. Toutes les démos intègrent la restitution de la syntaxe markdown, ce qui permet de s'assurer que le thème répond à vos souhaits!
étape 2 - Nom du site Web
Deuxièmement, choisissez le nom du site Web.
Ce doit être le nom du dossier. lorsque vous déploierez votre site Web sur les pages gitlab, vous auriez le site Web suivant URL: http://username.gitlab.io/foldername/
Si vous créez un blog, "blog" serait un bon nom. Si vous êtes sur le site Web pour proposer un produit, "productName" serait pertinent.
Étape 3 - Création de site Web
C'est la partie la plus simple du tutoriel. Il suffit simplement de saisir la commande suivante:
hugo new site <nom_dossier>
Maintenant, vous avez un nouveau dossier appelé nom_dossier avec des éléments. Avant de faire quoi que ce soit, suivez l'étape suivante. N'ENTREZ PAS DANS LE NOUVEAU DOSSIER
Étape 4 - Téléchargement du thème
Allez sur le repository du thème choisi et NE CLONEZ PAS le référentiel git. Récupérez le fichier zip et décompressez-le sur nom_dossier/themes/nom_thème. (Oui, cette fois, vous entrez dans le nom_dossier)
Attention, le contenu du thème doit être sur nom_thème, pas sur nom_thème/hugo-theme-name-master.
étape 5 - Utilisez exampleSite comme modèle
Copiez le nom_thème/exampleSite/config.toml directement sur votre nom de dossier, en remplaçant celui créé en standard.
Sur le fichier config.toml, modifiez la ligne de sélection de thème en
theme = "<nom_thème>"
Puisque vous souhaitez utiliser hugo avec les pages gitlab, vous devez également modifier le baseURL sur config.toml:
baseurl = "https://<username>.gitlab.io/<foldername>"
Déploiement de pages Gitlab
Attention
NE RIEN FAIRE DANS GIT! Vous allez créer un projet gitlab que vous initierez avec votre foldername
étape 6 - Créer un projet gitlab
Sur gitlab, créez un nouveau projet, du même nom que votre dossier. Ne l'initialisez pas avec un fichier readme ou autre chose.
étape 7 - Créez votre fichier CI
Allez sur le nom de votre dossier, et créez un fichier appelé .gitlab-ci.yml
Modifiez le fichier avec le code suivant:
image: monachus/hugo
variables:
GIT_SUBMODULE_STRATEGY: recursive
pages:
script:
- hugo
artifacts:
paths:
- public
only:
- master
étape 8 - Poussez votre site Web
Tout d'abord, lancez le repo:
git init
Ensuite, ajoutez le répertoire /public au fichier .gitignore
echo "/public" >> .gitignore
Enfin, validez et pushez le code sur la branche principale
git add .
git commit -m "Initial commit"
git remote add origin https://gitlab.com/YourUsername/your-hugo-site.git
git push -u origin master
étape 9 - See & Wait
Allez dans l'onglet "CI / CD pipeline" de votre repository gitlab
Surveillez l'étape de build et attendez qu'elle soit passée. Vous y êtes ! Votre site Web est publié sur username.gitlab.io/foldername