· 4 min read

Publier un blog HYPER simplement !

Découvrons comment publier un Blog avec Hugo, Front Matter et l'hébergeur Netlify !

Découvrons comment publier un Blog avec Hugo, Front Matter et l'hébergeur Netlify !

Objectifs

Dans cet article je vous propose une approche simple et rapide pour publier votre premier blog ! Nous allons pour cela utiliser un générateur de site statiques (Hugo) et un hébergeur (Netlify).

Pour nous simplifier la gestion et l’édition de nos articles, je vous propose également d’utiliser un CMS directement dans VSCode 🔥

Pré requis

Pour suivre cet article vous devez disposer sur votre poste :

Création de notre projet Hugo

Initier le projet

La première consiste à initialiser un nouveau projet Hugo avec sa CLI.

hugo new site MyBlog
cd MyBlog
git init

Installer un thème pour votre blog

La deuxième étape de la créationn de votre blog est de choisir un thème dans la bibliothèque de themes. Pour le tuto je vous propose d’utiliser le thème “MemE”:

git submodule add --depth 1 https://github.com/reuixiy/hugo-theme-meme.git themes/meme
rm config.toml && cp themes/meme/config-examples/en/config.toml config.toml

Personnaliser votre thème

  • Dans le fichier config.toml de votre thème, vous pouvez personnaliser votre thème en modifiant les balises appropriées.
title = "YoanDev Demo Blog"
languageCode = "fr"

# ...

# Author’s information
[author]
    # Name
    name = "YoanDev"
    # Email
    email = "contact@yoandev.co"
    # Motto or introduction
    motto = "🚀 Créateur de contenu, de formations et de solutions pour le web."
    # Avatar
    avatar = "/icons/apple-touch-icon.png"
    # Personal website, default: baseURL
    website = "https://yoandev.co/"
    # Twitter
    twitter = "yOyO38"

# ...
  • Pour modifier les liens vers vos réseaix sociaux dans le bas de page, copiez et modifiez le fichier themes/meme/data/Socials.toml
cp themes/meme/data/Socials.toml data/Socials.toml

Voici un exemple avec mes données:

# Please do NOT edit this file!
#
# Create a new `Socials.toml` file in your site `data` directory
# instead of editing here directly.
#
# For the `icon`, see SVG.toml

[[socials]]
    id = "rss"
    url = "/rss.xml"
    icon = "rss"
    title = "RSS"
    weight = 1

[[socials]]
    id = "email"
    url = "mailto:contact@yoandev.co"
    icon = "envelope"
    title = "Email"
    weight = 2

[[socials]]
    id = "github"
    url = "https://github.com/yoanbernabeu"
    icon = "github"
    title = "GitHub"
    weight = 3

[[socials]]
    id = "twitter"
    url = "https://twitter.com/yOyO38"
    icon = "twitter"
    title = "Twitter"
    weight = 4

Création d’un article et d’une page About

Histoire d’avoir un contanu minimal, créons un article et une page About.

hugo new "posts/hello-world.md"
hugo new "about/_index.md"

Création d’un dépot GitHub/Gitlab et Push du projet

  • Direction GitHub ou GitLab : je vous laisse créer un nouveau dépot et pusher votre projet dedans. C’est la dernière étape avant de commencer à éditer votre contenu.

Voici, en synthèse, les opérations que vous allez devoir effectuer.

  • Pour GitHub :
git remote add origin git@github.com:yoanbernabeu/MyBlog.git
git branch -M main
git add .
git commit -m "Initial commit"
git push -u origin main
  • Pour GitLab :
git remote add origin git@gitlab.com:yoandev.co/myblog.git
git add .
git commit -m "Initial commit"
git push -u origin main

Utilisation du CMS “Front Matter”

Pour la suite, assurez-vous d’avoir bien installé l’extention “Front Matter” dans VSCode.

Configuration du CMS

  • Dans le menu de votre VSCode, ouvrez l’extention “Front Matter” et cliquez sur le bouton Initialize project (en arrière plan cela va créer un fichier frontmatter.json à la racine de votre projet).

  • Puis cliquez sur Open dashboard

  • Dans le menu Framework Presets selectionnez hugo

  • Dans le menu Register Content Folder(s) selectionnez content/posts

  • Puis cliquez sur Show the Dashboard

  • Dans le menu de Front Matter, cliquez sur Start server

  • Magique 🪄

Modifier l’article hello-world

A l’aide du Dashboard de Front Matter, vous pouvez modifier votre article hello-world hyper simplement. N’hesitez pas à tester toutes les options offertes par le CMD, c’est très pratique, notaement l’ajout d’image avec un simple drag and drop.

Voici un exemple :

---
title: Hello World
publishDate: 2022-07-10T16:23:51+02:00
draft: true
---
# Ceci est un titre

## Ceci est un sous-titre

## Voici une liste:

* Item 1
* Item 2
* Item 3

## Voici une image

![](/geometric-polygon-abstract-myybkpq9l5i2xeo6.jpg)

## Ceci est un tableau

| Colonne 1  | Colonne 2 | Colonne 3 |
| :--------: | --------  | --------  |
| Item 1     | Item 2    | Item 3    |
| Item 4     | Item 5    | Item 6    |
| Item 7     | Item 8    | Item 9    |

Push sur GitHub

N’oubliez pas de pusher vos modifications.

git add .
git commit -m "edit post"
git push

Publier votre blog avec Netlify

Pour publier votre blog sur Netlify, vous devez avoir un compte gratuit Netlify 😆

  • Ajoutons un fichier netlify.tomlà la racine de notre projet pour forcer une version de Hugo chez netlify.
[context.production.environment]
  HUGO_VERSION = "0.92.2"

  • Commitez votre fichier

  • Et enfin, RDV sur Netlify pour ajouter votre repository.

  • Pour le reste, c’est Netlify qui s’occupera de tout, vous n’avez plus rien à faire.

Share:
Back to Blog