Tina CMS & Astro

Tina CMS est un système de gestion de contenu headless soutenu par Git.

Integration avec Astro

Pour commencer, vous aurez besoin d’un projet Astro existant.

Exécutez la commande suivante pour installer Tina dans votre projet Astro.
- npm
- pnpm
- Yarn
Terminal window
npx @tinacms/cli@latest init
Terminal window
pnpm dlx @tinacms/cli@latest init
Terminal window
yarn dlx @tinacms/cli@latest init
- Lorsqu’on vous demande un Cloud ID, appuyez sur Enter pour passer. Vous en générerez un plus tard si vous souhaitez utiliser Tina Cloud.
- A la question “What framework are you using”, choisissez Other.
- Lorsque l’on vous demande où sont stockées les ressources publiques, appuyez sur Enter.
Une fois cette opération terminée, vous devriez avoir un dossier .tina à la racine de votre projet et un fichier hello-world.md généré dans content/posts.

Changez le script dev dans package.json :

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

TinaCMS est maintenant configuré en mode local. Testez-le en lançant le script dev, puis en naviguant vers /admin/index.html#/collections/post.

L’édition du post “Hello, World !” mettra à jour le fichier content/posts/hello-world.md dans le répertoire de votre projet.

Configurez vos collections Tina en éditant la propriété schema.collections dans .tina/config.ts.

Par exemple, vous pouvez ajouter une propriété frontmatter “date posted” à nos posts :

import { defineConfig } from "tinacms";

// Il est probable que votre hébergeur expose cette variable d'environnement
const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

export default defineConfig({
  branch,
  clientId: null, // Obtenir cette information de tina.io
  token: null, // Obtenir cette information de tina.io
  build: {
    outputFolder: "admin",
    publicFolder: "public",
  },
  media: {
    tina: {
      mediaRoot: "images",
      publicFolder: "public",
    },
  },
  schema: {
    collections: [
      {
        name: "posts",
        label: "Posts",
        path: "src/content/posts",
        format: 'mdx',
        fields: [
          {
            type: "string",
            name: "title",
            label: "Title",
            isTitle: true,
            required: true,
          },
          {
            type: "datetime",
            name: "posted",
            label: "Date Posted",
            required: true,
          },
          {
            type: "rich-text",
            name: "body",
            label: "Body",
            isBody: true,
          },
        ],
      },
    ],
  },
});

En savoir plus sur les collections Tina dans la documentation Tina.

En production, TinaCMS peut livrer des changements directement à votre dépôt GitHub. Pour configurer TinaCMS pour la production, vous pouvez choisir d’utiliser Tina Cloud ou d’auto-héberger la couche de données Tina. Vous pouvez en savoir plus sur l’inscription à Tina Cloud dans les Tina Docs.