Crear una página web estática con Astro es muy rápido y sencillo. Permite utilizar layouts y componentes reutilizables. Los layouts nos permiten tener diferentes estructuras/formatos de páginas para mostrar contenido. Los componentes nos permitirá reutilizarlos en diferentes páginas. Añadiremos Tailwind CSS para utilizar en nuestra maquetación.
Para preparar el proyecto es necesario tener instaldo Node.js (para Astro v3.0 requiere Node.js v18.14.1 o superior). Creamos el directorio para nuestro nuevo proyecto, inicializamos e instalamos las dependencias. Astro dispone también de una herramienta CLI que también puede utilizarse para inicializar/configurar el proyecto.
mkdir a27l-proyecto-astro
cd a27l-proyecto-astro
npm init --yes
npm install astro -E
Crearemos el fichero de configuración base de Astro astro.config.mjs.
Para establecer la configuración, defineConfig, acepta diferentes variables de configuración que se pueden consultar en su web https://astro.build/config
Configuramos el puerto del servidor de desarrollo.
Por defecto se crea el contenido de forma estática. En la configuración output es posible utilizar las opciones: static, server, hybrid.
Cuando se generan los ficheros CSS y JS quedan almacenados dentro de un directorio llamado _asro. Lo modificamos en la configuracion build.assets para que sea diferente.
import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'static',
server: {
port: 4321,
host: true
},
build: {
assets: '_assets'
}
});
En el fichero package.json preparamos los scripts para lanzar el servidor de desarrollo y generar el código de producción utilizando npm.
"scripts": {
...
"dev": "astro dev",
"build": "astro build"
...
}
Lanzar servidor de desarrollo. Por defecto el puerto es 4321. Se accedería con el navegador en la dirección http://localhost:4321
npm run dev
Generar código producción.
Una vez termina, en el directorio dist/ se encontrán los ficheros de la aplicacción web generados para publicar en un entorno de producción. El directorio puede cambiarse en la configuración.
npm run build
Crearemos la siguiente estructura de directorios. Dentro de ‘src/’ podremos organizarla de la forma que queramos.
public/ # Cualquier recurso estático que deba estar disponible en la web (favicon, imágenes, etc..)
src/ # Contendrá el código de nuestra aplicacción: estilos, layouts, páginas, componentes, scripts
src/pages/ # Serán las rutas/páginas de nuestra aplicación
src/layouts/ # Layouts para páginas
src/components/ # Componentes reutilizables en diferentes páginas
src/styles/ # Ficheros CSS
src/scripts/ # Ficheros JS
mkdir public
mkdir -p src/pages
mkdir -p src/layouts
mkdir -p src/components
mkdir -p src/styles
mkdir -p src/scripts
Dentro del directorio src/pages crearemos los ficheros .astro que serán las páginas de la aplicación. Un fichero llamado index correspondará al fichero por defecto de ese directorio. Por lo que el fichero src/pages/index.astro será la página principal. Es posible utilizar ficheros Markdown .md que serán generado en HTML.
Creamos la página principal src/pages/index.astro. El código JS envuelto entre los --- se ejecutará el servidor para generar las páginas (no se ejcutara en el cliente/navegador web). Si es necesario ejecutar código JS en la web se tendrá que utilizar la correspondiente etiqueta <script> o en un fichero .js e incluirlo en la página.
---
// Código JS necesario para generar la página
const title = "Página de inicio"
---
<!-- HTML de la página -->
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<title>A27L - {title}</title>
</head>
<body>
<h1>A27L - Página de inicio</h1>
</body>
</html>