CoLab IA

Workflow : d'Obsidian au site web avec Quartz et GitHub Actions

5 min de lecture

Notre pipeline de publication repose sur quatre briques : Obsidian pour rédiger, Git pour synchroniser, Quartz pour compiler et GitHub Actions pour déployer. Tout est automatique dès le git push.

Le problème de départ

Nous sommes trois fondateurs, chacun sur sa machine, qui devons collaborer sur du contenu : articles, pages d’événements, ressources, slides. Certains contenus sont publics (le site), d’autres sont privés (stratégie, brouillons, gouvernance).

Il nous fallait un système qui permette de :

  • Rédiger ensemble sans conflits
  • Garder certains contenus hors du site
  • Publier automatiquement sans intervention manuelle
  • Rester sur des outils simples et ouverts (Markdown, Git)

1. Collaboration : un vault partagé

Les trois fondateurs travaillent dans un même vault Obsidian, synchronisé via un dépôt Git commun. Chacun rédige en Markdown depuis sa machine ; Git assure que tout le monde travaille sur la même version.

Le vault sépare strictement ce qui est public (visible sur le site) de ce qui est privé (stratégie, brouillons, gouvernance).

graph TB
    subgraph EQUIPE["Les 3 fondateurs"]
        S["Sylvain<br/><i>Lausanne</i>"]
        D["Damian<br/><i>Lausanne</i>"]
        A["Alexis<br/><i>Nyon</i>"]
    end

    S -->|Obsidian| VAULT
    D -->|Obsidian| VAULT
    A -->|Obsidian| VAULT

    subgraph VAULT["Vault Obsidian partagé via Git"]
        direction TB
        PUBLIC["public/<br/><i>Contenu du site web</i><br/>articles, événements,<br/>ressources, slides"]
        PRIVATE["_private/<br/><i>Contenu interne</i><br/>stratégie, gouvernance,<br/>brouillons, communication"]
        AI["_ai/<br/><i>Instructions pour les agents IA</i><br/>playbooks, templates, style guide"]
    end

    PUBLIC -->|"Modifié = publié<br/>sur le site"| SITE["colabia.ch"]
    PRIVATE -->|"Jamais publié"| STOP["Reste dans<br/>le vault"]

    GIT["Git<br/><i>Synchronisation</i>"] -.->|"sync automatique<br/>via obsidian-git"| VAULT

    classDef person fill:#7c3aed,stroke:#5b21b6,color:#fff
    classDef public fill:#059669,stroke:#047857,color:#fff
    classDef private fill:#dc2626,stroke:#b91c1c,color:#fff
    classDef ai fill:#0891b2,stroke:#0e7490,color:#fff
    classDef site fill:#2563eb,stroke:#1d4ed8,color:#fff
    classDef stop fill:#6b7280,stroke:#4b5563,color:#fff
    classDef git fill:#f97316,stroke:#c2410c,color:#fff

    class S,D,A person
    class PUBLIC public
    class PRIVATE private
    class AI ai
    class SITE site
    class STOP stop
    class GIT git

Principe clé

Tout ce qui se trouve dans public/ finit sur le site. Tout ce qui se trouve dans _private/ reste interne. La frontière est le dossier, pas un flag ou un paramètre.

Pourquoi Obsidian ?

  • Markdown natif : pas de format propriétaire, les fichiers restent lisibles partout
  • Liens internes : le wiki-linking ([[page]]) facilite la navigation dans le vault
  • Plugin Git : le plugin obsidian-git synchronise automatiquement via des commits périodiques
  • Extensible : templates, linter, recherche full-text, tout se configure par plugins

Pourquoi Git plutôt qu’un cloud classique ?

  • Historique complet : chaque modification est tracée, on peut revenir en arrière à tout moment
  • Pas de conflits silencieux : contrairement à un dossier partagé, Git signale les conflits au lieu de les écraser
  • Déclencheur de déploiement : un git push suffit à lancer la publication automatique

2. Publication : du Markdown au site en ligne

Quand un contenu est prêt dans public/, le simple fait de pousser sur Git déclenche toute la chaîne automatiquement. Aucune intervention manuelle n’est nécessaire.

graph LR
    MD["public/<br/><i>Fichiers Markdown</i>"] -->|git push| GITHUB["GitHub"]
    GITHUB -->|"déclenche<br/>automatiquement"| ACTIONS["GitHub Actions"]

    subgraph ACTIONS["GitHub Actions"]
        direction TB
        QUARTZ["Quartz<br/><i>Convertit le Markdown<br/>en site HTML/CSS</i>"]
        QUARTZ --> FTP["FTP Deploy<br/><i>Envoie le site compilé<br/>vers l'hébergeur</i>"]
    end

    FTP --> INFOMANIAK["Infomaniak<br/><i>Hébergement web</i>"]
    INFOMANIAK --> LIVE["colabia.ch<br/><i>Site en ligne</i>"]

    classDef source fill:#059669,stroke:#047857,color:#fff
    classDef github fill:#1f2937,stroke:#374151,color:#fff
    classDef build fill:#2563eb,stroke:#1d4ed8,color:#fff
    classDef hosting fill:#dc2626,stroke:#b91c1c,color:#fff
    classDef live fill:#6366f1,stroke:#4f46e5,color:#fff

    class MD source
    class GITHUB github
    class QUARTZ,FTP build
    class INFOMANIAK hosting
    class LIVE live

En résumé : on écrit en Markdown dans Obsidian, on pousse sur Git, Quartz génère le HTML, le FTP envoie sur Infomaniak, le site est à jour.

Quartz : le générateur de site

Quartz est un générateur de site statique conçu pour transformer un vault Obsidian en site web. Il comprend nativement la syntaxe Obsidian : wiki-links, callouts, Mermaid, backlinks, graphe de relations.

Ce que Quartz génère automatiquement à partir du Markdown :

  • Pages HTML avec navigation, recherche et mode sombre
  • Sitemap XML et flux RSS
  • Images Open Graph pour le partage social
  • Liens retour (backlinks) entre les pages

GitHub Actions : le pipeline automatique

À chaque git push sur la branche main, GitHub Actions exécute automatiquement :

  1. Checkout du dépôt complet (avec l’historique Git pour afficher les dates)
  2. Build Quartz qui compile le Markdown en HTML/CSS
  3. Déploiement FTP vers l’hébergeur Infomaniak

Le site est mis à jour en quelques minutes, sans aucune action manuelle.

Stack technique

ComposantOutilRôle
ÉditeurObsidianRédaction Markdown + gestion du vault
Syncobsidian-gitCommits automatiques depuis Obsidian
VersionnageGit + GitHubHistorique, collaboration et déclencheur CI/CD
GénérateurQuartz v4Markdown + Obsidian → site statique
CI/CDGitHub ActionsBuild automatique + déploiement
DéploiementFTP-Deploy-ActionUpload FTPS vers l’hébergeur
HébergementInfomaniakServeur web mutualisé (Suisse)
AnalyticsPlausibleMesure d’audience respectueuse de la vie privée

Reproduire ce workflow

Ce setup est entièrement reproductible. Voici les grandes étapes.

Prérequis

  1. Obsidian avec le plugin obsidian-git
  2. Node.js (v22 ou supérieur)
  3. Un dépôt GitHub avec Actions activées
  4. Un hébergement web avec accès FTP ou FTPS

Mise en place

# 1. Créer le vault Obsidian et initialiser Git
mkdir mon-vault && cd mon-vault
git init
 
# 2. Structurer les dossiers
mkdir -p public _private
 
# 3. Installer Quartz dans un sous-dossier
git clone https://github.com/jackyzha0/quartz.git _quartz
cd _quartz && npm install && cd ..
 
# 4. Configurer quartz.config.ts
#    - Pointer le contenu vers ../public
#    - Définir le domaine dans baseUrl
#    - Exclure .obsidian, _quartz, _private des patterns ignorés
 
# 5. Créer le workflow GitHub Actions (.github/workflows/deploy.yml)
#    - Checkout avec fetch-depth: 0
#    - npm install + quartz build
#    - FTP deploy vers votre hébergeur
 
# 6. Configurer les secrets GitHub
#    - FTP_HOST, FTP_USER, FTP_PASS
 
# 7. Premier déploiement
git add . && git commit -m "initial setup" && git push

Points d’attention

  • fetch-depth: 0 dans le checkout GitHub Actions est essentiel si vous affichez des dates basées sur l’historique Git (par exemple, “dernière mise à jour” dans le footer)
  • Séparation par dossier : Quartz ne compile que le dossier que vous lui indiquez (public/). Les contenus privés ne sont jamais exposés, sans avoir besoin de filtre
  • Fichiers HTML autonomes (comme des slides interactifs) ne sont pas compilés par Quartz comme du Markdown — ils nécessitent un traitement spécifique dans le pipeline CI/CD
  • .htaccess : si votre hébergeur utilise Apache, ajoutez des règles de réécriture pour servir des URLs propres sans extension .html

Publié par Damian — 2026-04-30 Tags : workflow, obsidian, quartz, guide

Vue Graphique

Liens retour