Blog Tihka Tek

Publier un projet Hugo sous Gitlab Pages

· Laurent Planche

Configuration du projet

Il est préférable d’exclure l’exécutable hugo et le dossier public de git pour éviter tout problème lors de la publication sous Gitlab Pages :

echo "hugo" >> .gitignore
echo "/public/" >> .gitignore

Voici les étapes pour pousser le projet vers Gitlab

  1. Configurer le nom du dépôt distant dans Gitlab : git remote add origin git@gitlab.com:tihka-tek/tihkatek_blog.git
  2. Ajouter les fichiers : git add .
  3. Commiter les modifications : git commit -m "Initial commit"
  4. Pousser les modifications vers Gitlab : git push -u origin main

Ajout du fichier CI/CD pour la livraison dans Pages

Créer un fichier nommé .gitlab-ci.yml à la racine du project et y insérer le contenu suivant :

default:
  image: "${CI_TEMPLATE_REGISTRY_HOST}/pages/hugo:latest"

variables:
  GIT_SUBMODULE_STRATEGY: recursive

test:  # builds and tests your site
  script:
    - hugo
  rules:
    - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH

create-pages:  # a user-defined job that builds your pages and saves them to the specified path.
  script:
    - hugo
  pages: true  # specifies that this is a Pages job
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  environment: production

Faites en commit + push des modifications :

git add .
git commit -m "Add Gitlab CI"
git push -u origin main

Le site est visible depuis le lien fourni sur cette page : https://gitlab.com/<mon_projet>/pages

Configuration de l’URL de production

2 options sont possibles :

  1. garder l’adresse Gitlab Pages

Il suffit d’éditer le fichier hugo.toml pour modifier l’URL en prenant celle de Gitlab Pages :

baseURL = 'https://<nom_projet>-xxxxxxx.gitlab.io/'
  1. Utiliser son propre nom de domaine

Gitlab permet de définir un sous-domaine personnalisé pour exposer un site statique

Editer le fichier hugo.toml pour modifier l’URL en prenant celle de Gitlab Pages :

baseURL = 'https://<sous-domaines>.<nom de domaine>/'

Sur la page Pages du projet (https://gitlab.com/<nom_projet>/pages) :

  1. Décocher “Use unique domain” et cliquer sur “Save changes”
  2. Dans Domains, cliquer sur “New domain”
  3. Saisir le sous-domaine souhaité pour ce site (ex: blog.tihkatek.fr)
  4. Clicker sur “Create new domain”
  5. Récupérer les entrées ALIAS et TXT et les ajouter dans les définitions DNS de l’hébergeur du domaine sous forme de CNAME et TXT (L’activation peut prendre quelques minutes)
  6. Retourner dans Gitlab sur la page de configuration et dans vérification status, rafraîchir le status jusqu’à ce qu’il passe à “Verified”
  7. Finaliser la configuration en cliquant sur le bouton “Save changes”
  8. Redéployer l’application pour les nouveaux paramètres soient pris en compte

Le site doit maintenant être disponible à l’URL indiquée

L’attibution d’un certificat Let’s Encrypt par Gitlab peut prendre un de temps. En attendant, le navigateur peut remonter temporairement une alerte de sécurité.

En cas de problème :

  1. Vérifier que “Use unique domain” est bien décoché
  2. Vérifier les enregistrements DNS
  3. Vérifier que l’application publiée fonctionne bien sans le domaine personnalisé

Source : Build, test, and deploy your Hugo site with GitLab

Mise à disposition publique ou privée

Par défaut le site est privé. Pour le rendre publique, aller dans les paramètres généraux du projet Gitlab et changer la visibilité :

Settings -> General -> Visibility, project features, permissions -> Pages

Changer l’option en Everyone Cliquer sur “Save changes” en bas de page