Créez votre blog perso en 10 minutes !

Cet article vous présentera comment créer un blog simplement, avec hébergement et nom de domaine gratuits !

Non, h25 n’a pas reçu de sponsoring de Squarespace : tout se fera via GitHub et le service associé GitHub Pages, qui est ce que nous utilisons d’ailleurs pour héberger le blog que vous êtes en train de lire.

Pour ce tutoriel, deux connaissances préalables sont recommandées : utilisation de git, et la connaissance du format Markdown.

Création d’un nouveau repo GitHub

Tout le contenu et formatage du blog seront hébergés dans un dépôt GitHub, et chaque modification se fera via un simple commit. Tout le rendu sera effectué par Jekyll, un générateur de pages statiques.

Commençons par créer un fork du repository jekyll-now.

img

Pour que le site fonctionne correctement, il faut le renommer [votre username GitHub].github.io qui sera aussi l’URL de votre blog. Notre compte s’appelle h25tuto, donc l’URL du blog sera h25tuto.github.io. Pour changer le nom, rendez vous dans l’onglet Settings :

img

Votre blog est maintenant créé et disponible à votre URL github.io !

img

Maintenant, passons à la personnalisation et l’écriture de notre premier article :)

Personnalisation

Avant de pouvoir ajouter du contenu ou modifier les templates du blog via des commits, il vous faudra d’abord cloner le dépôt correspondant sur votre ordinateur.

Utilisez votre outil favori pour cloner le repo (si vous utilisez Mac ou Windows, on recommande le client Fork ). Chaque fichier et dossier contenu dans celui-ci a sa propre utilité, ceux qui nous intéressent particulièrement sont :

  • _posts contient les articles, à raison d’un fichier par article au format Markdown.
  • images est un dossier dans lequel vous mettrez les images à inclure dans les articles.
  • _layouts contient les templates des pages du blog.
  • _config.yml est le fichier principal pour toutes les configurations du blog.

Avant d’écrire le premier article, commençons par personnaliser un peu le site. Le plus important est de changer le nom du blog, votre bio courte et la photo :

img

Ensuite, vous pouvez relier différents réseaux sociaux en ajoutant simplement vos noms d’utilisateur dans les champs associés, et Jekyll se chargera de créer des icônes en bas de page.

img

img

Il est aussi très simple d’activer une section de commentaires via Disqus, et d’obtenir des statistiques de visites avec Google Analytics.

img

On peut déjà faire un commit+push des modifications pour avoir un premier visuel du nouveau blog :

img

Le site est presque prêt, mais il vous reste tout de même à modifier la section About avant de pouvoir vous lancer dans la rédaction !

img

Cette modification se fait via le fichier about.md situé à la racine du repo. Vous pouvez aussi effectuer des modifications de style via les _layouts ou style.scss pour donner un look différent au site.

Votre premier article

Tous les articles que vous écrirez se situent dans _posts. Un exemple s’y trouve déjà, et on peut se baser dessus pour écrire chaque article. Ecrivons un petit article pour souhaiter la bienvenue sur le blog :

img

Le nom du fichier est important : il doit respecter le format année-mois-jour-stub.md. La date servira à trier les posts pour mettre les plus récents d’abord, et le stub est une version raccourcie du titre de l’article qui apparaîtra dans l’URL. Par exemple, l’article que vous êtes en train de lire se nomme 2020-05-07-Tuto-Blog.md.

Le post d’exemple déjà présent dans votre repo contient un exemple pour intégrer une image du dossier images/, et nous vous recommandons de créer des sous-dossiers dans celui-ci pour garder un peu d’ordre (un post long peut facilement compter une vingtaine d’images). Si vous souhaitez créer de nouveaux articles, il vous suffira de copier le fichier d’un article précédent dans le même dossier, et de modifier le nom de fichier et le contenu de celui-ci.

Astuces bonus

Les étapes effectuées jusqu’ici devraient vous permettre d’avoir un site tout à fait fonctionnel, mais voici quelques astuces supplémentaires pour tirer parti de plusieurs fonctionnalités de Jekyll avec GitHub Pages.

Publication à une date future

Si la date de l’article (dans le nom de fichier) est située dans le futur, l’article ne sera visible qu’à partir de cette date. Attention cependant, le fichier associé sera visible dans votre repo GitHub, donc évitez d’y ajouter du contenu devant rester secret (par exemple des writeups de CTF avant la fin de la compétition).

En utilisant les layouts, vous pouvez automatiquement ajouter du contenu à la fin de chaque article. Cela peut s’avérer utile pour ajouter par exemple un bouton ou flux lié à Twitter/Facebook : pour Twitter, vous pouvez générer les balises HTML automatiquement sur publish.twitter.com.

Ajout d’un nom de domaine

Dans l’onglet Settings du repo sur github.com, vous trouverez une section GitHub Pages qui vous permettra d’importer automatiquement un thème Jekyll, et d’utiliser un nom de domaine qui vous appartient au lieu du nom de domaine .github.io qui vous est automatiquement accordé.

img

Favicon

Vous pouvez ajouter une favicon simplement en mettant le fichier favicon.ico à la racine de votre repo.

Build en local

Le site devrait se mettre à jour en quelques secondes à chaque fois que vous poussez de nouvelles modifications. Si ce n’est pas le cas, il y a sûrement un problème dans un commit récent (cela nous est arrivé plusieurs fois à cause des caractères { interprétés comme des balises Jekyll). Vous pouvez trouver facilement le bug en compilant le site localement en installant jekyll puis jekyll serve dans le dossier.


Nous espérons que cet article vous donnera envie de créer votre propre site. Si vous décidez de sauter le pas, taggez nous sur Twitter et nous serons ravis de partager vos premiers contenus !

Pensez aussi à rejoindre notre communauté Discord ici.


Written on May 7, 2020
Follow us on Twitter to be informed about new posts !