Mise en route

C’est parti

Pour commencer à utiliser StudioCMS, vous aurez besoin de :

Une version de Node.js prise en charge par Astro^ (Bun et Deno ne sont pas pris en charge)
Un projet Astro
Un fournisseur libSQL ou un serveur libSQL auto-hébergé
L’intégration StudioCMS

Préparer votre base de données

StudioCMS utilise @astrojs/db pour se connecter à votre base de données libSQL. Vous pouvez utiliser n’importe quel fournisseur libSQL ou serveur libSQL auto-hébergé.

Si vous utilisez la CLI de StudioCMS, vous pouvez ignorer cette étape et utiliser l’interface en ligne de commande pour créer une nouvelle base de données si la CLI de Turso est installée.

Pour plus d’informations sur les variables d’environnement requises, consultez URL de la base de données et jeton pour @astrojs/db

Premiers pas avec Turso

Installez la CLI de Turso ^
Connectez-vous ou inscrivez-vous ^ à Turso.
Créez une nouvelle base de données.
Fenêtre de terminal
```
turso db create studiocms
```
Récupérez et définissez ASTRO_DB_REMOTE_URL

4a. Exécutez la commande show pour afficher les informations de la base de données nouvellement créée :
Fenêtre de terminal
```
turso db show studiocms
```
4b. Copiez la valeur de l’URL et utilisez-la comme valeur pour ASTRO_DB_REMOTE_URL.
.env
```
ASTRO_DB_REMOTE_URL=libsql://studiocms-votrenom.turso.io
```
Récupérez et définissez ASTRO_DB_APP_TOKEN

5a. Créez un nouveau jeton pour authentifier les requêtes vers la base de données :
Fenêtre de terminal
```
turso db tokens create studiocms
```
5b. Copiez la sortie de la commande et utilisez-la comme valeur pour ASTRO_DB_APP_TOKEN.
.env
```
ASTRO_DB_APP_TOKEN=eyJhbGciOiJF...3ahJpTkKDw
```

Vous êtes maintenant prêt à passer à la configuration de votre projet StudioCMS !

Utilisation d’un autre fournisseur ou de libSQL auto-hébergé

LibSQL prend en charge HTTP et WebSockets comme protocoles de transport pour un serveur distant. Il prend également en charge l’utilisation d’un fichier local ou d’une base de données en mémoire.

Pour plus d’informations sur les variables d’environnement requises, consultez URL de la base de données et jeton pour @astrojs/db

Pour plus d’informations sur toutes les options potentielles de libSQL (y compris les fichiers locaux), consultez Astro Docs : Options de configuration d’URL distantes^

Création d’un projet StudioCMS

Création d’un projet StudioCMS à l’aide de la commande create

Pour créer un nouveau projet Astro avec StudioCMS en utilisant l’un de nos modèles prédéfinis, exécutez simplement la commande suivante dans votre terminal :
- npm
- pnpm
- yarn
Fenêtre de terminal
npm create studiocms@latest
Fenêtre de terminal
pnpm create studiocms@latest
Fenêtre de terminal
yarn create studiocms
Après avoir exécuté la commande, vous serez invité à répondre à quelques questions sur votre projet. Une fois l’opération terminée, l’interface en ligne de commande créera un nouveau projet Astro avec StudioCMS dans le répertoire spécifié.

Ensuite, vous serez invité à effectuer les étapes suivantes, qui consistent notamment à vous assurer que vos variables d’environnement sont correctement définies et à exécuter le projet pour terminer la configuration.

Après avoir exécuté la CLI, assurez-vous que votre fichier astro.config.mjs est correctement configuré :

import { 
function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never>(config: AstroUserConfig<TLocales, TDriver>): AstroUserConfig<TLocales, TDriver>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig } from 'astro/config';
import 
function db(): AstroIntegration[]
db from '@astrojs/db';
import 
function node(userOptions: UserOptions): AstroIntegration
node from '@astrojs/node';
import 
const studioCMS: (options?: {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string;
                username ...
StudioCMS Integration
A CMS built for Astro by the Astro Community for the Astro Community.
@see ― The GitHub Repo: withstudiocms/studiocms for more information on how to contribute to StudioCMS.
@see ― The StudioCMS Docs for more information on how to use StudioCMS.
studioCMS from 'studiocms';

export default 
defineConfig<never, never>(config: AstroUserConfig<never, never>): AstroUserConfig<never, never>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig({
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.site?: string@name ― site
@type ― {string}
@description 
Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.
{
  site: 'https://www.my-site.dev'
}
site: 'https://demo.studiocms.dev/',
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.output?: "server" | "static"@name ― output
@type ― {('static' | 'server')}
@default ― 'static'
@see ― adapter *
@description 
Specifies the output target for builds.

'static' - Prerender all your pages by default, outputting a completely static site if none of your pages opt out of prerendering.
'server' - Use server-side rendering (SSR) for all pages by default, always outputting a server-rendered site.

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static'
})
output: 'server',
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.adapter?: AstroIntegration@name ― adapter
@see ― output *
@description 
Deploy to your favorite server, serverless, or edge host with build adapters. Import one of our first-party adapters for Netlify, Vercel, and more to engage Astro SSR.
See our On-demand Rendering guide for more on SSR, and our deployment guides for a complete list of hosts.
import netlify from '@astrojs/netlify';
{
  // Example: Build for Netlify serverless deployment
  adapter: netlify(),
}
adapter: 
function node(userOptions: UserOptions): AstroIntegration
node({ 
UserOptions.mode: "standalone" | "middleware"
Specifies the mode that the adapter builds to.

'middleware' - Build to middleware, to be used within another Node.js server, such as Express.
'standalone' - Build to a standalone server. The server starts up just by running the built script.
mode: "standalone" }),
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.integrations?: (false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined)[]@name ― integrations
@description 
Extend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown).
Read our Integrations Guide for help getting started with Astro Integrations.
import react from '@astrojs/react';
import mdx from '@astrojs/mdx';
{
  // Example: Add React + MDX support to Astro
  integrations: [react(), mdx()]
}
integrations: [
        
function db(): AstroIntegration[]
db(),
        
function studioCMS(options?: {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string;
                username ...
StudioCMS Integration
A CMS built for Astro by the Astro Community for the Astro Community.
@see ― The GitHub Repo: withstudiocms/studiocms for more information on how to contribute to StudioCMS.
@see ― The StudioCMS Docs for more information on how to use StudioCMS.
studioCMS(),
    ],
});

Création d’un nouveau projet Astro

Pour créer un nouveau projet Astro, exécutez simplement la commande suivante dans votre terminal :
- npm
- pnpm
- yarn
Fenêtre de terminal
npm create astro@latest
Fenêtre de terminal
pnpm create astro@latest
Fenêtre de terminal
yarn create astro
Après avoir exécuté la commande, vous serez invité à répondre à quelques questions sur votre projet. Une fois l’opération terminée, l’interface en ligne de commande créera un nouveau projet Astro dans le répertoire spécifié.

Vous devriez voir le message « Liftoff confirmed. Explore your project! », suivi des prochaines étapes recommandées.

Déplacez-vous (cd) dans votre nouveau répertoire de projet pour commencer à utiliser Astro.
Fenêtre de terminal
```
cd mon-projet
```
Si vous avez ignoré l’étape d’installation de npm pendant l’assistant CLI, veillez à installer vos dépendances avant de continuer.
Pour ajouter l’intégration StudioCMS à votre projet, vous devrez installer le paquet StudioCMS et ses dépendances :
- npm
- pnpm
- yarn
Fenêtre de terminal
npx astro add db node studiocms
Fenêtre de terminal
pnpm astro add db node studiocms
Fenêtre de terminal
yarn astro add db node studiocms

Après avoir installé le paquet, assurez-vous que votre fichier astro.config.mjs importe et appelle correctement l’intégration :

import { 
function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never>(config: AstroUserConfig<TLocales, TDriver>): AstroUserConfig<TLocales, TDriver>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig } from 'astro/config';
import 
function db(): AstroIntegration[]
db from '@astrojs/db';
import 
function node(userOptions: UserOptions): AstroIntegration
node from '@astrojs/node';
import 
const studioCMS: (options?: {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string;
                username ...
StudioCMS Integration
A CMS built for Astro by the Astro Community for the Astro Community.
@see ― The GitHub Repo: withstudiocms/studiocms for more information on how to contribute to StudioCMS.
@see ― The StudioCMS Docs for more information on how to use StudioCMS.
studioCMS from 'studiocms';

export default 
defineConfig<never, never>(config: AstroUserConfig<never, never>): AstroUserConfig<never, never>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig({
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.site?: string@name ― site
@type ― {string}
@description 
Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.
{
  site: 'https://www.my-site.dev'
}
site: 'https://demo.studiocms.dev/',
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.output?: "server" | "static"@name ― output
@type ― {('static' | 'server')}
@default ― 'static'
@see ― adapter *
@description 
Specifies the output target for builds.

'static' - Prerender all your pages by default, outputting a completely static site if none of your pages opt out of prerendering.
'server' - Use server-side rendering (SSR) for all pages by default, always outputting a server-rendered site.

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static'
})
output: 'server',
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.adapter?: AstroIntegration@name ― adapter
@see ― output *
@description 
Deploy to your favorite server, serverless, or edge host with build adapters. Import one of our first-party adapters for Netlify, Vercel, and more to engage Astro SSR.
See our On-demand Rendering guide for more on SSR, and our deployment guides for a complete list of hosts.
import netlify from '@astrojs/netlify';
{
  // Example: Build for Netlify serverless deployment
  adapter: netlify(),
}
adapter: 
function node(userOptions: UserOptions): AstroIntegration
node({ 
UserOptions.mode: "standalone" | "middleware"
Specifies the mode that the adapter builds to.

'middleware' - Build to middleware, to be used within another Node.js server, such as Express.
'standalone' - Build to a standalone server. The server starts up just by running the built script.
mode: "standalone" }),
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.integrations?: (false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined)[]@name ― integrations
@description 
Extend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown).
Read our Integrations Guide for help getting started with Astro Integrations.
import react from '@astrojs/react';
import mdx from '@astrojs/mdx';
{
  // Example: Add React + MDX support to Astro
  integrations: [react(), mdx()]
}
integrations: [
        
function db(): AstroIntegration[]
db(),
        
function studioCMS(options?: {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string;
                username ...
StudioCMS Integration
A CMS built for Astro by the Astro Community for the Astro Community.
@see ― The GitHub Repo: withstudiocms/studiocms for more information on how to contribute to StudioCMS.
@see ― The StudioCMS Docs for more information on how to use StudioCMS.
studioCMS(),
    ],
});

Création d’un nouveau projet Astro

Pour créer un nouveau projet Astro, exécutez simplement la commande suivante dans votre terminal :
- npm
- pnpm
- yarn
Fenêtre de terminal
npm create astro@latest
Fenêtre de terminal
pnpm create astro@latest
Fenêtre de terminal
yarn create astro
Après avoir exécuté la commande, vous serez invité à répondre à quelques questions sur votre projet. Une fois l’opération terminée, l’interface en ligne de commande créera un nouveau projet Astro dans le répertoire spécifié.

Vous devriez voir le message « Liftoff confirmed. Explore your project! », suivi des prochaines étapes recommandées.

Déplacez-vous (cd) dans votre nouveau répertoire de projet pour commencer à utiliser Astro.
Fenêtre de terminal
```
cd mon-projet
```
Si vous avez ignoré l’étape d’installation de npm pendant l’assistant CLI, veillez à installer vos dépendances avant de continuer.
Pour ajouter l’intégration StudioCMS à votre projet, vous devrez installer le paquet StudioCMS et ses dépendances :
- npm
- pnpm
- yarn
Fenêtre de terminal
npm i @astrojs/db @astrojs/node studiocms
Fenêtre de terminal
pnpm add @astrojs/db @astrojs/node studiocms
Fenêtre de terminal
yarn add @astrojs/db @astrojs/node studiocms

Mettez à jour votre fichier astro.config.mjs :

import { 
function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never>(config: AstroUserConfig<TLocales, TDriver>): AstroUserConfig<TLocales, TDriver>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig } from 'astro/config';
import 
function db(): AstroIntegration[]
db from '@astrojs/db';
import 
function node(userOptions: UserOptions): AstroIntegration
node from '@astrojs/node';
import 
const studioCMS: (options?: {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string;
                username ...
StudioCMS Integration
A CMS built for Astro by the Astro Community for the Astro Community.
@see ― The GitHub Repo: withstudiocms/studiocms for more information on how to contribute to StudioCMS.
@see ― The StudioCMS Docs for more information on how to use StudioCMS.
studioCMS from 'studiocms';

export default 
defineConfig<never, never>(config: AstroUserConfig<never, never>): AstroUserConfig<never, never>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig({
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.site?: string@name ― site
@type ― {string}
@description 
Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.
{
  site: 'https://www.my-site.dev'
}
site: 'https://demo.studiocms.dev/',
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.output?: "server" | "static"@name ― output
@type ― {('static' | 'server')}
@default ― 'static'
@see ― adapter *
@description 
Specifies the output target for builds.

'static' - Prerender all your pages by default, outputting a completely static site if none of your pages opt out of prerendering.
'server' - Use server-side rendering (SSR) for all pages by default, always outputting a server-rendered site.

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static'
})
output: 'server',
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.adapter?: AstroIntegration@name ― adapter
@see ― output *
@description 
Deploy to your favorite server, serverless, or edge host with build adapters. Import one of our first-party adapters for Netlify, Vercel, and more to engage Astro SSR.
See our On-demand Rendering guide for more on SSR, and our deployment guides for a complete list of hosts.
import netlify from '@astrojs/netlify';
{
  // Example: Build for Netlify serverless deployment
  adapter: netlify(),
}
adapter: 
function node(userOptions: UserOptions): AstroIntegration
node({ 
UserOptions.mode: "standalone" | "middleware"
Specifies the mode that the adapter builds to.

'middleware' - Build to middleware, to be used within another Node.js server, such as Express.
'standalone' - Build to a standalone server. The server starts up just by running the built script.
mode: "standalone" }),
    
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.integrations?: (false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined)[]@name ― integrations
@description 
Extend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown).
Read our Integrations Guide for help getting started with Astro Integrations.
import react from '@astrojs/react';
import mdx from '@astrojs/mdx';
{
  // Example: Add React + MDX support to Astro
  integrations: [react(), mdx()]
}
integrations: [
        
function db(): AstroIntegration[]
db(),
        
function studioCMS(options?: {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string;
                username ...
StudioCMS Integration
A CMS built for Astro by the Astro Community for the Astro Community.
@see ― The GitHub Repo: withstudiocms/studiocms for more information on how to contribute to StudioCMS.
@see ― The StudioCMS Docs for more information on how to use StudioCMS.
studioCMS(),
    ],
});

Veuillez noter que l’option site dans le fichier astro.config.mjs est requise pour que StudioCMS fonctionne correctement. Vous pouvez la définir sur l’URL de votre site ou sur une URL temporaire. (c.-à-d. https://demo.studiocms.xyz/ ou http://localhost:4321/)

Configurer l’authentification

StudioCMS Auth nécessite au moins que la clé de chiffrement soit définie dans votre fichier .env.

Les variables d’environnement suivantes sont requises pour l’authentification StudioCMS :

# clé de chiffrement pour l’authentification par nom d’utilisateur et mot de passe
CMS_ENCRYPTION_KEY="wqR+w...sRcg=="

Vous pouvez générer une clé de chiffrement sécurisée à l’aide de la commande suivante :

openssl rand --base64 16

Et utiliser la sortie comme valeur pour CMS_ENCRYPTION_KEY.

Pour plus d’informations sur toutes les variables d’environnement d’authentification disponibles, consultez la page Variables d’environnement.

Facultatif : configurer l’authentification oAuth

StudioCMS prend en charge l’authentification oAuth avec GitHub, Discord, Google et Auth0. Pour configurer l’authentification oAuth, vous devez définir les variables d’environnement requises dans votre fichier .env et vous assurer que le fournisseur est activé dans votre configuration.

Pour configurer les fournisseurs oAuth, une URL de rappel est nécessaire. Cette URL correspond au chemin vers lequel le fournisseur redirigera l’utilisateur après l’authentification.

Configuration de l’URL de rappel

L’URL de rappel doit être définie sur l’un des chemins suivants en fonction de votre environnement :

Environnement	URL de rappel
Production	`https://votre-domaine.tld/studiocms_api/auth/<provider>/callback`
Tests & Dev	`http://localhost:4321/studiocms_api/auth/<provider>/callback`

Exemples de chemins d’URL de rappel

Les chemins suivants sont des exemples d’URL de rappel pour chaque fournisseur :

Fournisseur	Chemin de rappel
GitHub	`/studiocms_api/auth/github/callback`
Discord	`/studiocms_api/auth/discord/callback`
Google	`/studiocms_api/auth/google/callback`
Auth0	`/studiocms_api/auth/auth0/callback`

Configurer les scripts de votre `package.json`

Configurez les scripts de votre package.json pour inclure l’option --remote pour la construction et éventuellement pour le développement. (Vous pouvez également exécuter la commande dev comme indiqué dans la section « Exécution de votre projet StudioCMS »)

{
    "name": "mon-projet-studiocms",
    "scripts": {
        "dev": "astro dev --remote",
        "build": "astro check & astro build --remote",
        "astro": "astro"
    }
}

Exécution de votre projet StudioCMS

Grâce à la puissance d’Astro, exécuter StudioCMS est aussi simple que d’exécuter la commande dev pour obtenir un aperçu local, ou de créer et de déployer sur votre serveur. Pour une utilisation locale de base sans construction, voici ce que vous devez faire.

Première configuration (ou lors des mises à jour si le schéma des tables est mis à jour)

Pour démarrer votre projet Astro, exécutez les commandes suivantes dans votre terminal :

npx astro db push --remote

pnpm astro db push --remote

yarn astro db push --remote

npm run dev --remote

pnpm run dev --remote

yarn run dev --remote

Après avoir exécuté les commandes, un message devrait s’afficher indiquant que votre projet s’exécute sur localhost:4321. Lors de la première configuration de StudioCMS, vous serez invité à terminer la configuration à l’adresse http://localhost:4321/start.

Exécution locale avec le mode développement d’Astro

Pour démarrer votre projet Astro, exécutez la commande suivante dans votre terminal :

npm run dev --remote

pnpm run dev --remote

yarn run dev --remote

Après avoir exécuté la commande, vous devriez voir un message indiquant que votre projet s’exécute sur localhost:4321. Ouvrez votre navigateur et accédez à http://localhost:4321 pour voir votre projet Astro en action.

Félicitations ! 🥳 Vous avez maintenant installé StudioCMS dans votre projet Astro.

Ajouter un frontend à votre projet StudioCMS

StudioCMS est un CMS Astro sans-tête (ou « headless »), ce qui signifie que vous devez fournir votre propre frontend pour afficher le contenu. Si vous recherchez un frontend prêt à l’emploi, vous pouvez consulter nos modules d’extension dans le Catalogue de paquets.

Créer un blog

Si vous souhaitez créer un blog, vous pouvez utiliser le module d’extension @studiocms/blog pour commencer.

Pour installer et configurer le module d’extension de blog, exécutez la commande suivante dans votre terminal :

npm install @studiocms/blog

pnpm install @studiocms/blog

yarn install @studiocms/blog

Après avoir installé le module d’extension, vous devrez l’ajouter dans votre fichier studiocms.config.mjs :

import { 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string ...
A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
@example 
// studiocms.config.mjs
import { defineStudioCMSConfig } from 'studiocms';

export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig } from 'studiocms/config';
import 
function blog(options?: StudioCMSBlogOptions): StudioCMSPlugin
Creates and configures the StudioCMS Blog plugin.
@param ― options - Optional configuration options for the blog plugin.
@returns ― The configured StudioCMS plugin.
@example 
const blogPlugin = studioCMSBlogPlugin({
  blog: {
    title: 'My Blog',
    enableRSS: true,
    route: '/my-blog'
  },
  sitemap: true,
  injectRoutes: true
});
@param ― options.blog - Blog-specific options.
@param ― options.blog.title - The title of the blog. Defaults to 'Blog'.
@param ― options.blog.enableRSS - Whether to enable RSS feed. Defaults to true.
@param ― options.blog.route - The route for the blog. Defaults to '/blog'.
@param ― options.sitemap - Whether to trigger sitemap generation. Defaults to true.
@param ― options.injectRoutes - Whether to inject routes for the blog. Defaults to true.
blog from '@studiocms/blog';

export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string ...
A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
@example 
// studiocms.config.mjs
import { defineStudioCMSConfig } from 'studiocms';

export default defineStudioCMSConfig({
 dbStartPage: true,
 contentRenderer: 'marked',
 verbose: true,
 dateLocale: 'en-us',
 // ...Other Options
})
defineStudioCMSConfig({
    
dbStartPage?: boolean | undefined
dbStartPage: false,
    
plugins?: StudioCMSPlugin[] | undefined
plugins: [
        
function blog(options?: StudioCMSBlogOptions): StudioCMSPlugin
Creates and configures the StudioCMS Blog plugin.
@param ― options - Optional configuration options for the blog plugin.
@returns ― The configured StudioCMS plugin.
@example 
const blogPlugin = studioCMSBlogPlugin({
  blog: {
    title: 'My Blog',
    enableRSS: true,
    route: '/my-blog'
  },
  sitemap: true,
  injectRoutes: true
});
@param ― options.blog - Blog-specific options.
@param ― options.blog.title - The title of the blog. Defaults to 'Blog'.
@param ― options.blog.enableRSS - Whether to enable RSS feed. Defaults to true.
@param ― options.blog.route - The route for the blog. Defaults to '/blog'.
@param ― options.sitemap - Whether to trigger sitemap generation. Defaults to true.
@param ― options.injectRoutes - Whether to inject routes for the blog. Defaults to true.
blog(),
    ],
});

Créer et déployer votre projet StudioCMS

Après avoir effectué les premières étapes de configuration, vous devriez créer et déployer votre projet StudioCMS sur votre serveur.

Par défaut, le tableau de bord de StudioCMS est disponible à l’adresse http://votre-domaine.tld/dashboard.

Ce tableau de bord sera à votre disposition pour gérer votre contenu et vos paramètres en mode développement et en mode production.

Il est recommandé d’utiliser StudioCMS uniquement en mode production, car le tableau de bord est destiné à être utilisé par le projet construit. (Vous pourriez rencontrer des problèmes/erreurs en mode développement, comme une erreur de dépendances provenant de Vite.)

Prochaines étapes

Découvrez comment définir les Variables d’environnement dans StudioCMS.

Consultez le Catalogue de paquets pour rechercher et utiliser des modules d’extension avec StudioCMS.

Apprenez-en plus sur les options de configuration de StudioCMS à l’aide des pages Référence de StudioCMS.