Un blog Hugo, nous l'avions vu par le passé est très simple à monter puisqu'il s'agit d'un site statique, de plus son hébergement ne coûte pratiquement rien. Par exemple, si vous n'avais pas de serveur existant à réutiliser, vous pourriez utiliser un Google Bucket. Pour ceux qui débutent, c’est un excellent moyen d’héberger un site pour presque rien.  

Hugo est un générateur de site statique nous l'avons vu. Il faut des fichiers locaux sur votre ordinateur et il les convertit en fichiers HTML dans une structure de répertoires qui permet de jolies URL sans routage personnalisé. Cela ne coûte presque rien d’héberger car il n’a pas de base de données et il n’exige pas de calcul personnalisé.  En ce qui concerne les hôtes Hugo, vous pouvez choisir n’importe quel hôte de fichier statique. Certaines personnes l'hébergent sur S3 (Amazon), d'autres sur GitHub, d'autres sur un service Web bon marché. J'ai choisi de l'héberger dans un Google Cloud Bucket. Cela coûte quelques centimes par mois et il est extrêmement facile à installer, alors commençons!  

Voici un schéma d'infrastructure du projet

Conditions préalables

Assurez-vous que les logiciels et services suivants sont installés et configurés:  

  • Hugo
  • SDK Google Cloud
  • Git

Toutes les commandes de ce blog supposent que vous utilisez un Mac ou Linux. Ces commandes fonctionneront probablement sous Windows, mais elles nécessiteront peut-être quelques modifications.

Étape 1: créer un site Hugo

Exécutez ce qui suit dans un terminal:  

hugo new site incredible-blog
cd incredible-blog

Cela crée un dossier nommé incredible-blog et le remplit avec un site Web par défaut.  

Ensuite, choisissez un bon thème pour votre site Hugo. Vous avez plusieurs options sur https://themes.gohugo.io/. J'aime Casper Two, je vais donc utiliser celui-là:  

git clone https://github.com/eueung/hugo-casper-two.git themes / casper-two cp themes / casper-two / exampleSite / config.toml. 

Ensuite, vous pouvez modifier config.toml autant que vous le souhaitez. Cela modifiera votre site en lui donnant un titre, un sous-titre, une description, des pseudonymes sociaux, etc. différents.  

Maintenant, créons un post:  

hugo new post/hello-world.md

Ouvrez votre nouveau message situé dans content/post/hello-world.md dans votre éditeur de texte favori et modifiez draft: true to draft: false Ça devrait ressembler a quelque chose comme ca:  

---
title: "Hello World"
date: 2018-07-03T17:39:50-04:00
draft: false
---

Construisez votre site web avec:  

hugo 

Examinez votre site en exécutant le serveur Hugo par défaut, puis en ouvrant un navigateur sur http://localhost:1313/

hugo server -D

Et vous êtes prêt à partir! Voyons à présent l’hébergement.

Étape 2: créez votre Google Bucket

Créons votre Google Bucket.

Le nom de ce compartiment doit correspondre au domaine du site Web sur lequel vous souhaitez l’héberger. Dans ce cas, je souhaite l’héberger sur http://example.gabrielsagnard.fr. Il s'agit d'un nom de domaine que je possède par ailleurs chez OVH. Je vais donc nommer mon exemple: exemple.gabrielsagnard.fr.  Exécutez ce qui suit pour créer votre compartiment:  

gsutil mb gs: //example.gabrielsagnard.fr/ 

Par défaut, ce compartiment ne permet à personne de lire le contenu. Mettons à jour ses autorisations par défaut:  

gsutil defacl ch -u allUsers: READER gs://example.gabrielsagnard.fr

Maintenant, disons-lui de résoudre les répertoires en index.html et les pages manquantes en 404.html:  

gsutil web set -m index.html -e 404.html gs://example.gabrielsagnard.fr

Et poussons notre site!  

gsutil -m rsync -R public gs: //example.gabrielsagnard.fr

Étape 3: pointez le domaine sur Google Bucket

La dernière étape dépend de votre hôte de domaine. Vous devez ajouter un enregistrement CNAME pour l'adresse de votre site Web et le pointer à l'adresse c.storage.googleapis.com.  Ma configuration est via OVH et mon domaine gabrielsagnard.fr. Cela ressemble à ceci:

Créez un enregistrement similaire sous votre domaine, cliquez sur Créer, puis visitez votre site dans un navigateur:

open http://example.gabrielsagnard.fr

Il en résulte :

On a plus qu'à créer un repository pour tout cela chez Github et git pusher tout cela.

Je rappelle que de multiples solutions similaires existent comme par exemple chez AWS avec S3, chez Netlify etc... et à chaque fois pour quasiment rien.

Résultat final ici :

Enjoy !