Keystatic & Astro

Keystatic est un système de gestion de contenu open source qui vous permet de structurer votre contenu et de le synchroniser avec GitHub.

Si vous démarrez un nouveau projet Astro + Keystatic à partir de zéro, vous pouvez utiliser le Keystatic CLI pour générer un nouveau projet en quelques secondes :

npm create @keystatic@latest

pnpm create @keystatic@latest

yarn create @keystatic

Sélectionnez le modèle Astro et vous serez prêt à déployer !

Prérequis

Un projet Astro existant avec le rendu côté serveur (SSR) et output : 'hybrid' configuré.

Installer les dépendances

Ajoutez les intégrations Markdoc (pour les entrées de contenu) et React (pour le tableau de bord de l’interface d’administration de Keystatic) à votre projet Astro, en utilisant la commande astro add de votre gestionnaire de paquets.

npx astro add react markdoc

pnpm astro add react markdoc

yarn astro add react markdoc

Vous aurez également besoin de deux paquets Keystatic :

npm install @keystatic/core @keystatic/astro

pnpm add @keystatic/core @keystatic/astro

yarn add @keystatic/core @keystatic/astro

Ajouter l’intégration Astro

Ajoutez l’intégration Astro de @keystatic/astro dans votre fichier de configuration Astro :

import { defineConfig } from 'astro/config'

import react from '@astrojs/react'
import markdoc from '@astrojs/markdoc'
import keystatic from '@keystatic/astro'

// https://astro.build/config
export default defineConfig({
  integrations: [react(), markdoc(), keystatic()],
  output: 'hybrid',
})

Création d’un fichier de configuration Keystatic

Un fichier de configuration Keystatic est nécessaire pour définir votre schéma de contenu. Ce fichier vous permettra également de connecter un projet à un dépôt GitHub spécifique (si vous décidez de le faire).

Créez un fichier appelé keystatic.config.ts à la racine du projet et ajoutez le code suivant pour définir à la fois votre type de stockage (local) et une collection de contenu unique (posts) :

import { config, fields, collection } from '@keystatic/core';

export default config({
  storage: {
    kind: 'local',
  },

  collections: {
    posts: collection({
      label: 'Posts',
      slugField: 'title',
      path: 'src/content/posts/*',
      format: { contentField: 'content' },
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        content: fields.document({
          label: 'Content',
          formatting: true,
          dividers: true,
          links: true,
          images: true,
        }),
      },
    }),
  },
});

Keystatic est maintenant configuré pour gérer votre contenu en fonction de votre schéma.

Exécuter Keystatic localement

Pour lancer le tableau de bord de l’interface d’administration de Keystatic, démarrez le serveur de développement d’Astro :

npm run dev

Visitez http://127.0.0.1:4321/keystatic dans le navigateur pour voir l’interface d’administration de Keystatic fonctionner.

Créer un nouveau message

Dans le tableau de bord de l’interface d’administration Keystatic, cliquez sur la collection “Posts”.
Utilisez le bouton pour créer un nouveau message. Ajoutez le titre ” Mon premier article ” et un peu de contenu, puis enregistrez l’article.
Ce message devrait maintenant être visible dans votre collection ” Posts “. Vous pouvez afficher et modifier vos messages individuels à partir de cette page du tableau de bord.
Retournez voir vos fichiers de projet Astro. Vous trouverez maintenant un nouveau fichier .mdoc dans le répertoire src/content/posts pour ce nouvel article :
- Répertoiresrc/
  - Répertoirecontent/
    Répertoireposts/
    my-first-post.mdoc
Naviguez vers ce fichier dans votre éditeur de code et vérifiez que vous pouvez voir le contenu Markdown que vous avez saisi. Par exemple, il est possible de voir le contenu Markdown que vous avez saisi :
```
---
title: Mon premier billet
---

C'est mon tout premier message. Je suis **super** excitée !
```

Rendu du contenu Keystatic

Utilisez l’API Content Collections d’Astro pour interroger et afficher vos articles et collections, comme vous le feriez dans n’importe quel projet Astro.

Affichage d’une liste de collections

L’exemple suivant affiche une liste des titres de chaque article, avec un lien vers la page de chaque article.

---
import { getCollection } from 'astro:content'

const posts = await getCollection('posts')
---
<ul>
  {posts.map(post => (
    <li>
      <a href={`/posts/${post.slug}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

Affichage d’un seul article

Pour afficher le contenu d’un article individuel, vous pouvez importer et utiliser le composant <Content /> pour rendre votre contenu en HTML :

---
import { getEntry } from 'astro:content'

const post = await getEntry('posts', 'my-first-post')
const { Content } = await post.render()
---

<main>
  <h1>{post.data.title}</h1>
  <Content />
</main>

Pour plus d’informations sur l’interrogation, le filtrage, l’affichage du contenu de vos collections et plus encore, consultez la documentation sur les collections.

Déploiement de Keystatic + Astro

Pour déployer votre site web, consultez nos guides de déploiement et suivez les instructions de votre hébergeur préféré.

Vous voudrez probablement aussi connecter Keystatic à GitHub afin de pouvoir gérer le contenu de l’instance déployée du projet.

Ressources officielles

Consultez le guide officiel de Keystatic
Keystatic starter template