De la Prise de Notes à la Publication : Le Workflow Ultime Obsidian & Astro

Construire mon nouveau blog avec Astro, Obsidian & Cloudflare

J’ai récemment décidé de moderniser mon site personnel. Cet article sert un double objectif : expliquer comment mettre en place un tel blog (et partager à quel point c’était rapide et facile), et agir comme le tout premier article sur cette nouvelle plateforme. C’est une chance pour moi de tester le nouveau framework et l’écosystème que j’ai choisis—qui, à ce stade, semblent vraiment incroyables, surpassant de loin tout ce que j’ai testé auparavant !

Ce guide couvre la configuration d’un blog utilisant Astro avec le thème Astro-modular, Obsidian comme éditeur, GitHub pour héberger la base de code, et Cloudflare pour déployer et héberger les pages.

Quelques mots sur la stack technologique

Qu’est-ce qu’Astro ?

Astro (voir le site officiel)

Site web Astro

J’ai découvert Astro récemment en cherchant des alternatives à Hugo pour mon blog. C’est un framework web qui vous permet de construire des sites web orientés contenu comme des blogs, des boutiques e-commerce, et des sites de documentation. J’ai été ravi d’apprendre que de nombreux acteurs majeurs utilisent effectivement Astro pour construire leurs propres sites web (Cloudflare, Porsche, Netlify, etc.). Vous pouvez voir la liste des exemples dans leur showcase.

Astro colle à la philosophie que je cherchais : c’est une solution orientée contenu. Pour faire simple, vous écrivez votre article en Markdown. Ensuite, durant la phase de build & déploiement, Astro transforme votre Markdown en page web.

Astro construit les pages côté serveur. Cela signifie que les pages n’ont pas à être rendues dans le navigateur après coup, garantissant une haute performance pour votre site web. Pour des cas d’usage avancés, il supporte aussi la majorité des frameworks web modernes populaires (React, Vue, Svelte, etc.).

Enfin, il y a plein de thèmes disponibles pour Astro, gratuits et payants, qui offrent généralement des garanties concernant la disponibilité et la maintenance.

Qu’est-ce que Cloudflare ?

Vous connaissez probablement Cloudflare, peut-être le nom le plus célèbre de cet article. Ils sont un pilier de l’infrastructure internet moderne—si massif qu’un problème récent a conduit à la chute d’une partie significative du web (voir cet article).

Cloudflare est surtout connu pour sa solution DNS, étant le plus grand CDN, et sa protection anti-DDoS, mais ce n’est qu’une fraction de ce qu’ils fournissent.

Je suis intéressé ici par une autre fonctionnalité : Workers et Pages. Cela vous permet de déployer des composants web avec un niveau gratuit généreux. J’ai précédemment partagé un article sur comment utiliser les Workers pour mapper des alertes Grafana vers Ntfy. Ici, nous utiliserons la fonctionnalité Pages pour déployer notre site web.

Obsidian

Obsidian est une application complète de gestion de connaissances personnelles et de prise de notes basée sur Markdown. Bien que non open source, elle est gratuite pour un usage personnel.

Elle existe sur presque toutes les plateformes : macOS, Windows, Linux, Android et iOS.

Honnêtement, quand je cherchais une solution de prise de notes multi-plateforme, j’ai testé de nombreuses options (Joplin, Memos, Standard Notes, Notesbook, Blinko…). J’ai initialement écarté Obsidian parce que les données sont stockées localement sur l’hôte plutôt que synchronisées via un serveur (la synchro native nécessite un abonnement).

Cependant, j’ai décidé de donner une chance à Obsidian puisqu’il est régulièrement cité comme la référence absolue. Je l’ai rapidement adopté. La combinaison d’une solution de synchronisation (comme Syncthing, ou Obsidian-livesync), une interface réactive, et une bibliothèque de plugins massive m’ont convaincu de faire d’Obsidian mon outil de prise de notes favori. Cela a aussi augmenté ma volonté de convertir mon workflow de documentation vers Obsidian également.

L’Arme Secrète : Le Thème Astro Modular

Après avoir choisi Astro, j’ai parcouru les différents thèmes disponibles ici.

Thèmes listés sur le site Astro

J’ai atterri sur Astro Modular, un thème “conçu pour les utilisateurs d’Obsidian” (“Hé, c’est moi !” me suis-je dit). Il avait le look élégant et moderne que je chassais. En allant un peu plus loin, j’ai remarqué qu’il va au-delà du simple “thème”. Il fournit des outils et plugins pour transformer Obsidian en un CMS à part entière. Il offre une expérience proche de Frontmatter CMS, mais sans la complexité et la configuration manuelle.

Il fournit aussi d’excellentes fonctionnalités de workflow, comme un commit et push vers GitHub en un clic. Combiné avec le build-and-run automatique de Cloudflare lors du push vers le dépôt, l’expérience est fluide !

Le thème vient avec un Assistant de Configuration (Setup Wizard) pour configurer l’apparence, votre fournisseur choisi (Vercel, Netlify, Cloudflare), l’identité du site, les catégories et les pages statiques. Il couvre le squelette du site parfaitement.

Honnêtement, ce thème simplifie significativement le lancement du site web et rationalise le processus d’écriture. C’est exactement ce que je voulais : un site facile à configurer, rapide, moderne, mais avec une expérience d’écriture supérieure.

La procédure

Dans cette section, je détaillerai les étapes pour créer un site en ligne en utilisant cette stack.

Prérequis :

• Un compte GitHub (avec un ordinateur configuré pour cloner, commiter et pusher).
• Un compte Cloudflare.
• Obsidian installé sur votre ordinateur.

Note : J’ai fait cela sur un MacBook, mais ça s’applique à Linux et Windows pourvu que les prérequis soient rencontrés.

D’abord, allez sur le dépôt GitHub du thème ici. Sous la section Quick Start, vous verrez des boutons pour déployer vers Netlify, Vercel ou Cloudflare. Puisque nous avons choisi Cloudflare, cliquez sur Deploy to Cloudflare.

Boutons de déploiement dans le dépôt GitHub du thème

Cela vous mène à une page de création d’application Cloudflare. Connectez votre compte GitHub (GitLab est aussi une option), choisissez public ou privé pour le repo, et nommez votre projet.

L’écran de création d’application sur Cloudflare

Laissez les autres éléments pré-remplis tels quels et cliquez sur Create and Deploy. Cela va :

1. Créer le dépôt Git.
2. Déployer le site web correspondant à ce dépôt.

Après un moment, vous atterrirez sur la page Overview. Cliquez sur le lien en haut pour voir que votre site est en ligne ! 🚀

Le site web que vous obtenez juste après le premier déploiement

Le site contient du contenu d’exemple pour vous aider à comprendre la structure. Maintenant, approprions-le-nous.

Allez sur votre compte GitHub et trouvez le nouveau dépôt créé par Cloudflare.

Le dépôt créé par Cloudflare

Clonez le dépôt localement. Une fois fait, ouvrez le dossier src/content comme un Coffre (Vault) dans Obsidian. Confirmez que vous faites confiance à l’auteur. Cela chargera les plugins du thème et lancera l’Assistant de Configuration. Suivez le guide : remplissez les infos de votre site, choisissez les préréglages, polices, organisation du contenu et navigation. L’assistant vérifiera vos plugins et résumera vos choix.

L’assistant de configuration au premier lancement d’Obsidian avec votre projet Astro

Note : Je vous encourage fortement à lire le guide de démarrage pour vous assurer de ne manquer aucune étape.

Maintenant, ouvrez “Home” sous la section “Bases” dans la navigation latérale gauche d’Obsidian. C’est votre tableau de bord CMS.

La page d’accueil du CMS

Ici, vous pouvez basculer entre Articles (Posts), Pages, Projets, etc. En Haut à Droite : vous avez un bouton ”+ New” pour créer du contenu. En Bas à Droite, vous avez une icône de synchro montrant les fichiers modifiés. Cliquer sur la flèche crée un commit et push les changements vers GitHub (déclenchant un déploiement Cloudflare).

Maintenant, cliquez sur le bouton + New.

Un nouvel article créé via le bouton + New

Cela ouvre une page similaire à Notion ou d’autres outils de documentation, avec des propriétés (frontmatter) en haut. En dessous se trouve l’endroit où vous écrivez votre article en utilisant la syntaxe Markdown. Vous pouvez vous concentrer sur l’écriture d’abord et formater au fur et à mesure sans menus complexes. Si vous n’êtes pas familier avec le Markdown, jetez un œil à cette anti-sèche.

Une fois fini, cliquez sur l’icône flèche vers le haut en bas à droite pour appliquer les changements. Voilà, vous avez publié votre premier article !

Quoi d’autre ?

J’ai survolé ce tutoriel pour vous amener en production rapidement, mais quelques étapes restent pour un blog vraiment “prêt pour la production” :

• Nettoyage : Supprimez les pages de test et d’exemple.
• Domaine Personnalisé : Ajoutez une entrée DNS pour accéder au site web via votre propre domaine (au lieu de l’adresse .worker.dev).
• Analytics : Je vous encourage à regarder Plausible, une alternative légère, open-source et conforme RGPD à Google Analytics qui ne nécessite pas de bannière de cookies. Voir mon article sur Plausible et Matomo ici.
• Commentaires : Le thème supporte Giscus (propulsé par GitHub Discussions). Alternativement, considérez Remark42, que j’ai couvert dans cet article.
• Pages Basiques : Ajoutez les pages Politique de Confidentialité, À Propos et Contact.

Notez que vous pouvez aussi héberger ceci sur GitHub Pages, Vercel ou Netlify avec un niveau de facilité similaire grâce à l’automatisation du thème.