Comienza aquí

Comencemos

Para empezar a usar StudioCMS, necesitarás:

Un proyecto de Astro
Un proveedor libSQL o un servidor libSQL autoalojado
La integración StudioCMS

Preparar tu base de datos

StudioCMS usa @astrojs/db para conectarse a tu base de datos libSQL. Puedes usar cualquier proveedor libSQL o un servidor libSQL autoalojado.

Si estás usando la CLI de StudioCMS, puedes omitir este paso y usar la CLI para crear una nueva base de datos si tienes la CLI de Turso instalada.

Para más información sobre las variables de entorno requeridas, consulta URL de la base de datos y token para @astrojs/db

Empezando con Turso

Instala la CLI de Turso ^
Inicia sesión o regístrate ^ en Turso.
Crea una nueva base de datos.
Ventana de terminal
```
turso db create studiocms
```
Obtén y configura ASTRO_DB_REMOTE_URL

4a. Ejecuta el comando show para ver información sobre la base de datos recién creada:
Ventana de terminal
```
turso db show studiocms
```
4b. Copia el valor de la URL y configúralo como el valor de ASTRO_DB_REMOTE_URL.
.env
```
ASTRO_DB_REMOTE_URL=libsql://studiocms-tunombre.turso.io
```
Obtén y configura ASTRO_DB_APP_TOKEN

5a. Crea un nuevo token para autenticar las solicitudes a la base de datos:
Ventana de terminal
```
turso db tokens create studiocms
```
5b. Copia la salida del comando y configúrala como el valor de ASTRO_DB_APP_TOKEN.
.env
```
ASTRO_DB_APP_TOKEN=eyJhbGciOiJF...3ahJpTkKDw
```

¡Ahora estás listo para continuar con la configuración de tu proyecto StudioCMS!

Usando otro proveedor o libSQL autoalojado

libSQL admite tanto HTTP como WebSockets como protocolo de transporte para un servidor remoto. También admite el uso de un archivo local o una base de datos en memoria.

Para más información sobre las variables de entorno requeridas, consulta URL de la base de datos y token para @astrojs/db

Para más información sobre todas las opciones potenciales de libSQL (incluidos los archivos locales), consulta Astro Docs: Remote URL configuration options^

Creando un proyecto StudioCMS

Creando un proyecto StudioCMS usando el comando create

Para crear un nuevo proyecto Astro con StudioCMS usando una de nuestras plantillas predefinidas, simplemente ejecuta el siguiente comando en tu terminal:
- npm
- pnpm
- yarn
Ventana de terminal
npm create studiocms@latest
Ventana de terminal
pnpm create studiocms@latest
Ventana de terminal
yarn create studiocms
Después de ejecutar el comando, se te pedirá que respondas algunas preguntas sobre tu proyecto. Una vez completado, la CLI creará un nuevo proyecto Astro con StudioCMS en el directorio especificado.

Luego, se te pedirá que sigas los siguientes pasos, que incluyen asegurarte de que tus variables de entorno estén configuradas correctamente y ejecutar el proyecto para completar la configuración.

Después de ejecutar la CLI, asegúrate de que tu archivo astro.config.mjs esté configurado correctamente:

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?: {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
                nodes ...
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?: {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
                nodes ...
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(),
    ],
});

Creando un nuevo proyecto Astro

Para crear un nuevo proyecto Astro, simplemente ejecuta el siguiente comando en tu terminal:
- npm
- pnpm
- yarn
Ventana de terminal
npm create astro@latest
Ventana de terminal
pnpm create astro@latest
Ventana de terminal
yarn create astro
Después de ejecutar el comando, se te pedirá que respondas algunas preguntas sobre tu proyecto. Una vez completado, la CLI creará un nuevo proyecto Astro en el directorio especificado.

Deberías ver un mensaje de “Liftoff confirmed. Explore your project!” seguido de algunos pasos recomendados.

cd en tu nuevo directorio de proyecto para comenzar a usar Astro.
Ventana de terminal
```
cd my-project
```
Si omitiste el paso de instalación de npm durante el asistente de la CLI, asegúrate de instalar tus dependencias antes de continuar.
Para agregar la integración StudioCMS a tu proyecto, necesitarás instalar el paquete StudioCMS y sus dependencias:
- npm
- pnpm
- yarn
Ventana de terminal
npx astro add db node studiocms
Ventana de terminal
pnpm astro add db node studiocms
Ventana de terminal
yarn astro add db node studiocms

Después de instalar el paquete, asegúrate de que tu archivo astro.config.mjs esté importando y llamando correctamente a la integración:

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?: {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
                nodes ...
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?: {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
                nodes ...
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(),
    ],
});

Creando un nuevo proyecto Astro

Para crear un nuevo proyecto Astro, simplemente ejecuta el siguiente comando en tu terminal:
- npm
- pnpm
- yarn
Ventana de terminal
npm create astro@latest
Ventana de terminal
pnpm create astro@latest
Ventana de terminal
yarn create astro
Después de ejecutar el comando, se te pedirá que respondas algunas preguntas sobre tu proyecto. Una vez completado, la CLI creará un nuevo proyecto Astro en el directorio especificado.

Deberías ver un mensaje de “Liftoff confirmed. Explore your project!” seguido de algunos pasos recomendados.

cd en tu nuevo directorio de proyecto para comenzar a usar Astro.
Ventana de terminal
```
cd my-project
```
Si omitiste el paso de instalación de npm durante el asistente de la CLI, asegúrate de instalar tus dependencias antes de continuar.
Para agregar la integración StudioCMS a tu proyecto, necesitarás instalar el paquete Astro StudioCMS y sus dependencias:
- npm
- pnpm
- yarn
Ventana de terminal
npm i @astrojs/db @astrojs/node studiocms
Ventana de terminal
pnpm add @astrojs/db @astrojs/node studiocms
Ventana de terminal
yarn add @astrojs/db @astrojs/node studiocms

Actualiza tu archivo 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?: {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
                nodes ...
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?: {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
                nodes ...
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(),
    ],
});

Ten en cuenta que la opción site en el archivo astro.config.mjs es necesaria para que StudioCMS funcione correctamente. Puedes configurarla con la URL de tu sitio o una URL de marcador de posición. (es decir, https://demo.studiocms.xyz/ o http://localhost:4321/)

Configurar autenticación

StudioCMS Auth requiere al menos la Clave de Cifrado para ser configurada en tu archivo .env.

Las siguientes variables de entorno son necesarias para la autenticación de StudioCMS:

# clave de cifrado para la autenticación de nombre de usuario y contraseña
CMS_ENCRYPTION_KEY="wqR+w...sRcg=="

Puedes generar una clave de cifrado segura usando el siguiente comando:

openssl rand --base64 16

Y configurar la salida como el valor de CMS_ENCRYPTION_KEY.

Para más información sobre todas las variables de entorno disponibles para la autenticación, consulta la página de Variables de entorno.

Opcional: Configurar autenticación oAuth

StudioCMS admite autenticación oAuth con GitHub, Discord, Google y Auth0. Para configurar la autenticación oAuth, necesitarás configurar las variables de entorno requeridas en tu archivo .env, y asegurarte de que el proveedor esté habilitado en tu configuración.

Para configurar los proveedores oAuth, requieren una URL de callback. La URL de callback es la ruta donde el proveedor redirigirá al usuario después de la autenticación.

Configurando la URL de callback

La URL de callback debe configurarse en una de las siguientes rutas según tu entorno:

Entorno	URL de Callback
Producción	`https://tu-dominio.tld/studiocms_api/auth/<provider>/callback`
Pruebas & Dev	`http://localhost:4321/studiocms_api/auth/<provider>/callback`

Ejemplos de rutas de URL de callback

Las siguientes rutas son ejemplos de la URL de callback para cada proveedor:

Proveedor	PATH de Callback
GitHub	`/studiocms_api/auth/github/callback`
Discord	`/studiocms_api/auth/discord/callback`
Google	`/studiocms_api/auth/google/callback`
Auth0	`/studiocms_api/auth/auth0/callback`

Configurar los scripts de tu `package.json`

Configura los scripts de tu package.json para incluir la bandera --remote para build, y opcionalmente para dev. (También puedes ejecutar el comando dev como se muestra en la sección “Ejecutando tu proyecto StudioCMS”)

{
    "name": "my-studiocms-project",
    "scripts": {
        "dev": "astro dev --remote",
        "build": "astro check & astro build --remote",
        "astro": "astro"
    }
}

Ejecutando tu proyecto StudioCMS

Gracias al poder de Astro, ejecutar StudioCMS es tan fácil como ejecutar el comando dev para la vista previa local, o construir y desplegar en tu servidor. Para lo básico de cómo usarlo localmente sin construir, esto es lo que necesitas hacer.

Configuración inicial (o durante actualizaciones si se actualiza el esquema de tablas)

Para iniciar tu proyecto Astro, ejecuta los siguientes comandos en tu 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

Después de ejecutar los comandos, deberías ver un mensaje indicando que tu proyecto está ejecutándose en localhost:4321. Al configurar StudioCMS por primera vez, se te pedirá que termines de configurar StudioCMS en http://localhost:4321/start

Ejecutando en modo de desarrollo de Astro localmente

Para iniciar tu proyecto Astro, ejecuta el siguiente comando en tu terminal:

npm run dev --remote

pnpm run dev --remote

yarn run dev --remote

Después de ejecutar el comando, deberías ver un mensaje indicando que tu proyecto está ejecutándose en localhost:4321. Abre tu navegador y navega a http://localhost:4321 para ver tu proyecto Astro en acción.

¡Felicidades! 🥳 Ahora tienes StudioCMS instalado en tu proyecto Astro.

Agregando un frontend a tu proyecto StudioCMS

StudioCMS es un CMS sin cabeza de Astro, lo que significa que debes proporcionar tu propio frontend para mostrar el contenido. Si estás buscando un frontend ya construido, puedes consultar nuestros plugins en el Catálogo de Paquetes.

Configurar un blog

Si estás buscando configurar un blog, puedes usar el plugin @studiocms/blog para comenzar.

Para instalar y configurar el plugin de blog, ejecuta el siguiente comando en tu terminal:

npm install @studiocms/blog

pnpm install @studiocms/blog

yarn install @studiocms/blog

Después de instalar el plugin, necesitarás agregar el plugin a tu archivo studiocms.config.mjs:

import { 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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): {
    dbStartPage?: boolean | undefined;
    rendererConfig?: {
        studiocms?: false | {
            callouts?: false | {
                theme?: "github" | "obsidian" | "vitepress" | undefined;
            } | undefined;
            autoLinkHeadings?: boolean | undefined;
            discordSubtext?: boolean | undefined;
            sanitize?: {
                allowElements?: string[] | undefined;
                blockElements?: string[] | undefined;
                dropElements?: string[] | undefined;
                allowAttributes?: Record<string, string[]> | undefined;
                dropAttributes?: Record<string, string[]> | undefined;
                allowComponents?: boolean | undefined;
                allowCustomElements?: boolean | undefined;
                allowComments?: boolean | undefined;
            } | undefined;
        } | undefined;
        renderer?: "studiocms" | CustomRenderer | "astro" | "markdoc" | "mdx" | undefined;
        markdocConfig?: {
            renderType?: "html" | MarkdocRenderer | "react-static" | undefined;
            argParse?: {
                file?: string | undefined;
                slots?: boolean | undefined;
                location?: boolean | undefined;
            } | undefined;
            transformConfig?: {
                tags?: Record<string, {}> | undefined;
                validation?: {
                    parents?: any[] | undefined;
                    validateFunctions?: boolean | undefined;
                    environment?: string | undefined;
                } | undefined;
...
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(),
    ],
});

Construyendo y desplegando tu proyecto StudioCMS

Después de ejecutar los pasos de configuración inicial, deberías construir y desplegar tu proyecto StudioCMS en tu servidor.

Por defecto, el panel de control de StudioCMS está disponible en http://tu-dominio.tld/dashboard.

Este panel de control estará disponible para que administres tu contenido y configuraciones en modo de desarrollo y en modo de producción.

Se recomienda usar StudioCMS solo en modo de producción, ya que el panel de control está destinado a ser utilizado por el proyecto construido. (Puedes ver algunos problemas/errores en modo de desarrollo, como un error de dependencia de Vite.)

Próximos pasos

Consulta cómo configurar Variables de Entorno en StudioCMS.

Consulta el Catálogo de Paquetes para encontrar y usar plugins con StudioCMS.

Aprende más sobre las opciones de configuración de StudioCMS usando las páginas de Referencia de StudioCMS.