Pàgina

Introducció

Entorn de treball

Astro proporciona una eina CLI per crear ràpidament un nou projecte Astro.

Selecciona la plantilla “Empty” per començar des de zero, i omet la instal·lació de dependències per poder instal·lar-les amb Deno més endavant:

deno -A npm:create-astro@latest

Astro inclou una comanda astro add per automatitzar la configuració d’integracions oficials.

Configura la integració amb Tailwind:

deno -A npm:astro add tailwind

Per veure quines comandes tens disponibles, executa deno task:

deno task

Pots iniciar el servidor amb deno task dev:

deno task dev

Obre el navegador a http://localhost:4321

Pàgines

Les pàgines són fitxers que es troben al subdirectori src/pages/ del teu projecte Astro.

Edita la pàgina src/pages/index.astro:

<body>
  <h1>Birds</h1>
</body>

Verifica que el navegador mostra la pàgina modificada.

Astro utilitza una estratègia d’enrutament anomenada enrutament basat en fitxers. Cada fitxer al teu directori src/pages/ es converteix en un endpoint al teu lloc web basat en la seva ruta de fitxer.

Crea una pàgina about.astro en el directori src/pages (copia el contingut de index.astro).

Modifica el contingut de l’element <body>

<body>
    <h1>All About Birds</h1>
    <p>Your Online Guide To Birds And Birdwatching</p>
</body>

Afegeix enllaços de navegació HTML abans del teu <h1> a la part superior de les dues pàgines (index.astro i about.astro):

<a href="/">Home</a>
<a href="/about/">About</a>

<h1>Earth/h1>

Comprova que pots fer clic en aquests enllaços per moure’t endavant i enrere entre les pàgines del teu lloc web.

mdx

Els fitxers MDX s’utilitzen per crear contingut.

Configura la integració amb MDX:

deno -A npm:astro add mdx

Crea un nou fitxer (buit)

Verifica que el servidor respon a http://localhost:4321/bird/eagle

Obre una pàgina que no existeix, per exemple http://localhost:4321/bird/swallow

Note the different output when previewing an “empty” page, and one that doesn’t exist. This will help you troubleshoot in the future.

Modifica el fitxer:

---
title: Eagle
tags: ["prey"]
---

Any of many large, heavy-beaked, big-footed birds of prey belonging to the family Accipitridae, found worldwide. Eagles are generally larger and more powerful than hawks and may resemble a vulture in build and flight characteristics, but they have a fully feathered (often crested) head and strong feet equipped with great curved talons. Most species subsist mainly on live prey, which they generally capture on the ground. Eagles have been a symbol of war and imperial power since Babylonian times. They mate for life. They nest in inaccessible places and use the same nest each year. Species vary from 24 in. to 3.3 ft (60 cm–1 m) long. The sea eagles include the bald eagle.

Contingut dinàmic

A continuació modifica el fitxer src/pages/index.astro.

Variables

Afegeix la següent línia de JavaScript al frontmatter, entre les tanques de codi:
src/pages/index.astro
```
---
const title = 'Home'
---
```

Reemplaça tant el títol com l’encapçalament amb la variable dinàmica {title}.

---
const title = 'Home'
---

<html lang="en">
<head>
    <title>{title}</title>
</head>
<body>
<h1>{title}</h1>
</body>
</html>

Expressions

Afegeix el següent JavaScript al teu frontmatter, entre les tanques de codi:

---
const articles = [
  {"title": "Is the Smoke from Wildfires Dangerous to Birds?", "date": "May 7, 2025"},
  {"title": "Birding Festivals and Events", "date": "May 5, 2025"},
]
---

Després, afegeix el següent codi a la teva plantilla HTML, sota el contingut existent:
src/pages/index.astro
```
<h2>Articles</h2>
<ul>
    {articles.map((article) => <li>{article.date} - {article.title}</li>)}
</ul>
```

Renderitzar elements condicionalment

També pots utilitzar les teves variables de script per escollir si renderitzar o no elements individuals del contingut del teu <body> HTML.

TODO

Segueix https://docs.astro.build/en/tutorial/2-pages/3/

Cloudflare

Construeix el lloc estàtic al directori per defecte dist:

deno run build

Desplega el lloc a Cloudflare (utilitza un nom de projecte diferent):

bunx wrangler pages deploy ./dist --project-name xtec-astro

El primer cop el lloc web tarda uns minuts en estar accessible.

El contingut d'aquest lloc web té llicència CC BY-NC-ND 4.0.