mintlify__docs/es/quickstart.mdx

---
title: "Inicio rápido"
description: "Publica tu sitio de documentación y haz tus primeros cambios."
keywords: ["quickstart","deploy","get started","first steps"]
---

Después de completar esta guía, tendrás un sitio de documentación en línea listo para personalizar y ampliar.

<Info>
  **Requisitos previos**: Antes de comenzar, [crea una cuenta](https://mintlify.com/start) y completa el proceso de configuración inicial.
</Info>

<div id="getting-started">
  ## Primeros pasos
</div>

Después de completar el proceso de configuración inicial, tu sitio de documentación se despliega automáticamente en una URL única con este formato:

```
https://<nombre-de-tu-proyecto>.mintlify.app
```

Encuentra la URL de tu sitio en la página Overview de tu [dashboard](https://dashboard.mintlify.com/).

<Frame>
  <img src="/images/quickstart/mintlify-domain-light.png" alt="Dominio de Mintlify" className="block dark:hidden" />

  <img src="/images/quickstart/mintlify-domain-dark.png" alt="Dominio de Mintlify" className="hidden dark:block" />
</Frame>

La URL de tu sitio está disponible inmediatamente. Usa esta URL para hacer pruebas y compartirla con tu equipo mientras configuras tu sitio de documentación.

<div id="install-the-github-app">
  ### Instala la aplicación de GitHub
</div>

Mintlify proporciona una aplicación de GitHub que automatiza el despliegue cuando haces push de cambios a tu repositorio.

Instala la aplicación de GitHub siguiendo las instrucciones de la lista de verificación de incorporación o desde tu panel.

1. Navega a **Settings** en tu panel de Mintlify.
2. Selecciona **GitHub App** en la barra lateral.
3. Selecciona **Install GitHub App**. Esto abrirá una nueva pestaña con la página de instalación de la aplicación de GitHub.
4. Selecciona la organización o cuenta de usuario donde quieres instalar la aplicación.
5. Selecciona los repositorios que quieres conectar.

<Frame>
  <img src="/images/quickstart/github-app-installation-light.png" alt="Instalación de la aplicación de GitHub" className="block dark:hidden" />

  <img src="/images/quickstart/github-app-installation-dark.png" alt="Instalación de la aplicación de GitHub" className="hidden dark:block" />
</Frame>

<Info>
  Actualiza los permisos de la aplicación de GitHub si mueves tu documentación a otro repositorio.
</Info>

<div id="authorize-your-github-account">
  ### Autoriza tu cuenta de GitHub
</div>

1. Ve a **Settings** en tu Dashboard de Mintlify.
2. Selecciona **My Profile** en la barra lateral.
3. Selecciona **Authorize GitHub account**. Esto abrirá una nueva pestaña con la página de autorización de GitHub.

<Info>
  Es posible que un administrador de tu organización en GitHub deba autorizar tu cuenta, según la configuración de la organización.
</Info>

<div id="editing-workflows">
  ## Flujos de edición
</div>

Mintlify ofrece dos flujos para crear y mantener tu documentación:

<Card title="Flujo basado en código" icon="terminal" horizontal href="#code-based-workflow">
  Para quienes prefieren trabajar con herramientas existentes en su entorno local. Haz clic para ir a esta sección.
</Card>

<Card title="Flujo del editor web" icon="mouse-pointer-2" horizontal href="#web-editor-workflow">
  Para quienes prefieren una interfaz visual en su navegador. Haz clic para ir a esta sección.
</Card>

<div id="code-based-workflow">
  ## Flujo de trabajo basado en código
</div>

El flujo de trabajo basado en código se integra con tu entorno de desarrollo y con los repositorios de Git existentes. Este flujo es ideal para equipos técnicos que desean gestionar la documentación junto con el código.

<div id="install-the-cli">
  ### Instalar la CLI
</div>

<Info>
  **Requisito previo**: La CLI requiere [Node.js](https://nodejs.org/en) v20.17.0 o superior, hasta la v24. Se recomiendan las versiones LTS.
</Info>

Para trabajar localmente con tu documentación, instala la interfaz de línea de comandos (CLI), llamada [mint](https://www.npmjs.com/package/mint), ejecutando el siguiente comando en tu terminal:

<CodeGroup>
  ```bash npm
  npm i -g mint
  ```

  ```bash pnpm
  pnpm add -g mint
  ```
</CodeGroup>

<div id="create-a-new-project">
  ### Crear un proyecto nuevo
</div>

Ejecuta `mint new` para crear un nuevo proyecto de documentación. Consulta la [guía de instalación de la CLI](/es/installation#create-a-new-project) para obtener detalles sobre el comando y sus flags.

### Edita la documentación

Después de configurar tu proyecto, puedes empezar a editar los archivos de la documentación. Por ejemplo, actualiza el title de la página de introducción:

1. Ve a tu repositorio de documentación.
2. Abre `index.mdx` y ubica la parte superior del archivo:

```mdx index.mdx
---
title: "Introducción"
description: "Esta es la introducción a la documentación"
---
```

3. Actualiza el campo `title` a `"Hello World"`.

```mdx index.mdx {2}
---
title: "Hola Mundo"
description: "Esta es la introducción a la documentación"
---
```

<div id="preview-the-changes">
  ### Vista previa de los cambios
</div>

Para ver una vista previa de los cambios en local, ejecuta el siguiente comando:

```bash
mint dev
```

La vista previa está disponible en `localhost:3000`.

<Frame>
  <img src="/images/quickstart/mintlify-dev-light.png" alt="Mintlify Dev" className="block dark:hidden" />

  <img src="/images/quickstart/mintlify-dev-dark.png" alt="Mintlify Dev" className="hidden dark:block" />
</Frame>

<div id="push-the-changes">
  ### Envía los cambios
</div>

Cuando estés listo para publicar tus cambios, envíalos a tu repositorio.

Mintlify detecta automáticamente los cambios, compila tu documentación y despliega las actualizaciones en tu sitio. Supervisa el estado del despliegue en el historial de commits de tu repositorio de GitHub o en el [panel](https://dashboard.mintlify.com).

Después de que se complete el despliegue, tu actualización más reciente estará disponible en `<your-project-name>.mintlify.app`.

<Card title="Saltar a agregar un dominio personalizado" icon="arrow-down" horizontal href="#adding-a-custom-domain">
  Opcionalmente, omite el flujo de trabajo del editor web y pasa directamente a agregar un dominio personalizado.
</Card>

<div id="web-editor-workflow">
  ## Flujo de trabajo del editor web
</div>

El flujo de trabajo del editor web ofrece una interfaz WYSIWYG (what you see is what you get) para crear y editar documentación. Este flujo de trabajo es ideal para quienes prefieren trabajar en su navegador web sin herramientas de desarrollo locales adicionales.

<div id="access-the-web-editor">
  ### Accede al editor web
</div>

1. Inicia sesión en tu [panel de control](https://dashboard.mintlify.com).
2. Selecciona **Editor** en la barra lateral izquierda.

<Info>
  Si no has instalado la aplicación de GitHub, se te pedirá que la instales cuando abras el editor web.
</Info>

<Frame>
  <img alt="El editor web de Mintlify en el modo editor visual" src="/images/quickstart/web-editor-light.png" className="block dark:hidden" />

  <img alt="El editor web de Mintlify en el modo editor visual" src="/images/quickstart/web-editor-dark.png" className="hidden dark:block" />
</Frame>

<div id="edit-the-documentation">
  ### Editar la documentación
</div>

En el editor web, puedes navegar por los archivos de tu documentación desde la barra lateral. Actualicemos la página de introducción:

Busca y selecciona `index.mdx` en el explorador de archivos.

Luego, en el editor, actualiza el campo de título a &quot;Hello World&quot;.

<Frame>
  <img alt="Edición en el editor web" src="/images/quickstart/web-editor-editing-light.png" className="block dark:hidden" />

  <img alt="Edición en el editor web" src="/images/quickstart/web-editor-editing-dark.png" className="hidden dark:block" />
</Frame>

<Tip>
  El editor proporciona un conjunto completo de herramientas de formato y componentes. Escribe <kbd>/</kbd>

  en el editor para abrir el menú de comandos y acceder a estas herramientas.
</Tip>

<div id="publish-your-changes">
  ### Publica tus cambios
</div>

Cuando estés conforme con tus ediciones, selecciona el botón **Publish** en la esquina superior derecha. Tus cambios se despliegan de inmediato en tu sitio de documentación.

<Tip>
  Usa branches para previsualizar y revisar cambios mediante solicitudes de extracción antes de desplegar a tu sitio en producción.
</Tip>

Para más detalles sobre el uso del editor web, incluido el uso de branches y solicitudes de extracción para colaborar y previsualizar cambios, consulta nuestra [documentación del editor web](/es/editor).

<div id="adding-a-custom-domain">
  ## Añadir un dominio personalizado
</div>

Aunque tu subdominio `<your-project-name>.mintlify.app` funciona bien para pruebas y desarrollo, la mayoría de los equipos prefiere usar un dominio personalizado para la documentación en producción.

Para añadir un dominio personalizado, ve a la página de [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) en tu panel de control.

<Frame>
  <img src="/images/quickstart/custom-domain-light.png" alt="Dominio personalizado" className="block dark:hidden" />

  <img src="/images/quickstart/custom-domain-dark.png" alt="Dominio personalizado" className="hidden dark:block" />
</Frame>

Introduce tu dominio (por ejemplo, `docs.yourcompany.com`) y sigue las instrucciones proporcionadas para configurar la DNS con tu proveedor de dominios.

<Table>
  | Tipo de registro | Nombre              | Valor                | TTL  |
  | ---------------- | ------------------- | -------------------- | ---- |
  | CNAME            | docs (o subdominio) | cname.vercel-dns.com | 3600 |
</Table>

<Info>
  Los cambios de DNS pueden tardar hasta 48 horas en propagarse, aunque a menudo se completan mucho antes.
</Info>

<div id="next-steps">
  ## Próximos pasos
</div>

¡Felicidades! Has desplegado correctamente tu sitio de documentación con Mintlify. Estos son algunos próximos pasos sugeridos para mejorar tu documentación:

<Card title="Configura los ajustes globales" icon="settings" horizontal href="es/organize/settings">
  Configura el estilo global del sitio, la navegación, las integraciones y más con el archivo `docs.json`.
</Card>

<Card title="Personaliza tu tema" icon="paintbrush" horizontal href="es/customize/themes">
  Aprende cómo personalizar los colores, las fuentes y la apariencia general de tu sitio de documentación.
</Card>

<Card title="Organiza la navegación" icon="map" horizontal href="es/organize/navigation">
  Estructura tu documentación con una navegación intuitiva para ayudar a los usuarios a encontrar lo que necesitan.
</Card>

<Card title="Añade componentes interactivos" icon="puzzle" horizontal href="/es/components/accordions">
  Mejora tu documentación con componentes interactivos como acordeones, pestañas y ejemplos de código.
</Card>

<Card title="Configura tus referencias de API" icon="code" horizontal href="/es/api-playground/overview">
  Crea referencias de API interactivas con especificaciones OpenAPI y AsyncAPI.
</Card>

<div id="troubleshooting">
  ## Solución de problemas
</div>

Si encuentras problemas durante el proceso de configuración, revisa estas soluciones a problemas frecuentes:

<AccordionGroup>
  <Accordion title="La vista previa local no funciona">
    Asegúrate de tener instalado Node.js v20.17.0 o superior y de ejecutar el comando `mint dev` desde el directorio que contiene tu archivo `docs.json`.
  </Accordion>

  <Accordion title="Los cambios no se reflejan en el sitio en producción">
    La implementación puede tardar unos minutos. Revisa tus GitHub Actions (para flujos de trabajo basados en código) o los registros de implementación en el Dashboard de Mintlify para asegurarte de que no haya errores de compilación.
  </Accordion>

  <Accordion title="El dominio personalizado no se conecta">
    Verifica que tus registros DNS estén configurados correctamente y deja suficiente tiempo para la propagación de DNS (hasta 48 horas). Puedes usar herramientas como [DNSChecker](https://dnschecker.org) para verificar tu registro CNAME.
  </Accordion>
</AccordionGroup>