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.
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.
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 :
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é :
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.
Deploy to your favorite server, serverless, or edge host with build adapters. Import one of our first-party adapters (Cloudflare, Netlify, Node.js, Vercel) or explore community adapters to enable on-demand rendering in your Astro project.
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.
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
cdmon-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 :
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.
Deploy to your favorite server, serverless, or edge host with build adapters. Import one of our first-party adapters (Cloudflare, Netlify, Node.js, Vercel) or explore community adapters to enable on-demand rendering in your Astro project.
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.
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
cdmon-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 :
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.
Deploy to your favorite server, serverless, or edge host with build adapters. Import one of our first-party adapters (Cloudflare, Netlify, Node.js, Vercel) or explore community adapters to enable on-demand rendering in your Astro project.
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.
@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.dev/ ou http://localhost:4321/)
Configurer le rendu de StudioCMS Ajouté dans la beta.22
StudioCMS nécessite qu’au moins l’un des modules d’extension de rendu suivants soit installé et configuré dans votre projet StudioCMS :
@studiocms/html - pour le rendu HTML
@studiocms/md - pour le rendu Markdown
@studiocms/mdx - pour le rendu MDX
@studiocms/markdoc - pour le rendu MarkDoc
Ou tout autre module d’extension communautaire prenant en charge le rendu de contenu dans StudioCMS.
N’importe lequel de ces modules d’extension peut être utilisé pour afficher du contenu dans StudioCMS. Vous pouvez utiliser un ou plusieurs de ces modules d’extension dans votre projet, selon vos besoins. Ils peuvent être installés et configurés via le fichier de configuration de StudioCMS ou celui d’Astro.
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.
This plugin integrates HTML page type support into StudioCMS, providing editor and renderer components.
It resolves configuration options, sets up Astro integrations, and registers the HTML page type for rendering.
@param ― options - Optional configuration for the HTML schema.
@returns ― The StudioCMS plugin configuration object.
Creates a StudioCMS plugin for Markdown page types.
This plugin configures StudioCMS to support Markdown content, including rendering and editing components,
integration with Astro, and optional callout themes. It resolves user-provided options, sets up virtual imports,
and injects necessary styles and scripts for Markdown rendering.
@param ― options - Optional configuration for Markdown schema and rendering behavior.
@returns ― A StudioCMSPlugin instance configured for Markdown support.
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.
This plugin integrates HTML page type support into StudioCMS, providing editor and renderer components.
It resolves configuration options, sets up Astro integrations, and registers the HTML page type for rendering.
@param ― options - Optional configuration for the HTML schema.
@returns ― The StudioCMS plugin configuration object.
Creates a StudioCMS plugin for Markdown page types.
This plugin configures StudioCMS to support Markdown content, including rendering and editing components,
integration with Astro, and optional callout themes. It resolves user-provided options, sets up virtual imports,
and injects necessary styles and scripts for Markdown rendering.
@param ― options - Optional configuration for Markdown schema and rendering behavior.
@returns ― A StudioCMSPlugin instance configured for Markdown support.
StudioCMS prend en charge divers fournisseurs d’authentification oAuth, en utilisant notre système de modules d’extension pour activer les fournisseurs que vous souhaitez utiliser. Pour commencer, vous devrez trouver un module d’extension pour le fournisseur que vous souhaitez utiliser ou créer votre propre module d’extension.
Pour plus d’informations sur les modules d’extension d’authentification oAuth disponibles, consultez le catalogue des paquets
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.
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 »)
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)
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
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.
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.
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.
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.
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.)