Automatisez les mises à jour de contenu et la publication avec GitHub Actions et le SDK OptimoCMS. Du staging à la production en un seul push.

Pipeline CI/CD avec GitHub Actions

Name: OptimoCMS SDK
Author: OptimoCMS

Automatisez votre workflow OptimoCMS avec GitHub Actions. Poussez les modifications de contenu vers un dépôt et laissez le pipeline mettre à jour et publier automatiquement votre site.

Dans ce tutoriel :

Configurer un workflow GitHub Actions
Mettre à jour le contenu via le SDK en CI
Flux staging (sandbox) → production
Publication automatique lors du merge vers main

Prérequis

Dépôt GitHub avec votre contenu/configuration
Clé API OptimoCMS (stockée comme GitHub Secret)
Optionnel : un site sandbox pour le staging

Étape 1 — Configurer les GitHub Secrets

Allez dans votre dépôt → Settings → Secrets and variables → Actions et ajoutez :

Secret	Valeur
`OPTIMOCMS_API_KEY`	Votre clé API de production
`OPTIMOCMS_SITE_ID`	L'ID de votre site de production
`OPTIMOCMS_SANDBOX_KEY`	(optionnel) Clé API sandbox pour le staging
`OPTIMOCMS_SANDBOX_SITE_ID`	(optionnel) ID du site sandbox

Étape 2 — Contenu comme code

Structurez votre contenu dans le dépôt :

content/
├── pages/
│   ├── home.json
│   ├── about.json
│   └── menu.json
├── design-tokens.json
└── navigation.json

Exemple content/pages/home.json :

{
  "title": "Accueil",
  "slug": "home",
  "blocks": [
    {
      "type": "Hero",
      "props": {
        "title": "Bienvenue dans notre restaurant",
        "subtitle": "La meilleure cuisine italienne depuis 1985",
        "ctaText": "Réserver",
        "ctaLink": "/reservation"
      }
    }
  ]
}

Étape 3 — Script de déploiement

Créez un scripts/deploy.ts qui pousse le contenu vers OptimoCMS :

import { OptimoCMS } from '@optimocms/sdk';
import { readFileSync, readdirSync } from 'node:fs';
import { join } from 'node:path';

const client = new OptimoCMS({
  apiKey: process.env.OPTIMOCMS_API_KEY!,
});

const siteId = process.env.OPTIMOCMS_SITE_ID!;

async function deployPages(): Promise<void> {
  const pagesDir = join(process.cwd(), 'content', 'pages');
  const files = readdirSync(pagesDir).filter(f => f.endsWith('.json'));

  console.log(`Déploiement de ${files.length} pages...`);

  for (const file of files) {
    const content = JSON.parse(readFileSync(join(pagesDir, file), 'utf-8'));

    const existing = await client.pages.list(siteId, { status: 'published' });
    const existingPage = existing.data.find(p => p.slug === content.slug);

    if (existingPage) {
      await client.pages.update(siteId, existingPage.id, {
        title: content.title,
        blocks: content.blocks,
      });
      console.log(`  ✓ Mis à jour : ${content.title}`);
    } else {
      await client.pages.create(siteId, {
        title: content.title,
        slug: content.slug,
        status: 'published',
        blocks: content.blocks,
      });
      console.log(`  ✓ Créé : ${content.title}`);
    }
  }
}

async function main(): Promise<void> {
  console.log('🚀 Déploiement OptimoCMS démarré\n');
  await deployPages();

  const result = await client.sites.publish(siteId);
  console.log(`\n✓ Site publié (${result.status})`);
}

main().catch(error => {
  console.error('Déploiement échoué :', error.message);
  process.exit(1);
});

Étape 4 — Workflow GitHub Actions

Créez .github/workflows/deploy-content.yml :

name: Deploy Content to OptimoCMS

on:
  push:
    branches: [main]
    paths:
      - 'content/**'
  workflow_dispatch:

jobs:
  deploy-production:
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - name: Deploy to Production
        env:
          OPTIMOCMS_API_KEY: ${{ secrets.OPTIMOCMS_API_KEY }}
          OPTIMOCMS_SITE_ID: ${{ secrets.OPTIMOCMS_SITE_ID }}
        run: npx tsx scripts/deploy.ts

Aperçu du workflow

Branche feature        PR                    Branche main
     │                  │                        │
     │  push content/   │                        │
     ├─────────────────►│  deploy to sandbox     │
     │                  ├───────────────────►     │
     │                  │  lien preview dans PR   │
     │                  │                        │
     │                  │  merge PR              │
     │                  ├───────────────────────►│
     │                  │                        │  deploy to production
     │                  │                        ├───────────────────►

Prochaines étapes

Automatisation multi-sites — Le même pipeline pour plusieurs sites
Sync webhook — Recevoir des notifications lors de la publication
Gestion des erreurs SDK — Gestion robuste des erreurs en CI

Pipeline CI/CD

On this page