i18n(es): Update develop-and-build.mdx

src/content/docs/es/develop-and-build.mdx

@@ -0,0 +1,144 @@
+---
+title: Desarrolla y construye
+description: 'Como empezar a trabajar en un nuevo proyecto'
+i18nReady: true
+---
+import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
+import ReadMore from '~/components/ReadMore.astro';
+
+¡Una vez que tengas un proyecto Astro, ya estás listo para empezar a construir con Astro! 🚀
+
+## Edita tu proyecto
+
+Para hacer cambios a tu proyecto, abre la carpeta del proyecto en tu editor de código. Trabajar en modo de desarrollo con el servidor de desarrollo corriendo te permite ver las actualizaciones de tu sitio mientras guardas cada cambio.
+
+También puedes [personalizar aspectos en tu ambiente de desarrollo](#configura-tu-ambiente-de-desarrollo) como configurar Typescript o instalar las extensiones de edición oficiales de Astro.
+
+### Iniciar el servidor de desarrollo Astro
+
+Astro viene con un servidor de desarrollo incorporado que tiene todo lo que necesitas para desarrollar un proyecto. El comando CLI `astro dev` iniciará el servidor de desarrollo local para que puedas ver tu nuevo sitio web en acción por primera vez.
+
+Cada plantilla de inicio viene con un script pre-configurado que correrá el comando `astro dev` por ti. Despues de navegar al directorio de tu proyecto, usa tu manejador de paquetes favorito para correr este comando e iniciar el servidor de desarrollo Astro
+
+<Tabs>
+  <TabItem label="npm">
+  ```shell
+  npm run dev
+  ```
+  </TabItem>
+  <TabItem label="pnpm">
+  ```shell
+  pnpm run dev
+  ```
+  </TabItem>
+  <TabItem label="yarn">
+  ```shell
+  yarn run dev
+  ```
+  </TabItem>
+</Tabs>
+
+Si todo sale bien, Astro ahora estará sirviendo tu proyecto en [http://localhost:4321/](http://localhost:4321/). ¡Visita ese enlace en tu navegador y ve tu nuevo sitio!
+
+### Trabajar en modo de desarrollo
+
+Astro escuchará cambios en vivo en tu directorio `src` y actualizará la previsualización de tu sitio en cada compilación, para que no sea necesario reiniciar el servidor mientras haces cada cambio en tiempo de desarrollo. Siempre vas a poder ver una versión actualizada de tu sitio en tu navegador mientras el servidor de desarrollo esté corriendo.
+
+Cuando estés viendo tu sitio en el navegador, vas a tener acceso a la [Barra de desarollo de Astro](/es/guides/dev-toolbar/). Mientras desarrolles, la barra te ayudará a inspeccionar tus [islas](/es/concepts/islands/), detectar problemas de accesibilidad, y más.
+
+Si no es posible abrir tu proyecto en el navegador después de iniciar el servidor de desarrollo, regresa a la terminal donde corriste el comando `dev` y revisa el mensaje desplegado. Debería mencionar si ocurrió algún error, o si tu proyecto está siendo servido en una dirección URL diferente a [http://localhost:4321/](http://localhost:4321/).
+
+## Contruye y previsualiza tu sitio
+
+Para revisar la versión de tu sitio que será creada en compilación, cierra el servidor de desarrollo (<kbd>Ctrl</kbd> + <kbd>C</kbd>) y en tu terminal corre el comando apropiado de compilación de tu manejador de paquetes:
+
+    <Tabs>
+      <TabItem label="npm">
+      ```shell
+      npm run build
+      ```
+      </TabItem>
+      <TabItem label="pnpm">
+      ```shell
+      pnpm build
+      ```
+      </TabItem>
+      <TabItem label="yarn">
+      ```shell
+      yarn run build
+      ```
+      </TabItem>
+    </Tabs>
+
+Astro compilará una versión de tu sitio lista para ser desplegada en una carpeta separada (`dist/` por default) y podrás ver su progreso en la terminal. Este te alertará sobre cualquier error de compilación en tu proyecto antes de que despliegues a producción. Si Typescript está configurado en `strict` o `strictest`, el comando `build` también revisará tu proyecto por errores de tipado.
+
+Cuando la compilación sea completada, corre el comando apropiado `preview` (por ejemplo: `npm run preview`) en tu terminal y podrás ver la versión compilada de tu sitio de manera local en la misma ventana de tu navegador.
+
+Este comando te permitirá previsualizar tu código de la manera que estaba al momento de ser compilado por última vez. El objetivo de esto es para darte una previsualización de como se verá tu sitio una ve que esté desplegado en internet. Cualquier cambios que hagas a tu código después de la compilación **no** se verán reflejados en tu previsualización hasta que corras el comando de compilación otra vez.
+
+Usa (<kbd>Ctrl</kbd> + <kbd>C</kbd>) para cerrar la previsualización y corre otro comando de terminal, como reiniciar el servidor de desarrollo para ir de regreso a un [modo de ambiente de desarrollo](#trabajar-en-modo-de-desarrollo) que actualice la previsualización de tu sitio mientras editas los archivos.
+
+<ReadMore>Lee más sobre [el Astro CLI](/es/reference/cli-reference/) y los comandos de terminal que usarás mientras desarrollas con Astro.</ReadMore>
+
+:::tip
+Talvez vas a querer [desplegar tu sitio inmediatamente](/es/guides/deploy/), antes de que agregues o cambies mucho código. Esto es beneficioso a tener una versión minima y funcional de tu sitio publicada, esto podrá ahorrarte tiempo y esfuerzo extra de solución de problemas para un despliegue futuro.
+:::
+
+## Siguientes pasos
+
+¡Éxito! ¡Ya estás listo para empezar a desarrollar con Astro! 🥳
+
+Aquí hay algunas cosas que recomendamos explorar a continuación. Puedes leerlas en cualquier orden. También podrías dejar la documentación por un rato para explorar tu nuevo proyecto Astro, y regresar aquí cuando te encuentres en algun problema o tengas una pregunta.
+
+### Configura tu ambiente de desarrollo
+
+Explore las guías a continuación para personalizar tu experiencia de desarrollo.
+
+<CardGrid>
+  <LinkCard
+    title="Configuración de editor"
+    description="Personaliza tu editor de código para mejorar tu experiencia de desarrollo y conoce nuevas funcionalidades."
+    href="/es/editor-setup/"
+  />
+  <LinkCard
+    title="Barra de herramientas de desarrollo"
+    description="Explora las funcionalidades de la barra de desarrollo."
+    href="/es/guides/dev-toolbar/"
+  />
+  <LinkCard
+    title="Configuración de TypeScript"
+    description="Configura opciones para revisión de tipado, IntelliSense, y más."
+    href="/es/guides/typescript/"
+  />
+</CardGrid>
+
+### Nuevas funcionalidades de Astro
+
+<CardGrid>
+  <LinkCard
+    title="Entiende tu código"
+    description="Aprende sobre la estructura de archivos de Astro en nuestra guía de Estructura de proyecto"
+    href="/es/basics/project-structure/"
+  />
+  <LinkCard
+    title="Crea colecciones de contenido"
+    description="Agrega contenido a tu nuevo sitio con validación frontmatter y revisión de tipado automática."
+    href="/es/guides/content-collections/"
+  />
+  <LinkCard
+    title="Agrega transisiones de vista"
+    description="Crea transiciones de página y animaciones fluidas."
+    href="/es/guides/view-transitions/"
+  />
+  <LinkCard
+    title="Aprende sobre las Islas"
+    description="Lee sobre la arquitectura de islas de Astro"
+    href="/es/concepts/islands/"
+  />
+</CardGrid>
+
+### Toma el tutorial introductorio
+
+Desarrolla un blog en Astro totalmente funcional desde una página en blanco con nuestro [tutorial introductorio](/es/tutorial/0-introduction/).
+
+Esta es una excelente manera de ver cómo funciona Astro y te guiará a través de los conceptos básicos de páginas, plantillas, componentes, enrutamiento, islas y más. También incluye una unidad opcional, ideal para principiantes, para aquellos que son nuevos en los conceptos de desarrollo web en general, que te guiará a través de la instalación de las aplicaciones necesarias en tu computadora, la creación de una cuenta de GitHub, y el desplegado de tu sitio.