Configuración inicial del tema

1. Para empezar, instala primero todos los paquetes necesarios con npm install o pnpm install y luego lanza una compilación inicial con npm run build o pnpm build para comprobar que la instalación funciona.
2. Copia la compilación de Pagefind (el buscador del sitio) para que esté disponible en el entorno de desarrollo. Esto varía según tu sistema operativo. He creado un par de comandos que te ayudan.
   • En Windows, ejecuta npm run winsearch
   • En OSX o Linux, ejecuta npm run osxsearch
3. A continuación toca configurar el sistema i18n de tu sitio (un idioma o varios). Solo tienes que ejecutar el comando npm run docs:config-i18n y seguir las instrucciones del script.
4. ¡Ya puedes dejar el sitio a tu gusto!

Recorridos por el código

He creado unos cuantos recorridos de código para presentarte la base de código. Necesitas la extensión Code Tour para verlos en VSCode u otro IDE.

Estructura del código

El código está organizado con casi todos los elementos dentro del directorio src/docs. Así resulta fácil soltar esa carpeta entera en un proyecto existente y añadir la funcionalidad de documentación en cuestión de minutos.

Opciones de configuración

La configuración general del sitio se hace en la carpeta src/docs/config/. La mayoría de los ajustes viven dentro de carpetas individuales por idioma, para que gestionar las traducciones resulte más sencillo.

Ajustes del sitio

El archivo src/docs/config/siteSettings.json.ts sirve para configurar los ajustes del sitio. Ahí decides cosas como si activar las transiciones de vista, si activar las animaciones y si mostrar los botones de copiar enlace en los títulos de la documentación.

Datos del sitio

El archivo src/docs/config/[language]/siteData.json.ts sirve para configurar los datos del sitio: el título, la descripción, los enlaces a redes sociales y la imagen por defecto.

Datos de navegación

Configura los datos de navegación de la barra superior en el archivo src/docs/config/[language]/navData.json.ts.

Diseño de la barra lateral

Configura el orden de las secciones de tu documentación en el archivo src/docs/config/[language]/sidebarNavData.json.ts.

Robots

Para que los robots como el de Google vean el sitemap correcto, edita el archivo public/robots.txt y pon el dominio de tu sitio web.

Más recursos

Información general sobre Astro

Astro busca archivos .astro o .md en el directorio src/pages/. Cada página se expone como una ruta basada en su nombre de archivo.

El directorio src/components/ no tiene nada de especial, pero es donde nos gusta poner los componentes de Astro, React, Vue, Svelte o Preact.

Los recursos estáticos, como las imágenes, se pueden colocar en el directorio public/. También uso a menudo src/assets para las imágenes cuando aprovecho los assets de Astro para optimizarlas.

Comandos

Todos los comandos se ejecutan desde la raíz del proyecto, en una terminal:

Comando	Acción
npm install	Instala las dependencias
npm run dev	Inicia el servidor local en localhost:4321
npm run build	Compila tu sitio de producción en ./dist/
npm run preview	Previsualiza tu compilación en local, antes de desplegar
npm run astro ...	Ejecuta comandos de CLI como astro add, astro check
npm run astro -- --help	Obtén ayuda sobre la CLI de Astro

¿Quieres saber más?

Consulta la documentación o pásate por el servidor de Discord.