Static generation

Statische Seiten anlegen

Erstelle eine Datei index.astro im Verzeichnis /pages/ falls diese noch nicht existiert.

Füge im Javascript-Bereich eine Variable mit dem Titel hinzu:

const title = "Astro ist super";

Schreibe ein HTML und gebe den Titel im title tag und in einer H1 Überschrift aus.

Die Seite sollte die Startseite sein wenn Du deinen lokalen Development Server besuchst http://localhost:4321/

Weitere Seite anlegen

Lege eine weitere Seite im Unterverzeichnis /programm an und nenne sie speaker.astro.

Füge im Javascript-Bereich folgende Variablen hinzu:

const title = "Speakerliste";
const speakers = [
    "Yannick Baron",
    "Tobias Struckmeier",
    "Thomas Puppe",
    "Sebastian Holstein",
    "Sebastian Springer",
    "Sascha Lehmann",
    "Quentin Albert",
    "Peter Kröner",
    "Nils Röhrig",
    "Nicole Rauch",
    "Milena Fluck",
    "Martina Kraus",
    "Lena Rosenboom",
    "Kristof Kreimeyer",
    "Katja Potensky",
    "Hans-Christian Otto",
    "Hannah Ebert",
    "Florian Sowade",
    "Fabian Gosebrink",
    "Elmar Burke",
    "Dominikus Hellgartner",
    "David Müllerchen",
    "Daniel Murrmann",
    "Christian Liebel",
    "Burkhard Blobel",
    "Alexander Thalhammer",
    "Alexander Lichter",
];

Dann müssen wir das HTML hinzufügen.

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
    </head>
    <body>
        <img src="/logo-js.png" alt="Astro Logo" height="200" />
        <h1>{title}</h1>
        <ul>
        </ul>
    </body>
</html>

Innerhalb der ul möchten wir die Speaker auflisten. Dazu benutzen wir JSX da uns die Template Engine das erlaubt.

{speakers.map((name) => <li>{name}</li>)}