import { PackageManagers } from 'starlight-package-managers' import TursoCLI from '/components/TursoCLI.astro'; import { Aside, Steps, Tabs, TabItem, LinkCard, Badge } from '@astrojs/starlight/components'; import ReadMore from '/components/ReadMore.astro'; import { sponsors, SponsorLink } from '~/share-link'

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

4a. Ejecuta el comando show para ver información sobre la base de datos recién creada:

4b. Copia el valor de la URL y establece el valor para CMS_LIBSQL_URL. bash title=".env" CMS_LIBSQL_URL=libsql://studiocms-yourname.turso.io

5. Obtén y establece CMS_LIBSQL_AUTH_TOKEN

   5a. Crea un nuevo token para autenticar solicitudes a la base de datos:

   5b. Copia la salida del comando y establece el valor para CMS_LIBSQL_AUTH_TOKEN.

   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][self-hosted-libsql], o un servicio de base de datos gestionado como [Turso][turso-sponsor-link].

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!

<Steps>

1. 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:

        <PackageManagers type="create" pkg="studiocms@latest" />

    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.

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

   ```ts title="astro.config.mjs" {2-3,8,10}
   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(),
       ],
   });
   ```

</Steps>

<Steps>

1. Crear un nuevo proyecto Astro

    Para crear un nuevo proyecto Astro, simplemente ejecuta el siguiente comando en tu terminal:

        <PackageManagers type="create" pkg="astro@latest" />

    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. 

    ```bash
    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.

2. Para agregar la integración StudioCMS a tu proyecto, necesitarás instalar el paquete StudioCMS y sus dependencias:

   <PackageManagers type="exec" pkg="astro" args="add node studiocms" />

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

   ```ts title="astro.config.mjs" {2-3,8,10}
   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(),
       ],
   });
   ```

</Steps>

<Steps>

1. Crear un nuevo proyecto Astro

    Para crear un nuevo proyecto Astro, simplemente ejecuta el siguiente comando en tu terminal:

        <PackageManagers type="create" pkg="astro@latest" />

    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. 

    ```bash
    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.

2. Para agregar la integración StudioCMS a tu proyecto, necesitarás instalar el paquete Astro StudioCMS y sus dependencias:

   <PackageManagers pkg="@astrojs/node studiocms" />

3. Actualiza tu archivo `astro.config.mjs`:

   ```ts title="astro.config.mjs" {2-3,8,10}
   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(),
       ],
   });
   ```

</Steps>

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/)

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.

import { defineStudioCMSConfig } from 'studiocms/config';
// ---cut---
export default defineStudioCMSConfig({
  db: {
    dialect: 'postgres', // 'libsql' | 'postgres' | 'mysql'
  },
})

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

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 { defineStudioCMSConfig } from 'studiocms/config';
import html from '@studiocms/html';
import md from '@studiocms/md';

export default defineStudioCMSConfig({
    plugins: [
        html(),
        md(),
    ],
});

Para más información sobre los plugins de renderizado disponibles, consulta [Catálogo de Paquetes][package-catalog]

La autenticación incorporada de StudioCMS requiere al menos la [Clave de Encriptación][encryption-key] 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.

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][package-catalog]

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.

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

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

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.

1. Instala el plugin @studiocms/s3-storage:

2. 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(),
   });

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

   El Gestor de Almacenamiento S3 de StudioCMS está construido usando el paquete `@aws-sdk/client-s3`, que soporta cualquier proveedor de almacenamiento compatible con S3, incluyendo AWS S3, DigitalOcean Spaces, MinIO, y otros.

   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

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",
    }
}

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.

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

<PackageManagers type="run" args="studiocms migrate --latest" />
<PackageManagers type="run" args="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

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

<PackageManagers type="run" args="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.

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][package-catalog].

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:

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

import { defineStudioCMSConfig } from 'studiocms/config';
import blog from '@studiocms/blog';

export default defineStudioCMSConfig({
    dbStartPage: false,
    plugins: [
        blog(),
    ],
});

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.

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.)

{/* Links */} [package-catalog]: /es/package-catalog/ [environment-variables]: /es/start-here/environment-variables/ [config-reference]: /es/config-reference/ [encryption-key]: /es/start-here/environment-variables/#clave-de-encriptación-para-studiocms [self-hosted-libsql]: /es/guides/database/sqld-server/ [turso-sponsor-link]: https://tur.so/studiocms