fr🇫🇷

Informations sur la page:

Cet article contient 733 mots.
Comptez 4 minutes de temps de lecture

Automatisation deploiement Hugo avec GitHub Actions et GitHub Pages

November 26, 2020
GitHub Hugo Asciidoctor diagram

Objectifs

  • DĂ©ployer automatiquement un site avec Hugo, le backend Asciidoctor et GitHub Actions

  • Customiser certaines fonctionnalitĂ©s asciidoctor non intĂ©grĂ©es par Hugo

  • Utiliser un nom de domaine personnel pour son site sous GitHub Pages

Pré-requis

  • Git repository pour votre site Hugo

  • Git repository pour les fichiers gĂ©nĂ©rĂ©s par Hugo

  • Un nom de domaine personnel

  • Accès Ă  votre console d’administration DNS pour crĂ©er un sous-domaine et ajouter une nouvelle entrĂ©e de type CNAME

Architecture générale

blockdiagblockdiag { default_node_color = grey; default_textcolor = white; Dev[shape = actor, label="Dev"]; Visiteur[shape = actor, label = "Visiteur"]; group GitHub_Repositories{ label = "GitHub Repositories"; shape = line; GH_Hugo_Repo[shape = cloud,numbered = "1"]; GH_Pages_Repo[shape = cloud,numbered = "9"]; } GH_Actions[shape = circle,numbered = "2"]; GH_Actions_Repo[shape = square,numbered = "3"]; Hugo_Actions_Repo[shape = square,numbered = "4"]; Ruby_Setup[shape = square,numbered = "5"]; Python_Setup[shape = square,numbered = "6"]; Asciidoctor_Setup[shape = square,numbered = "7"]; Build_Hugo[shape = box,numbered = "8"]; Deploy_Hugo[shape = box,numbered = "10"]; group DNS{ label = "DNS Infrastructure"; shape = line; DNS_Server[shape = box,numbered = "12"]; Domain_Name_Provider[shape = box,numbered = "11"]; } Dev -> GH_Hugo_Repo[label = "git push", textcolor="black"]; GH_Hugo_Repo <- GH_Actions[label = "on push on master", textcolor="black"]; GH_Actions -> GH_Actions_Repo[label = "pull", textcolor="black"]; GH_Actions -> Hugo_Actions_Repo[label = "pull", textcolor="black"]; GH_Actions -> Ruby_Setup[label = "pull", textcolor="black"]; GH_Actions -> Python_Setup[label = "pull", textcolor="black"]; GH_Actions -> Asciidoctor_Setup[label = "run", textcolor="black"]; GH_Actions -> Build_Hugo; Build_Hugo -> GH_Hugo_Repo[label = "pull", textcolor="black"]; GH_Actions -> Deploy_Hugo; Deploy_Hugo -> GH_Pages_Repo[label = "push", textcolor="red", color = "red"]; Visiteur -> DNS_Server [label = "IP ?", textcolor="black"]; Visiteur -> GH_Pages_Repo; Domain_Name_Provider -> DNS_Server[label = "CNAME", textcolor="black"]; DNS_Server -> Visiteur[label = "CNAME resolution", textcolor="yellow", color = "yellow"]; }DevVisiteurGH_Hugo_Repo1GH_Pages_Repo9DNS_Server12Domain_Name_Provider11GH_Actions2GH_Actions_Repo3Hugo_Actions_Repo4Ruby_Setup5Python_Setup6Asciidoctor_Setup7Build_Hugo8Deploy_Hugo10git pushIP ?pullpullpullpullrunpullpushon p ...CNAM ...CNAMEGitHub RepositoriesDNS Infrastructure

Repository GitHub

Repository Hugo

Ce repository contiendra le contenu source de votre site, la configuration, le theme et les pages qui seront générées par Hugo. Le resultat du build Hugo sera déployé dans le repository dédié à GitHub Pages.

Exemple de structure du dossier dédié aux sources Hugo:

[someone@server:Hugo] # tree -L 2
.
|-- archetypes
|   `-- default.md
|-- config.toml
|-- content
|   |-- authors
|   |-- bin
|   |-- calendar
|   |-- images
|   |-- post
|   `-- project
|-- static
|   |-- CNAME
|   |-- css
|   |-- js
|   `-- README.md
`-- themes
    `-- minimal

13 directories, 4 files

Repository GitHub Pages

Ce repository contiendra le contenu de votre site généré par Hugo et déployé par GitHub Actions.

Exemple de structure du dossier:

Warning
Le contenu de ce dossier est purgé à chaque déploiement.
[someone@server:someone.github.io] # tree -L 1
.
|-- 404.html
|-- authors
|-- bin
|-- calendar
|-- categories
|-- CNAME
|-- css
|-- en
|-- fr
|-- images
|-- index.html
|-- index.xml
|-- js
|-- post
|-- project
|-- README.md
|-- sitemap.xml
`-- tags

12 directories, 6 files

Paramétrage GitHub Actions

Afin d’activer les

Paramétrage DNS

Paramétrage de votre nom de domaine customisé

Cas avec fichier CNAME

Si vous utilisez un repository pour les sources Hugo, il suffit de créer un fichier CNAME sous votre dossier "static".

Le fichier ne doit contenir que votre nom de domaine customisé. Exemple:

www.custom_domain.xy

Cas avec l’interface d’administration de GitHub Pages

Warning
Ne pas utiliser car le fichier CNAME sera supprimé à chaque push après le build "hugo_deploy" provenant de GitHub Actions.

Cas avec GitHub Actions et le paramètre cname

Si vous utilisez le repo peaceiris/actions-gh-pages, vous pouvez ajouter le paramètre suivant dans fichier GitHub Actions:

- name: Deploy
  uses: peaceiris/actions-gh-pages@v2
  env:
    ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
    EXTERNAL_REPOSITORY: username/username.github.io
    PUBLISH_BRANCH: master
    PUBLISH_DIR: ./public
    cname: www.custom_domain.xy
  with:
    emptyCommits: false
    commitMessage: ${{ github.event.head_commit.message }}

Paramétrage DNS dans l’interface de votre provider DNS

Warning
Les copies d’écran concernent un panel d’administration DNS chez OVH.
  • Connectez vous Ă  votre interface d’administration DNS

  • SĂ©lectionnez votre domaine si vous en gĂ©rez plusieurs

200
  • SĂ©lectionner "Zone DNS"

200
  • Puis sĂ©lectionnez ajoutez une entrĂ©e, sĂ©lectionnez "CNAME"

200
  • Ensuite remplissez le formulaire permettant de rediriger votre site vers le site GitHub pages de la forme: username.github.io

Note
il faudra peut-etre ajouter un "." au domaine de redirection, par exemple: username.github.io.
200
  • Puis validez votre entrĂ©e

Note
Quelques minutes voire plus peuvent être nécessaire pour répliquer votre nouvelle entrée vers les différents serveurs DNS.
Vincent Gourrierec