Comienza aquí

Actualizar StudioCMS a la última versión ¿Quieres actualizar a la última versión? ¡Aquí tienes!

Vamos a empezar

Para empezar a usar StudioCMS, necesitarás:

Una versión de Node.js soportada por Astro^ (Bun y Deno no son soportados)
Un proyecto Astro
Una conexión a la base de datos (libSQL, MySQL, o PostgreSQL)
La integración StudioCMS

Prepara tu base de datos

Instala el Turso CLI ^
Iniciar sesión o registrarse ^ en Turso.
Crea una nueva base de datos.
Ventana de terminal
```
turso db create studiocms
```
Obtén y establece CMS_LIBSQL_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 establece el valor para CMS_LIBSQL_URL.
.env
```
CMS_LIBSQL_URL=libsql://studiocms-yourname.turso.io
```
Obtén y establece CMS_LIBSQL_AUTH_TOKEN

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

Asegúrate de tener una base de datos libSQL configurada y en funcionamiento. Puedes usar una instalación local, un contenedor Docker, o un servicio de base de datos gestionado como Turso^.

CMS_LIBSQL_URL=libsql://tu-base-de-datos.turso.io
CMS_LIBSQL_AUTH_TOKEN=<token-de-autenticación> (opcional)

Para más información sobre las variables de entorno requeridas, consulta Variables de entorno requeridas para libSQL

Asegúrate de tener una base de datos MySQL configurada y en funcionamiento. Puedes usar una instalación local, un contenedor Docker o un servicio de base de datos gestionado.

CMS_MYSQL_DATABASE=<nombre-de-tu-base-de-datos>
CMS_MYSQL_USER=<usuario-de-tu-base-de-datos>
CMS_MYSQL_PASSWORD=<contraseña-de-tu-base-de-datos>
CMS_MYSQL_HOST=<host-de-tu-base-de-datos>
CMS_MYSQL_PORT=<port-de-tu-base-de-datos>

Para más información sobre las variables de entorno requeridas, consulta Variables de entorno requeridas para MySQL

Asegúrate de tener una base de datos PostgreSQL configurada y en funcionamiento. Puedes usar una instalación local, un contenedor Docker o un servicio de base de datos gestionado.

CMS_PG_DATABASE=<nombre-de-tu-base-de-datos>
CMS_PG_USER=<usuario-de-tu-base-de-datos>
CMS_PG_PASSWORD=<contraseña-de-tu-base-de-datos>
CMS_PG_HOST=<host-de-tu-base-de-datos>
CMS_PG_PORT=<puerto-de-tu-base-de-datos>

Para más información sobre las variables de entorno requeridas, consulta Variables de entorno requeridas para PostgreSQL

¡Estás ahora listo para pasar a crear tu proyecto StudioCMS!

Crear un proyecto StudioCMS

Crear un proyecto de StudioCMS usando el comando create

Para crear un nuevo proyecto Astro con StudioCMS usando uno de nuestros templates pre-hechos, 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 a algunas preguntas sobre tu proyecto. Una vez completado, el CLI creará un nuevo proyecto Astro con StudioCMS en el directorio especificado.

Posteriormente, 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 el CLI, asegúrate de que tu archivo astro.config.mjs está correctamente configurado:

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
import studioCMS from 'studiocms';

export default defineConfig({
    site: 'https://demo.studiocms.dev/',
    output: 'server',
    adapter: node({ mode: "standalone" }),
    integrations: [
        studioCMS(),
    ],
});

Crear 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 a algunas preguntas sobre tu proyecto. Una vez completado, el CLI creará un nuevo proyecto Astro en el directorio especificado.

Deberías ver un mensaje “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 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 node studiocms
Ventana de terminal
pnpm astro add node studiocms
Ventana de terminal
yarn astro add node studiocms

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

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
import studioCMS from 'studiocms';

export default defineConfig({
    site: 'https://demo.studiocms.dev/',
    output: 'server',
    adapter: node({ mode: "standalone" }),
    integrations: [
        studioCMS(),
    ],
});

Crear 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 a algunas preguntas sobre tu proyecto. Una vez completado, el CLI creará un nuevo proyecto Astro en el directorio especificado.

Deberías ver un mensaje “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 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/node studiocms
Ventana de terminal
pnpm add @astrojs/node studiocms
Ventana de terminal
yarn add @astrojs/node studiocms

Actualiza tu archivo astro.config.mjs:

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
import studioCMS from 'studiocms';

export default defineConfig({
    site: 'https://demo.studiocms.dev/',
    output: 'server',
    adapter: node({ mode: "standalone" }),
    integrations: [
        studioCMS(),
    ],
});

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

Configurar el dialecto de la base de datos de StudioCMS Añadido en beta.31

Si estás usando una base de datos diferente a libSQL, necesitarás configurar la opción db en tu archivo studiocms.config.mjs para especificar el dialecto correcto.

export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    readonly dbStartPage?: boolean | undefined;
    readonly verbose?: boolean | undefined;
    readonly logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    readonly db?: {
        readonly dialect?: "libsql" | "postgres" | "mysql" | undefined;
    } | undefined;
    readonly plugins?: {
        readonly identifier: string;
        readonly name: string;
        readonly studiocmsMinimumVersion?: string | undefined;
        readonly requires?: readonly string[] | undefined;
        readonly hooks: {
            "studiocms:astro-config"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => void) | undefined;
            "studiocms:auth"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => void) | undefined;
            "studiocms:dashboard"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setDashboard: (args: {
                    translations: {
                        [x: string]: {
                            [x: string]: {
                                [x: string]: string;
                            };
                        };
                    };
                    dashboardGridItems?: readonly {
                        readonly name: string;
                        readonly span: 1 | 2 | 3;
                        readonly variant: "default" | "filled";
                        readonly requiresPermission?: "owner" | "admin" | "editor" | "visitor" | undefined;
                        readonly header?: {
                            readonly title: string;
                            readonly icon?: "heroicons:academic-cap" | "heroicons:academic-cap-16-solid" | "heroicons:academic-cap-20-solid" | "heroicons:academic-cap-solid" | "heroicons:adjustments-horizontal" | "heroicons:adjustments-horizontal-16-solid" | "heroicons:adjustments-horizontal-20-solid" | "heroicons:adjustments-horizontal-solid" | "heroicons:adjustments-vertical" | "heroicons:adjustments-vertical-16-solid" | "heroicons:adjustments-vertical-20-solid" | "heroicons:adjustments-vertical-solid" | "heroicons:archive-box" | "heroicons:archive-box-16-solid" | "heroicons:archive-box-20-solid" | "heroicons:archive-box-arrow-down" | "heroicons:archive-box-arrow-down-16-solid" | "heroicons:archive-box-arrow-down-20-solid" | "heroicons:archive-box-arrow-down-solid" | "heroicons:archive-box-solid" | "heroicons:archive-box-x-mark" | "heroicons:archive-box-x-mark-16-solid" | "heroicons:archive-box-x-mark-20-solid" | "heroicons:archive-box-x-mark-solid" | "heroicons:arrow-down" | "heroicons:arrow-down-16-solid" | "heroicons:arrow-down-20-solid" | "heroicons:arrow-down-circle" | "heroicons:arrow-down-circle-16-solid" | "heroicons:arrow-down-circle-20-solid" | "heroicons:arrow-down-circle-solid" | "heroicons:arrow-down-left" | "heroicons:arrow-down-left-16-solid" | "heroicons:arrow-down-left-20-solid" | "heroicons:arrow-down-left-solid" | "heroicons:arrow-down-on-square" | "heroicons:arrow-down-on-square-16-solid" | "heroicons:arrow-down-on-square-20-solid" | "heroicons:arrow-down-on-square-solid" | "heroicons:arrow-down-on-square-stack" | "heroicons:arrow-down-on-square-stack-16-solid" | "heroicons:arrow-down-on-square-stack-20-solid" | "heroicons:arrow-down-on-square-stack-solid" | "heroicons:arrow-down-right" | "heroicons:arrow-down-right-16-solid" | "heroicons:arrow-down-right-20-solid" | "heroicons:arrow-down-right-solid" | "heroicons:arrow-down-solid" | "heroicons:arrow-down-tray" | "heroicons:arrow-down-tray-16-solid" | "heroicons:arrow-down-tray-20-solid" | "heroicons:arrow-down-tray-solid" ...
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/config';

export default defineStudioCMSConfig({
 dbStartPage: true,
 // ...Other Options
})
defineStudioCMSConfig({
  
db?: {
    readonly dialect?: "libsql" | "postgres" | "mysql" | undefined;
} | undefined
db: {
    
dialect?: "libsql" | "postgres" | "mysql" | undefined
dialect: 'postgres', // 'libsql' | 'postgres' | 'mysql'
  },
})

Asegurar que los paquetes de cliente de base de datos están instalados

También necesitarás instalar los paquetes de cliente de base de datos necesarios para el dialecto de base de datos que has elegido:

npm i @libsql/client kysely-turso

pnpm add @libsql/client kysely-turso

yarn add @libsql/client kysely-turso

npm i mysql2

pnpm add mysql2

yarn add mysql2

npm i pg

pnpm add pg

yarn add pg

Configurar el renderizado de StudioCMS Añadido en beta.22

StudioCMS requiere al menos uno de los siguientes plugins de renderizado para ser instalado y configurado dentro de tu proyecto StudioCMS:

@studiocms/html - para renderizado HTML
@studiocms/md - para renderizado Markdown
@studiocms/mdx - para renderizado MDX
@studiocms/markdoc - para renderizado MarkDoc
@studiocms/wysiwyg - para renderizado WYSIWYG
O cualquier otro plugin de la comunidad que soporte el renderizado de contenido en StudioCMS.

Cualquiera de estos plugins puede ser usado para renderizar contenido en StudioCMS. Puedes usar uno o más de estos plugins en tu proyecto, dependiendo de tus necesidades. Pueden ser instalados y configurados usando el archivo de configuración de StudioCMS.

import { 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    readonly dbStartPage?: boolean | undefined;
    readonly verbose?: boolean | undefined;
    readonly logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    readonly db?: {
        readonly dialect?: "libsql" | "postgres" | "mysql" | undefined;
    } | undefined;
    readonly plugins?: {
        readonly identifier: string;
        readonly name: string;
        readonly studiocmsMinimumVersion?: string | undefined;
        readonly requires?: readonly string[] | undefined;
        readonly hooks: {
            "studiocms:astro-config"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => void) | undefined;
            "studiocms:auth"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => void) | undefined;
            "studiocms:dashboard"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setDashboard: (args: {
                    translations: {
                        [x: string]: {
                            [x: string]: {
                                [x: string]: string;
                            };
                        };
                    };
                    dashboardGridItems?: readonly {
                        readonly name: string;
                        readonly span: 1 | 2 | 3;
                        readonly variant: "default" | "filled";
                        readonly requiresPermission?: "owner" | "admin" | "editor" | "visitor" | undefined;
                        readonly header?: {
                            readonly title: string;
                            readonly icon?: "heroicons:academic-cap" | "heroicons:academic-cap-16-solid" | "heroicons:academic-cap-20-solid" | "heroicons:academic-cap-solid" | "heroicons:adjustments-horizontal" | "heroicons:adjustments-horizontal-16-solid" | "heroicons:adjustments-horizontal-20-solid" | "heroicons:adjustments-horizontal-solid" | "heroicons:adjustments-vertical" | "heroicons:adjustments-vertical-16-solid" | "heroicons:adjustments-vertical-20-solid" | "heroicons:adjustments-vertical-solid" | "heroicons:archive-box" | "heroicons:archive-box-16-solid" | "heroicons:archive-box-20-solid" | "heroicons:archive-box-arrow-down" | "heroicons:archive-box-arrow-down-16-solid" | "heroicons:archive-box-arrow-down-20-solid" | "heroicons:archive-box-arrow-down-solid" | "heroicons:archive-box-solid" | "heroicons:archive-box-x-mark" | "heroicons:archive-box-x-mark-16-solid" | "heroicons:archive-box-x-mark-20-solid" | "heroicons:archive-box-x-mark-solid" | "heroicons:arrow-down" | "heroicons:arrow-down-16-solid" | "heroicons:arrow-down-20-solid" | "heroicons:arrow-down-circle" | "heroicons:arrow-down-circle-16-solid" | "heroicons:arrow-down-circle-20-solid" | "heroicons:arrow-down-circle-solid" | "heroicons:arrow-down-left" | "heroicons:arrow-down-left-16-solid" | "heroicons:arrow-down-left-20-solid" | "heroicons:arrow-down-left-solid" | "heroicons:arrow-down-on-square" | "heroicons:arrow-down-on-square-16-solid" | "heroicons:arrow-down-on-square-20-solid" | "heroicons:arrow-down-on-square-solid" | "heroicons:arrow-down-on-square-stack" | "heroicons:arrow-down-on-square-stack-16-solid" | "heroicons:arrow-down-on-square-stack-20-solid" | "heroicons:arrow-down-on-square-stack-solid" | "heroicons:arrow-down-right" | "heroicons:arrow-down-right-16-solid" | "heroicons:arrow-down-right-20-solid" | "heroicons:arrow-down-right-solid" | "heroicons:arrow-down-solid" | "heroicons:arrow-down-tray" | "heroicons:arrow-down-tray-16-solid" | "heroicons:arrow-down-tray-20-solid" | "heroicons:arrow-down-tray-solid" ...
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/config';

export default defineStudioCMSConfig({
 dbStartPage: true,
 // ...Other Options
})
defineStudioCMSConfig } from 'studiocms/config';
import 
function html(options?: HTMLSchemaOptions): StudioCMSPluginDef
Creates the StudioCMS HTML plugin.
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.
html from '@studiocms/html';
import 
function md(options?: MarkdownSchemaOptions): StudioCMSPluginDef
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.
@example 
import { studiocmsMD } from '@studiocms/md';
const plugin = studiocmsMD({ flavor: 'studiocms', callouts: 'obsidian' });
md from '@studiocms/md';

export default 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    readonly dbStartPage?: boolean | undefined;
    readonly verbose?: boolean | undefined;
    readonly logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    readonly db?: {
        readonly dialect?: "libsql" | "postgres" | "mysql" | undefined;
    } | undefined;
    readonly plugins?: {
        readonly identifier: string;
        readonly name: string;
        readonly studiocmsMinimumVersion?: string | undefined;
        readonly requires?: readonly string[] | undefined;
        readonly hooks: {
            "studiocms:astro-config"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => void) | undefined;
            "studiocms:auth"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => void) | undefined;
            "studiocms:dashboard"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setDashboard: (args: {
                    translations: {
                        [x: string]: {
                            [x: string]: {
                                [x: string]: string;
                            };
                        };
                    };
                    dashboardGridItems?: readonly {
                        readonly name: string;
                        readonly span: 1 | 2 | 3;
                        readonly variant: "default" | "filled";
                        readonly requiresPermission?: "owner" | "admin" | "editor" | "visitor" | undefined;
                        readonly header?: {
                            readonly title: string;
                            readonly icon?: "heroicons:academic-cap" | "heroicons:academic-cap-16-solid" | "heroicons:academic-cap-20-solid" | "heroicons:academic-cap-solid" | "heroicons:adjustments-horizontal" | "heroicons:adjustments-horizontal-16-solid" | "heroicons:adjustments-horizontal-20-solid" | "heroicons:adjustments-horizontal-solid" | "heroicons:adjustments-vertical" | "heroicons:adjustments-vertical-16-solid" | "heroicons:adjustments-vertical-20-solid" | "heroicons:adjustments-vertical-solid" | "heroicons:archive-box" | "heroicons:archive-box-16-solid" | "heroicons:archive-box-20-solid" | "heroicons:archive-box-arrow-down" | "heroicons:archive-box-arrow-down-16-solid" | "heroicons:archive-box-arrow-down-20-solid" | "heroicons:archive-box-arrow-down-solid" | "heroicons:archive-box-solid" | "heroicons:archive-box-x-mark" | "heroicons:archive-box-x-mark-16-solid" | "heroicons:archive-box-x-mark-20-solid" | "heroicons:archive-box-x-mark-solid" | "heroicons:arrow-down" | "heroicons:arrow-down-16-solid" | "heroicons:arrow-down-20-solid" | "heroicons:arrow-down-circle" | "heroicons:arrow-down-circle-16-solid" | "heroicons:arrow-down-circle-20-solid" | "heroicons:arrow-down-circle-solid" | "heroicons:arrow-down-left" | "heroicons:arrow-down-left-16-solid" | "heroicons:arrow-down-left-20-solid" | "heroicons:arrow-down-left-solid" | "heroicons:arrow-down-on-square" | "heroicons:arrow-down-on-square-16-solid" | "heroicons:arrow-down-on-square-20-solid" | "heroicons:arrow-down-on-square-solid" | "heroicons:arrow-down-on-square-stack" | "heroicons:arrow-down-on-square-stack-16-solid" | "heroicons:arrow-down-on-square-stack-20-solid" | "heroicons:arrow-down-on-square-stack-solid" | "heroicons:arrow-down-right" | "heroicons:arrow-down-right-16-solid" | "heroicons:arrow-down-right-20-solid" | "heroicons:arrow-down-right-solid" | "heroicons:arrow-down-solid" | "heroicons:arrow-down-tray" | "heroicons:arrow-down-tray-16-solid" | "heroicons:arrow-down-tray-20-solid" | "heroicons:arrow-down-tray-solid" ...
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/config';

export default defineStudioCMSConfig({
 dbStartPage: true,
 // ...Other Options
})
defineStudioCMSConfig({
    
plugins?: {
    readonly identifier: string;
    readonly name: string;
    readonly studiocmsMinimumVersion?: string | undefined | undefined;
    readonly requires?: readonly string[] | undefined;
    readonly hooks: {
        "studiocms:astro-config"?: ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
        }) => Promise<void>) | ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
        }) => void) | undefined;
        "studiocms:auth"?: ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly setAuthService: (args: {
                oAuthProvider: {
                    readonly name: string;
                    readonly formattedName: string;
                    readonly svg: string;
                    readonly endpointPath: string;
                    readonly requiredEnvVariables?: readonly string[] | undefined;
                };
            }) => Promise<void>;
        }) => Promise<void>) | ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly setAuthService: (args: {
                oAuthProvider: {
                    readonly name: string;
                    readonly formattedName: string;
                    readonly svg: string;
                    readonly endpointPath: string;
                    readonly requiredEnvVariables?: readonly string[] | undefined;
                };
            }) => Promise<void>;
        }) => void) | undefined;
        "studiocms:dashboard"?: ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly setDashboard: (args: {
                translations: {
                    [x: string]: {
                        [x: string]: {
                            [x: string]: string;
                        };
                    };
                };
                dashboardGridItems?: readonly {
                    readonly name: string;
                    readonly span: 1 | 2 | 3;
                    readonly variant: "default" | "filled";
                    readonly requiresPermission?: "owner" | "admin" | "editor" | "visitor" | undefined;
                    readonly header?: {
                        readonly title: string;
                        readonly icon?: "heroicons:academic-cap" | "heroicons:academic-cap-16-solid" | "heroicons:academic-cap-20-solid" | "heroicons:academic-cap-solid" | "heroicons:adjustments-horizontal" | "heroicons:adjustments-horizontal-16-solid" | "heroicons:adjustments-horizontal-20-solid" | "heroicons:adjustments-horizontal-solid" | "heroicons:adjustments-vertical" | "heroicons:adjustments-vertical-16-solid" | "heroicons:adjustments-vertical-20-solid" | "heroicons:adjustments-vertical-solid" | "heroicons:archive-box" | "heroicons:archive-box-16-solid" | "heroicons:archive-box-20-solid" | "heroicons:archive-box-arrow-down" | "heroicons:archive-box-arrow-down-16-solid" | "heroicons:archive-box-arrow-down-20-solid" | "heroicons:archive-box-arrow-down-solid" | "heroicons:archive-box-solid" | "heroicons:archive-box-x-mark" | "heroicons:archive-box-x-mark-16-solid" | "heroicons:archive-box-x-mark-20-solid" | "heroicons:archive-box-x-mark-solid" | "heroicons:arrow-down" | "heroicons:arrow-down-16-solid" | "heroicons:arrow-down-20-solid" | "heroicons:arrow-down-circle" | "heroicons:arrow-down-circle-16-solid" | "heroicons:arrow-down-circle-20-solid" | "heroicons:arrow-down-circle-solid" | "heroicons:arrow-down-left" | "heroicons:arrow-down-left-16-solid" | "heroicons:arrow-down-left-20-solid" | "heroicons:arrow-down-left-solid" | "heroicons:arrow-down-on-square" | "heroicons:arrow-down-on-square-16-solid" | "heroicons:arrow-down-on-square-20-solid" | "heroicons:arrow-down-on-square-solid" | "heroicons:arrow-down-on-square-stack" | "heroicons:arrow-down-on-square-stack-16-solid" | "heroicons:arrow-down-on-square-stack-20-solid" | "heroicons:arrow-down-on-square-stack-solid" | "heroicons:arrow-down-right" | "heroicons:arrow-down-right-16-solid" | "heroicons:arrow-down-right-20-solid" | "heroicons:arrow-down-right-solid" | "heroicons:arrow-down-solid" | "heroicons:arrow-down-tray" | "heroicons:arrow-down-tray-16-solid" | "heroicons:arrow-down-tray-20-solid" | "heroicons:arrow-down-tray-solid" | "heroicons:arrow-left" | "heroicons:arrow-left-16-solid" | "heroicons:arrow-left-20-solid" | "heroicons:arrow-left-circle" | "heroicons:arrow-left-circle-16-solid" | "heroicons:arrow-left-circle-20-solid" | "heroicons:arrow-left-circle-solid" | "heroicons:arrow-left-end-on-rectangle" | "heroicons:arrow-left-end-on-rectangle-16-solid" | "heroicons:arrow-left-end-on-rectangle-20-solid" | "heroicons:arrow-left-end-on-rectangle-solid" | "heroicons:arrow-left-on-rectangle" | "heroicons:arrow-left-on-rectangle-20-solid" | "heroicons:arrow-left-on-rectangle-solid" ...
plugins: [
        
function html(options?: HTMLSchemaOptions): StudioCMSPluginDef
Creates the StudioCMS HTML plugin.
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.
html(),
        
function md(options?: MarkdownSchemaOptions): StudioCMSPluginDef
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.
@example 
import { studiocmsMD } from '@studiocms/md';
const plugin = studiocmsMD({ flavor: 'studiocms', callouts: 'obsidian' });
md(),
    ],
});

Para más información sobre los plugins de renderizado disponibles, consulta Catálogo de Paquetes

Configurar la autenticación

La autenticación incorporada de StudioCMS requiere al menos la Clave de Encriptación para ser establecida en tu archivo .env.

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

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

Puedes generar una clave de encriptación segura usando el siguiente comando:

openssl rand --base64 16

Y establece la salida como el valor para CMS_ENCRYPTION_KEY.

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

Opcional: Configurar la autenticación oAuth Versión beta revisada.23

StudioCMS soporta varios proveedores de autenticación oAuth, utilizando nuestro sistema de plugins para habilitar los proveedores que quieres usar. Para empezar, necesitarás encontrar un plugin para el proveedor que quieres usar, o crear tu propio plugin.

Para más información sobre los plugins de autenticación oAuth disponibles, consulta Catálogo de Paquetes

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

Configurando la URL de devolución de llamada

La URL de devolución de llamada debe ser establecida en uno de los siguientes paths basado en tu entorno:

Entorno	URL de devolución de llamada
Production	`https://your-domain.tld/studiocms_api/auth/<provider>/callback`
Testing & Dev	`http://localhost:4321/studiocms_api/auth/<provider>/callback`

Ejemplos de paths de URL de devolución de llamada

Los siguientes paths son ejemplos de la URL de devolución de llamada para cada proveedor:

Proveedor	PATH de devolución de llamada
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 el Gestor de API de Almacenamiento (opcional) Añadido en v0.1.0

StudioCMS soporta el uso de diferentes Gestionadores de API de Almacenamiento para manejar el almacenamiento de archivos y imágenes. Por defecto, StudioCMS usa un gestor de almacenamiento incorporado que no almacena ningún archivo o imagen.

Para configurar un diferente Gestor de API de Almacenamiento, necesitarás instalar el plugin adecuado y configurarlo en tu archivo studiocms.config.mjs.

Para más información sobre la API de Almacenamiento, consulta la Documentación de la API de Almacenamiento

Para más información sobre los plugins de gestión de almacenamiento disponibles, consulta el Catálogo de Paquetes.

Ejemplo: Configurar el Gestor de Almacenamiento S3

Instala el plugin @studiocms/s3-storage:
- npm
- pnpm
- yarn
Ventana de terminal
npm i @studiocms/s3-storage
Ventana de terminal
pnpm add @studiocms/s3-storage
Ventana de terminal
yarn add @studiocms/s3-storage

Actualiza tu archivo studiocms.config.mjs para usar el Gestor de Almacenamiento S3:

import { defineStudioCMSConfig } from 'studiocms/config';
import s3Storage from '@studiocms/s3-storage';

export default defineStudioCMSConfig({
   storageManager: s3Storage(),
});

Establece las variables de entorno requeridas para el Gestor de Almacenamiento S3 en tu archivo .env:

CMS_S3_PROVIDER=ProveedorS3Ejemplo
CMS_S3_ACCESS_KEY_ID=<id-de-acceso-de-tu-clave>
CMS_S3_SECRET_ACCESS_KEY=<contraseña-de-acceso-secreta>
CMS_S3_BUCKET_NAME=<nombre-del-bucket>
# CMS_S3_ENDPOINT= # Opcional: Especifica un endpoint personalizado si es requerido por tu proveedor
# CMS_S3_REGION= # Opcional: Especifica la región si es requerido por tu proveedor
# CMS_S3_FORCE_PATH_STYLE= # Opcional: Usar URLs de estilo de ruta para objetos S3
# CMS_S3_PUBLIC_ENDPOINT= # Opcional: Endpoint público personalizado para acceder a los archivos

Para más información sobre las variables de entorno con el Gestor de Almacenamiento S3, consulta Almacenamiento S3: Variables de entorno

Configurar tus scripts de `package.json`

Configura tus scripts de package.json para incluir los siguientes comandos de StudioCMS para un uso más fácil:

{
    "name": "mi-proyecto-studiocms",
    "scripts": {
        "dev": "astro dev",
        "build": "astro check & astro build",
        "astro": "astro",
        "migrate": "studiocms migrate",
        "studiocms": "studiocms",
    }
}

Ejecutar tu proyecto StudioCMS

Gracias al poder de Astro, ejecutar StudioCMS es tan fácil como ejecutar el comando dev para una vista previa local, o construir y desplegar a tu servidor. Para las bases de cómo usarlo localmente sin construir, aquí es lo que necesitas hacer.

Primera configuración (o durante actualizaciones si el esquema de tablas es actualizado)

Para iniciar tu proyecto Astro, ejecuta los siguientes comandos en tu terminal:

npm run studiocms migrate --latest

pnpm run studiocms migrate --latest

yarn run studiocms migrate --latest

npm run dev

pnpm run dev

yarn run dev

Después de ejecutar los comandos, deberías ver un mensaje indicando que tu proyecto está ejecutándose en localhost:4321. Cuando estés configurando StudioCMS por primera vez, se te pedirá que completes la configuración de StudioCMS en http://localhost:4321/start

Ejecutando en modo de desarrollo Astro localmente

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

npm run dev

pnpm run dev

yarn run dev

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.

Puedes acceder al panel de control de StudioCMS en http://localhost:4321/dashboard por defecto para gestionar tu contenido y configuraciones.

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

Añadir un frontend a tu proyecto StudioCMS

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

Configurar un blog

Por ejemplo, si quieres construir un blog usando StudioCMS, puedes usar el plugin @studiocms/blog para empezar rápidamente sin tener que construir todo desde cero. Este plugin proporciona un frontend de blog simple que elimina la necesidad de tener ningún archivo fuente para tus páginas de frontend.

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 añadir el plugin a tu archivo studiocms.config.mjs:

import { 
function defineStudioCMSConfig(config: StudioCMSOptions): {
    readonly dbStartPage?: boolean | undefined;
    readonly verbose?: boolean | undefined;
    readonly logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    readonly db?: {
        readonly dialect?: "libsql" | "postgres" | "mysql" | undefined;
    } | undefined;
    readonly plugins?: {
        readonly identifier: string;
        readonly name: string;
        readonly studiocmsMinimumVersion?: string | undefined;
        readonly requires?: readonly string[] | undefined;
        readonly hooks: {
            "studiocms:astro-config"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => void) | undefined;
            "studiocms:auth"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => void) | undefined;
            "studiocms:dashboard"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setDashboard: (args: {
                    translations: {
                        [x: string]: {
                            [x: string]: {
                                [x: string]: string;
                            };
                        };
                    };
                    dashboardGridItems?: readonly {
                        readonly name: string;
                        readonly span: 1 | 2 | 3;
                        readonly variant: "default" | "filled";
                        readonly requiresPermission?: "owner" | "admin" | "editor" | "visitor" | undefined;
                        readonly header?: {
                            readonly title: string;
                            readonly icon?: "heroicons:academic-cap" | "heroicons:academic-cap-16-solid" | "heroicons:academic-cap-20-solid" | "heroicons:academic-cap-solid" | "heroicons:adjustments-horizontal" | "heroicons:adjustments-horizontal-16-solid" | "heroicons:adjustments-horizontal-20-solid" | "heroicons:adjustments-horizontal-solid" | "heroicons:adjustments-vertical" | "heroicons:adjustments-vertical-16-solid" | "heroicons:adjustments-vertical-20-solid" | "heroicons:adjustments-vertical-solid" | "heroicons:archive-box" | "heroicons:archive-box-16-solid" | "heroicons:archive-box-20-solid" | "heroicons:archive-box-arrow-down" | "heroicons:archive-box-arrow-down-16-solid" | "heroicons:archive-box-arrow-down-20-solid" | "heroicons:archive-box-arrow-down-solid" | "heroicons:archive-box-solid" | "heroicons:archive-box-x-mark" | "heroicons:archive-box-x-mark-16-solid" | "heroicons:archive-box-x-mark-20-solid" | "heroicons:archive-box-x-mark-solid" | "heroicons:arrow-down" | "heroicons:arrow-down-16-solid" | "heroicons:arrow-down-20-solid" | "heroicons:arrow-down-circle" | "heroicons:arrow-down-circle-16-solid" | "heroicons:arrow-down-circle-20-solid" | "heroicons:arrow-down-circle-solid" | "heroicons:arrow-down-left" | "heroicons:arrow-down-left-16-solid" | "heroicons:arrow-down-left-20-solid" | "heroicons:arrow-down-left-solid" | "heroicons:arrow-down-on-square" | "heroicons:arrow-down-on-square-16-solid" | "heroicons:arrow-down-on-square-20-solid" | "heroicons:arrow-down-on-square-solid" | "heroicons:arrow-down-on-square-stack" | "heroicons:arrow-down-on-square-stack-16-solid" | "heroicons:arrow-down-on-square-stack-20-solid" | "heroicons:arrow-down-on-square-stack-solid" | "heroicons:arrow-down-right" | "heroicons:arrow-down-right-16-solid" | "heroicons:arrow-down-right-20-solid" | "heroicons:arrow-down-right-solid" | "heroicons:arrow-down-solid" | "heroicons:arrow-down-tray" | "heroicons:arrow-down-tray-16-solid" | "heroicons:arrow-down-tray-20-solid" | "heroicons:arrow-down-tray-solid" ...
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/config';

export default defineStudioCMSConfig({
 dbStartPage: true,
 // ...Other Options
})
defineStudioCMSConfig } from 'studiocms/config';
import 
function blog(options?: StudioCMSBlogOptions): StudioCMSPluginDef
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): {
    readonly dbStartPage?: boolean | undefined;
    readonly verbose?: boolean | undefined;
    readonly logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
    readonly db?: {
        readonly dialect?: "libsql" | "postgres" | "mysql" | undefined;
    } | undefined;
    readonly plugins?: {
        readonly identifier: string;
        readonly name: string;
        readonly studiocmsMinimumVersion?: string | undefined;
        readonly requires?: readonly string[] | undefined;
        readonly hooks: {
            "studiocms:astro-config"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
            }) => void) | undefined;
            "studiocms:auth"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => Promise<void>) | ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setAuthService: (args: {
                    oAuthProvider: {
                        readonly name: string;
                        readonly formattedName: string;
                        readonly svg: string;
                        readonly endpointPath: string;
                        readonly requiredEnvVariables?: readonly string[] | undefined;
                    };
                }) => Promise<void>;
            }) => void) | undefined;
            "studiocms:dashboard"?: ((args: {
                readonly logger: AstroIntegrationLogger;
                readonly setDashboard: (args: {
                    translations: {
                        [x: string]: {
                            [x: string]: {
                                [x: string]: string;
                            };
                        };
                    };
                    dashboardGridItems?: readonly {
                        readonly name: string;
                        readonly span: 1 | 2 | 3;
                        readonly variant: "default" | "filled";
                        readonly requiresPermission?: "owner" | "admin" | "editor" | "visitor" | undefined;
                        readonly header?: {
                            readonly title: string;
                            readonly icon?: "heroicons:academic-cap" | "heroicons:academic-cap-16-solid" | "heroicons:academic-cap-20-solid" | "heroicons:academic-cap-solid" | "heroicons:adjustments-horizontal" | "heroicons:adjustments-horizontal-16-solid" | "heroicons:adjustments-horizontal-20-solid" | "heroicons:adjustments-horizontal-solid" | "heroicons:adjustments-vertical" | "heroicons:adjustments-vertical-16-solid" | "heroicons:adjustments-vertical-20-solid" | "heroicons:adjustments-vertical-solid" | "heroicons:archive-box" | "heroicons:archive-box-16-solid" | "heroicons:archive-box-20-solid" | "heroicons:archive-box-arrow-down" | "heroicons:archive-box-arrow-down-16-solid" | "heroicons:archive-box-arrow-down-20-solid" | "heroicons:archive-box-arrow-down-solid" | "heroicons:archive-box-solid" | "heroicons:archive-box-x-mark" | "heroicons:archive-box-x-mark-16-solid" | "heroicons:archive-box-x-mark-20-solid" | "heroicons:archive-box-x-mark-solid" | "heroicons:arrow-down" | "heroicons:arrow-down-16-solid" | "heroicons:arrow-down-20-solid" | "heroicons:arrow-down-circle" | "heroicons:arrow-down-circle-16-solid" | "heroicons:arrow-down-circle-20-solid" | "heroicons:arrow-down-circle-solid" | "heroicons:arrow-down-left" | "heroicons:arrow-down-left-16-solid" | "heroicons:arrow-down-left-20-solid" | "heroicons:arrow-down-left-solid" | "heroicons:arrow-down-on-square" | "heroicons:arrow-down-on-square-16-solid" | "heroicons:arrow-down-on-square-20-solid" | "heroicons:arrow-down-on-square-solid" | "heroicons:arrow-down-on-square-stack" | "heroicons:arrow-down-on-square-stack-16-solid" | "heroicons:arrow-down-on-square-stack-20-solid" | "heroicons:arrow-down-on-square-stack-solid" | "heroicons:arrow-down-right" | "heroicons:arrow-down-right-16-solid" | "heroicons:arrow-down-right-20-solid" | "heroicons:arrow-down-right-solid" | "heroicons:arrow-down-solid" | "heroicons:arrow-down-tray" | "heroicons:arrow-down-tray-16-solid" | "heroicons:arrow-down-tray-20-solid" | "heroicons:arrow-down-tray-solid" ...
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/config';

export default defineStudioCMSConfig({
 dbStartPage: true,
 // ...Other Options
})
defineStudioCMSConfig({
    
dbStartPage?: boolean | undefined
dbStartPage: false,
    
plugins?: {
    readonly identifier: string;
    readonly name: string;
    readonly studiocmsMinimumVersion?: string | undefined | undefined;
    readonly requires?: readonly string[] | undefined;
    readonly hooks: {
        "studiocms:astro-config"?: ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
        }) => Promise<void>) | ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly addIntegrations: (args: AstroIntegration | AstroIntegration[]) => Promise<void>;
        }) => void) | undefined;
        "studiocms:auth"?: ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly setAuthService: (args: {
                oAuthProvider: {
                    readonly name: string;
                    readonly formattedName: string;
                    readonly svg: string;
                    readonly endpointPath: string;
                    readonly requiredEnvVariables?: readonly string[] | undefined;
                };
            }) => Promise<void>;
        }) => Promise<void>) | ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly setAuthService: (args: {
                oAuthProvider: {
                    readonly name: string;
                    readonly formattedName: string;
                    readonly svg: string;
                    readonly endpointPath: string;
                    readonly requiredEnvVariables?: readonly string[] | undefined;
                };
            }) => Promise<void>;
        }) => void) | undefined;
        "studiocms:dashboard"?: ((args: {
            readonly logger: AstroIntegrationLogger;
            readonly setDashboard: (args: {
                translations: {
                    [x: string]: {
                        [x: string]: {
                            [x: string]: string;
                        };
                    };
                };
                dashboardGridItems?: readonly {
                    readonly name: string;
                    readonly span: 1 | 2 | 3;
                    readonly variant: "default" | "filled";
                    readonly requiresPermission?: "owner" | "admin" | "editor" | "visitor" | undefined;
                    readonly header?: {
                        readonly title: string;
                        readonly icon?: "heroicons:academic-cap" | "heroicons:academic-cap-16-solid" | "heroicons:academic-cap-20-solid" | "heroicons:academic-cap-solid" | "heroicons:adjustments-horizontal" | "heroicons:adjustments-horizontal-16-solid" | "heroicons:adjustments-horizontal-20-solid" | "heroicons:adjustments-horizontal-solid" | "heroicons:adjustments-vertical" | "heroicons:adjustments-vertical-16-solid" | "heroicons:adjustments-vertical-20-solid" | "heroicons:adjustments-vertical-solid" | "heroicons:archive-box" | "heroicons:archive-box-16-solid" | "heroicons:archive-box-20-solid" | "heroicons:archive-box-arrow-down" | "heroicons:archive-box-arrow-down-16-solid" | "heroicons:archive-box-arrow-down-20-solid" | "heroicons:archive-box-arrow-down-solid" | "heroicons:archive-box-solid" | "heroicons:archive-box-x-mark" | "heroicons:archive-box-x-mark-16-solid" | "heroicons:archive-box-x-mark-20-solid" | "heroicons:archive-box-x-mark-solid" | "heroicons:arrow-down" | "heroicons:arrow-down-16-solid" | "heroicons:arrow-down-20-solid" | "heroicons:arrow-down-circle" | "heroicons:arrow-down-circle-16-solid" | "heroicons:arrow-down-circle-20-solid" | "heroicons:arrow-down-circle-solid" | "heroicons:arrow-down-left" | "heroicons:arrow-down-left-16-solid" | "heroicons:arrow-down-left-20-solid" | "heroicons:arrow-down-left-solid" | "heroicons:arrow-down-on-square" | "heroicons:arrow-down-on-square-16-solid" | "heroicons:arrow-down-on-square-20-solid" | "heroicons:arrow-down-on-square-solid" | "heroicons:arrow-down-on-square-stack" | "heroicons:arrow-down-on-square-stack-16-solid" | "heroicons:arrow-down-on-square-stack-20-solid" | "heroicons:arrow-down-on-square-stack-solid" | "heroicons:arrow-down-right" | "heroicons:arrow-down-right-16-solid" | "heroicons:arrow-down-right-20-solid" | "heroicons:arrow-down-right-solid" | "heroicons:arrow-down-solid" | "heroicons:arrow-down-tray" | "heroicons:arrow-down-tray-16-solid" | "heroicons:arrow-down-tray-20-solid" | "heroicons:arrow-down-tray-solid" | "heroicons:arrow-left" | "heroicons:arrow-left-16-solid" | "heroicons:arrow-left-20-solid" | "heroicons:arrow-left-circle" | "heroicons:arrow-left-circle-16-solid" | "heroicons:arrow-left-circle-20-solid" | "heroicons:arrow-left-circle-solid" | "heroicons:arrow-left-end-on-rectangle" | "heroicons:arrow-left-end-on-rectangle-16-solid" | "heroicons:arrow-left-end-on-rectangle-20-solid" | "heroicons:arrow-left-end-on-rectangle-solid" | "heroicons:arrow-left-on-rectangle" | "heroicons:arrow-left-on-rectangle-20-solid" | "heroicons:arrow-left-on-rectangle-solid" ...
plugins: [
        
function blog(options?: StudioCMSBlogOptions): StudioCMSPluginDef
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(),
    ],
});

Construir un frontend personalizado

Si quieres construir un frontend personalizado para tu proyecto StudioCMS, puedes usar el SDK de StudioCMS o API Rest de StudioCMS para obtener contenido y un plugin de renderizado de StudioCMS para renderizar contenido de StudioCMS en tus páginas personalizadas.

Si quieres construir un frontend personalizado para tu proyecto StudioCMS, puedes usar el componente Renderer y SDK de StudioCMS para renderizar el contenido de StudioCMS en tus páginas personalizadas.

Consulta las Guías de Frontend Personalizado para más guías y tutoriales sobre cómo construir un frontend personalizado con StudioCMS.

Construir y desplegar tu proyecto StudioCMS

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

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

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

Se recomienda usar StudioCMS en modo de producción solo, ya que el panel de control está diseñado para ser usado por el proyecto construido. (Es posible que veas 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 Referencia de StudioCMS.