Dirijo un pequeño y tonto sitio web en Neocities llamado Whistling Nose Games, Music and Multimedia. Durante un tiempo de inactividad el año pasado, pasé unos meses reaprendiendo diseño web, CSS, JavaScript y creando juegos y música absurdos. Tiene una vibra nostálgica intencionada. Voy a renovarlo. Un amigo, cuyas habilidades de diseño son fenomenales, me indicó la dirección de Astro para que me ayudara con mi rediseño. Así que lo intenté y resultó bastante bien.
Astro es un framework web para sitios web estáticos
Están sucediendo muchas cosas bajo el capó
Astro, que se promociona a sí mismo como «un marco para sitios web basados en contenido», es un marco web de JavaScript, que es solo una forma elegante de decir que ayuda a los usuarios a crear sitios web estáticos y con mucho contenido al separar los componentes interactivos del sitio del contenido en sí.
Compila todo lo que crea para su sitio (componentes, diseños y archivos Markdown) en HTML y CSS en el lado del servidor, en lugar de que el navegador del usuario maneje la ejecución del código. Verlo funcionar en tiempo real es bastante sorprendente. Utiliza un sistema de enrutamiento basado en archivos para generar las URL según el diseño de su archivo. lo hace mucho del trabajo detrás de escena.
Es rico en funciones y esencialmente guía a los usuarios en la creación de su primer sitio web con el software. También hay funciones de integración para construir con IA (usando un Integración de Claude CLI suena interesante), pero no los probé para este proyecto.
Antes de empezar, realiza uno de los cursos de Astro. Los revisé antes de crear mi página y me ayudaron enormemente.
Estoy usando Astro para hacer una compilación de prueba para la actualización de un sitio web.
Una prueba de una sola página puede ayudar a informar la nueva dirección del sitio web
Actualizar y revisar un sitio web personal no tiene exactamente prioridad sobre otros trabajos. Descubrí que mi contador de visitantes no funciona y siento que mi página de inicio es un poco básica para la gran variedad de contenido al que enlaza.
Además, hice una exhibición de museo virtual para mi esposa como regalo de aniversario y quería agregarla al sitio antes de fin de mes. Terminé el proyecto, lo agregué como «enlace secreto» y me di cuenta de que mi sitio necesitaba algo más de pulido. También un visitante se comunicó conmigo acerca de un código roto.
Así que Astro (con suerte) me ayudará a solucionarlo.
Una de las ideas que tuve para mi sitio fue crear una lista tonta e irónica que nadie tomaría en serio. Entonces, el alcance de este experimento con Astro es construir esa pagina especifica y pruébelo antes de agregarlo a Neocities.
La instalación ocurre dentro de la línea de comando.
O puede utilizar la versión en línea del software.
Para instalar Astro en Linux, primero deberá instalar Node.js. Usar node -v y npm -v para ver si los tienes. Si no, puedes instalarlos con sudo apt install npm en Linux Mint Canela. Obtenga la versión correcta de Node.js usando curl.
La instalación y adición de diferentes módulos a Astro se realiza en la terminal. Después de la instalación, Astro crea un directorio para su proyecto y usted puede agregar dependencias y marcos (todos los cuales se enumeran con gran detalle en su sitio web) como mejor le parezca. Usé el comando npx astro add alpinjspara agregar el marco Alpine.js a mi proyecto. Soy un gran admirador del marco y es lo que voy a usar para reconstruir el contador de visitantes de mi sitio.
Astro también ofrece una versión que puedes usar en el navegador, si decides seguir ese camino.
Planifiqué cuidadosamente mi diseño incluso antes de cargar Astro.
La preparación es clave para aprovechar al máximo la aplicación
El contenido de la página ya existe, por lo que sólo me preocupa el diseño y la funcionalidad. Quiero darle un elemento interactivo, como un botón de voto negativo (no habrá un botón de voto positivo porque creo que así es más divertido). En cuanto al diseño, quiero una vibra insaturada y estática de TV de finales de los 80.
Quiero bordes grises apagados, un fondo en tono sepia suave, tal vez alguna superposición estática de TV (pero que no distraiga demasiado) y una especie de verde descolorido para el texto. Los encabezados serán de color violeta o magenta, para alinearse más con el tema de la página. Negrita (o fuerte en CSS) debe ser de color ámbar. También haré algo interesante con los encabezados.
con astro, tengo el poder para hacer todo eso y más.
Una vez que comencé, la construcción fue rápida.
Desarrollé una página web completa en la mitad del tiempo que normalmente me toma
Cuando instalas Astro, crea cuatro carpetas diferentes en un directorio llamado src. Estos contienen:
-
Activos
-
Componentes
-
Diseños
-
paginas
El Activos La carpeta es donde colocas tus imágenes y cualquier fuente que quieras usar. Componentes es para sus elementos reutilizables (botones de pensamiento, navegación, etc.). Diseños y paginas mantenga su CSS y el contenido real de su página web respectivamente.
Escribí la lista original en enero, así que la convertí a Markdown e hice algunas modificaciones. Luego lo guardé como un archivo MD usando Micro en la Terminal. Astro mira el nombre del archivo en lugar del tipo de archivo, por lo que no debe guardarse como HTML.
A partir de ahí, construí mis elementos CSS, que guardé en el Diseños carpeta e hice un botón JavaScript muy simple que se convierte en un esqueleto ASCII que encontré en el Archivo de Arte ASCII. Tomé algunas imágenes de cómics de cada personaje y las convertí a escala de grises para que se adaptaran mejor a la estética. los tiré en el paginas carpeta en lugar de Activos coexistir con mi archivo Markdown solo para simplificar las cosas para una prueba rápida. Más tarde, los trasladaré a Activos cuando estoy finalizando la página.
La edición es intuitiva. Podrás ver los cambios a medida que los realizas. Abrí Micro para editar mi archivo en una ventana mientras mantenía el sitio abierto en la otra para poder seguir los cambios a medida que ocurrían. Ahorró un montón de tiempo solucionando problemas o códigos defectuosos.
Para verificar su código, ejecuta npm run dev. Cuando se ejecuta, su contenido se reúne y abre una instancia de localhost en su navegador. Desde allí, podrá ver cómo se ve su nueva página e inspeccionarla de inmediato para detectar cualquier problema. Si necesita hacer ajustes, simplemente regrese a su src archivos, modifique el archivo en Micro y luego observe cómo se actualiza el navegador.
En lo que respecta a mi página, tomó algo de tiempo, esfuerzo y ajustes, pero finalmente obtuve un resultado final con el que estaba contento y que probablemente terminará publicado en mi sitio.
Algunas cosas funcionan bien en Astro, mientras que otras necesitan algo de pulido
Siempre hay margen de mejora
Lo que funciona bien en Astro es su integración y cómo cada documento que crea funciona en conjunto para crear un sitio web coherente. Por otro lado, si solo estás creando una página simple con imágenes, texto, CSS y un poquito de JavaScript, podría ser más fácil codificar a mano.
Astro se siente como una aplicación de escritorio. Si bien no tuve dificultades para que el servicio funcionara en Linux Mint, tuve problemas cuando intenté usar la versión en línea en Android. No es gran cosa, pero es algo que vale la pena saber si quieres probarlo en el móvil.
Es bueno no tener que lidiar con un documento lleno de código y que Astro convierta su Markdown en HTML completamente funcional. Como me gusta escribir en Markdown, esto me ahorró considerablemente tiempo al codificar manualmente el HTML. Creo que esta es una forma única de crear sitios web más rápido, una vez que entiendes lo que estás haciendo.
No creo que Astro sea para principiantes. Ya tengo un conocimiento bastante sólido de HTML, Markdown y CSS (es cierto que mi JavaScript está oxidado, pero sé lo suficiente para arreglármelas), así que entendí lo que hace bajo el capó. Dicho esto, recomendaría consultar algunos tutoriales (incluido el de Astro) y dedicar mucho tiempo a conocer el software.
Astro se siente como una nueva herramienta que puedo usar con frecuencia
Me divertí mucho trabajando con Astro en mi página actualizada. Creo que me llevará algún tiempo sentirme más cómodo con él, pero me veo usándolo con más frecuencia en el futuro.
¿Y quién sabe? Tal vez me motive a actualizar mi sitio web o agregarle más páginas con más frecuencia. Nunca pude rehacer ese contador de visitantes, pero eventualmente lo lograré.
De cualquier manera, ciertamente disfruté el tiempo con él y no puedo esperar a ver qué más puedo hacer con él en el futuro.