Astro ist ein brandneues Framework für den Aufbau von Websites. Für mich ist das Wichtigste, dass es Ihnen ermöglicht, eine Website so zu erstellen, als würden Sie ein JavaScript-Framework verwenden (und das tun Sie auch), aber das Ergebnis ist eine statische Website mit null JavaScript. Sie können clientseitiges JavaScript nach Bedarf aktivieren, und es gibt clevere Optionen dafür. Insbesondere wird die Lernkurve durch die Tatsache, dass es Komponenten unterstützt, die Sie möglicherweise bereits kennen, etwas flacher: React/Preact (JSX), Svelte, Vue oder Web Components.
Grundlagen
Ein neues Projekt zu starten ist so einfach, wie es sein sollte
npm init astro
npm install
npm startEs gibt einen hilfreichen kleinen Prozess und eine Ausgabe
Wie erwartet (wie bei Next oder Nuxt oder jedem anderen Site-Builder-Projekt) erhalten Sie einen Entwickler-Server an einem lokalen Port, den Sie sofort aufrufen können
Von hier aus betrachte ich die Grundlagen als CSS-Injektion / Hot Module Reloading. Keine Sorge dort
Ein statischer Website-Generator mit verdammt echten Komponenten
Das ist für mich eine wunderbare Sache. Ich mag die Idee von statischen Website-Generatoren – ich denke, sie machen in vielen Situationen viel Sinn. HTML über das Netzwerk zu senden, ist einfach eine gute Wahl für Ausfallsicherheit, CDN-Effizienz, SEO, Barrierefreiheit, was auch immer. Aber in der Vergangenheit waren viele der Optionen entweder
- Ein JavaScript-basierter statischer Website-Generator, der zwar eine „statische“ Website generiert, aber auch ein JavaScript-Bundle liefert (z. B. Next oder Gatsby)
- Ein statischer Website-Generator, der sich mehr auf HTML konzentriert und seine eigenen Vorlagen/Formate hat, die keine JavaScript-Komponenten sind (z. B. Eleventy oder Jekyll)
Ich weiß, dass es Ausnahmen gibt, aber das deckt die überwiegende Mehrheit des Marktes für Website-Generatoren ab.
Aber ich möchte beides!
- Ich möchte Websites aus JavaScript-Komponenten erstellen, denn die Syntax und die Werkzeuge, die sie umgeben, sind einfach besser als jedes andere Komponentensystem, das wir derzeit haben.
- Ich möchte eine statische Ausgabe, die tatsächlich null JavaScript enthält (es sei denn, ich wähle manuell Dinge aus).
Das ist es, was mit Astro passiert.
Diese Komponenten?
- Sie können
.jsx-Dateien sein - Sie können
.svelte-Dateien sein - Sie können
.vue-Dateien sein - Das sind „Renderer“, und Sie können Ihre eigenen mitbringen (BYO).
Astro hat auch sein eigenes Format (.astro) und das ist auch sehr überzeugend, weil
- Es ist offensichtlich ein erstklassiger Bestandteil der Funktionsweise von Astro
- Es ist angenehm JSX-ähnlich…
- …außer dass es besser ist, weil es Dinge wie die automatische Funktion des
<head>erledigt - Styled Scoping funktioniert sofort, über ein normales
<style>-Tag - „Fenced“ JavaScript läuft während des Builds. Schauen wir uns das als Nächstes an.
Astro-Dateien
Ich habe gerade oben einige der coolen Teile der .astro-Syntax erwähnt. Auf einer höheren Ebene mag ich einfach, wie sie aussehen. So wenig Boilerplate! Kommt direkt auf den Punkt.
---
import SomeComponent from "../components/SomeComponent";
// This runs in Node, so you look at your command line to see it.
console.log("Hi.");
// Example: <SomeComponent greeting="(Optional) Hello" name="Required Name" />
const { greeting = 'Hello', name } = Astro.props;
const items = ["Dog", "Cat", "Platipus"];
---
<!-- JSX-like, but also more pleasantly HTML like, like this comment -->
<div class="module">
<h1>{greeting}, {name}!</h1>
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>
</div>
<SomeComponent regular="props" />
<style>
/* Scoped! */
.module {
padding: 1rem;
}
</style>Die „Fences“ (---) oben sind der Ort, an dem das anfängliche JavaScript stattfindet. Dort ziehe ich die Props für diese Komponente, falls sie welche benötigt (sie können typisiert werden, wenn Sie das mögen), führe Imports/Exports durch und richte Daten für die Vorlage unten ein.
Was sich ein wenig seltsam anfühlt, aber im Einklang mit der Astro-Philosophie steht, ist, dass dies im Wesentlichen Node JavaScript ist. Es läuft im Build-Prozess. Also, die console.log()-Anweisung, die ich nicht in meiner Browser-Konsole sehe, sehe ich in meiner Kommandozeile.
pages-Routing
Es ist verlockend zu sagen, dass Next.js dies populär gemacht hat, aber das Konzept ist eigentlich so alt wie Dateisysteme. Denken Sie daran, wie ein klassischer Apache-Server funktioniert. Wenn Sie ein Dateisystem haben wie
index.html
/about/
index.htmlIm Browser können Sie http://website.com/about besuchen, und das rendert die index.html-Seite im Verzeichnis /about. So funktioniert das Routing hier. Durch die Tatsache, dass ich
/pages/
index.astro
about.astroIch werde eine Homepage sowie eine /about/-Seite auf meiner Website haben. Das ist einfach eine erfrischend nette Art, mit Routing umzugehen – im Gegensatz dazu, dass man sein eigenes Routing mit eigenen Komponenten erstellen muss.
Wenn Sie das tun möchten, dass der gesamte Inhalt Ihrer Website in Markdown-Dateien direkt im Repository liegt, ist das eine erstklassige Funktion.
Ich denke, das ist super üblich für Dinge wie Blogs und Dokumentationen, besonders da dies bereits beliebte Ziele für statische Website-Generatoren sind. Und in diesen frühen Tagen werden wir wahrscheinlich viele Astro-Websites in dieser Richtung sehen, während die Leute darauf warten, ob sie für größere Unternehmungen bereit sind.
Eine Möglichkeit, Markdown zu verwenden, ist, direkt Seiten in Markdown zu erstellen. Das Markdown hat auch „Fences“ (Frontmatter), wo Sie angeben, welches Layout Sie verwenden möchten (am besten eine .astro-Datei) und Daten übergeben, falls Sie welche benötigen. Dann fließt der gesamte Inhalt der Markdown-Datei in das <slot />. Ziemlich schick
Eine weitere unglaublich befriedigende Art, Markdown in Astro zu verwenden, ist die eingebaute <Markdown />-Komponente. Importieren Sie sie und verwenden Sie sie
---
import { Markdown } from 'astro/components';
---
<main>
<Markdown>
# Hello world!
- Do thing
- Another thing in my *cool list*
</Markdown>
<div>Outside Markdown</div>
</main>Sie können auch Markdown aus anderen Teilen Ihres Projekts holen und in eine Komponente einfügen. Das führt zum Abrufen von Daten, also schauen wir uns das als Nächstes an.
Regeln für das Abrufen von Daten
Wir sprachen gerade über Markdown, also schließen wir den Kreis. Sie können Daten intern in Astro abrufen, indem Sie fetchContent verwenden. Sehen Sie, wie einfach das ist
Ich rufe das rohe Markdown ab, dann könnte ich das zurückgegebene HTML verwenden, wenn ich möchte, oder es in eine <Markdown />-Komponente einfügen, wenn das aus irgendeinem Grund Sinn macht
---
import { Markdown } from 'astro/components';
const localData = Astro.fetchContent('../content/data.md');
---
<div class="module">
<Markdown content={localData[0].astro.source} />
</div>Aber ich muss nicht nur interne Daten abrufen. Ich bin ein Fan von Eleventy. Während eines Eleventy-Builds können Sie sicherlich Daten von einer externen Quelle abrufen, aber ich würde argumentieren, dass es ein wenig kompliziert ist. Sie rufen die Daten mit Code in einer separaten JavaScript-Datei ab, ziehen Ihre eigene Netzwerkbibliothek heran, verarbeiten und geben dann die Daten zurück, um sie anderswo in einer Vorlage zu verwenden. So. In Astro kann dieses Abrufen direkt neben der Komponente geschehen, wo Sie es benötigen.
Schauen Sie sich dieses praxisnahe Beispiel an, bei dem ich Daten direkt von CSS-Tricks abrufe und sie als Karten anzeige.
---
import Card from '../components/Card.astro';
import Header from '../components/Header';
const remoteData = await fetch('https://css-tricks.de/wp-json/wp/v2/posts?per_page=12&_embed').then(response => response.json());
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS-Trickzz</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⭐️</text></svg>">
<link rel="stylesheet" href="/style/global.css">
<style lang="scss">
.grid {
margin: 4rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
@media (max-width: 650px) {
grid-template-columns: repeat(1, 1fr);
margin: 2rem;
}
gap: 3rem;
}
</style>
</head>
<body>
<main>
<Header />
<div class="grid">
{remoteData.map((post) => {
return(
<Card
title={post.title.rendered}
link={post.link}
excerpt={post.excerpt.rendered}
featured_img={post.featured_media_src_url}
/>
)
})}
</div>
</main>
</body>
</html>Ich kann eine Seite aus CSS-Tricks-Daten so einfach erstellen
Faszinierend daran ist, dass die Daten
- in Node, nicht clientseitig, und
- während des Build-Prozesses
Daher müsste ich, um eine solche Website aktuell zu halten, den Build-/Deploy-Prozess regelmäßig ausführen.
Ich nehme an, es ist irgendwie seltsam, wie Astro all diese verschiedenen Frameworks out-of-the-box unterstützt.
Ich habe einiges an Gegenwind gehört, dass Astro auf der npm install-Ebene ineffizient ist, da man eine Menge Zeug herunterladen muss, das man wahrscheinlich nicht braucht oder benutzt. Ich habe einiges an Gegenwind gehört gegen die Idee, dass das Mischen und Anpassen von JavaScript-Frameworks eine schreckliche Idee ist.
Ich stimme zu, dass es sich seltsam anfühlt, aber ich mache mir keine Sorgen um Dinge, die nicht vom Benutzer wahrgenommen werden. Wenn Dinge nur während des Build-Prozesses passieren und der Benutzer nur HTML erhält, verwenden Sie, was sich gut anfühlt! Wenn Sie letztendlich komponentenbasiert arbeitende Frameworks laden, um interaktive Dinge auf der Seite zu tun, macht es sicherlich Sinn, es auf eines zu beschränken. Und da Sie zur Build-Zeit so viel erhalten, macht es vielleicht Sinn, etwas zu verwenden, das für super leichte Interaktivität auf gerenderter Seite entwickelt wurde.
Styling
Nehmen wir an, Sie möchten Sass zum Stylen Ihrer Website verwenden. Bei vielen Website-Generatoren wird dies aus philosophischen Gründen vermieden. So nach dem Motto: „Nein, wir wollen hier keine Meinung haben, Sie stylen, wie Sie möchten.“ Und das verstehe ich, es mag eine Stärke sein, da manchmal zu meinungsstarke Frameworks Leute verlieren. Aber für mich fühlt es sich oft unglücklich an, da ich nun allein dafür verantwortlich bin, einige Stilverarbeitungsprozesse (z. B. Gulp) einzurichten, mit denen ich mich wirklich nicht auseinandersetzen möchte.
Bei Astro scheint die Philosophie darin zu bestehen, sofort eine breite Palette beliebter Styling-Techniken out-of-the-box zu unterstützen.
- Nur
import "./style.css";Vanilla-Stylesheets - Verwenden Sie einen
<style>-Block irgendwo in.astro-Dateien, und die CSS wird auf diese Komponente beschränkt... - ...was wie CSS-Module ist, aber das ist nur erforderlich, wenn Sie eine
.jsx-Datei wählen, und wenn Sie das tun, wird es unterstützt. - Die Styling-Fähigkeiten von
.svelteund.vueDateien funktionieren wie erwartet. - Sass ist integriert, fügen Sie einfach
<style lang="scss">zu den Styling-Blöcken hinzu, wo immer.
Die Styling-Dokumentation enthält weitere Details.
Die ausgefallenen Opt-in JavaScript-Tricks
Erlauben Sie mir, dies aus dem README zu zitieren
<MyComponent />rendert eine reine HTML-Version vonMyComponent(Standard)<MyComponent:load />rendertMyComponentbeim Laden der Seite<MyComponent:idle />verwendet requestIdleCallback(), umMyComponentzu rendern, sobald der Haupt-Thread frei ist<MyComponent:visible />verwendet einen IntersectionObserver, umMyComponentzu rendern, wenn das Element in den Viewport eintritt
Das ist ein ausgefallener Tanz. HTML standardmäßig, und Sie entscheiden sich dafür, Ihre Komponenten nur dann clientseitig (JavaScript) auszuführen, wenn Sie es explizit wünschen, und selbst dann unter effizienten Bedingungen.
Ich habe einen kleinen zählbasierten Vue-Zähler (aus ihren Beispielen) auf meine Demoseite gesetzt und den :visible-Modifikator verwendet, um ihn funktionieren zu sehen. Schauen Sie ihn sich an
Die Vue-Sachen werden erst geladen, wenn sie gebraucht werden. Wie im Blog-Post gesagt wird
Natürlich ist clientseitiges JavaScript manchmal unvermeidlich. Bildkarussells, Warenkörbe und Autovervollständigungs-Suchleisten sind nur einige Beispiele für Dinge, die JavaScript erfordern, um im Browser zu laufen. Hier glänzt Astro wirklich: Wenn eine Komponente JavaScript benötigt, lädt Astro nur diese eine Komponente (und alle Abhängigkeiten). Der Rest Ihrer Website besteht weiterhin aus statischem, leichtgewichtigem HTML.
Der Discord ist poppin'
Ich sollte darauf hinweisen, dass Astro super duper neu ist. Zum Zeitpunkt des Schreibens gibt es noch keine richtige Dokumentation. Es mag sich etwas früh anfühlen, ein Framework mit Dokumentation zu verwenden, die nur als README existiert. Sie arbeiten aber daran! Ich habe Vorschauen davon gesehen, weil ich zufällig im Discord bin.
Ich denke, es ist sehr klug, einen öffentlichen Discord zu haben, da dies eine schnelle Rückkopplungsschleife für sie bedeutet, um das Framework zu verbessern. Ich finde es super nützlich, dort zu sein.
Ich glaube, sie hoffen, dass Astro zu viel mehr als nur einem Framework heranwächst, sondern zu einer vollständigen Plattform, bei der Astro nur der Open-Source-Kern ist. Sie können Fred mit Jason in einer Learn with Jason Episode darüber sprechen.
Hallo, ich versuche nicht, für den Google Cloud Service zu werben, aber ich hatte anfangs Probleme, eine Astro-Website auf Win7 zu erstellen. Meine Node-Version war alt. Dann war die Lösung, dass ich mit dem Erstellen von etwas im Google Cloud Terminal/Shell herumgespielt habe. Sie müssen zu Beginn jeder Sitzung ein „nvm install stable“ ausführen.
Dies installiert die aktuelle Version von Node/npm. Übrigens, sehr cool, das, was Sie da erstellt haben.
Ich hatte ein ähnliches Problem bei der Bereitstellung auf Netlify, wo meine Node-Version zu alt war. Sie haben einige noch nicht veröffentlichte Dokumente, also anstatt zu verlinken, kopiere und füge ich hier ein
Die letzte Version von Windows 7 ist jetzt über 10 Jahre alt. Ich denke, Sie sollten auf etwas aktualisieren, um einige schöne neue Updates für Node und andere Produkte zu erhalten, ehrlich gesagt.
Danke!
Ich bin sehr neugierig auf Astro und habe gerade auch den ‚learn with Jason‘ Podcast gesehen. Danke, dass Sie so qualitativ hochwertige Inhalte teilen, Chris.
Ich muss darauf hinweisen, dass Astro sehr gut bei den Core Web Vitals von Google abschneidet (diese Seite im Besonderen)
https://css-trickzz.netlify.app/
Erreicht 99 bei allen Werten, und @chris, das mit den Bildern in Ihrem Beispiel, die PNG-Screenshots verwenden!
Astronomische Ergebnisse – Wortspiel beabsichtigt…
Michael
Ich würde gerne sehen, dass Barrierefreiheit immer enthalten ist, wenn ein neues Framework/Tool/Bibliothek überprüft wird. Ich wundere mich immer darüber und bin zu beschäftigt, um es selbst zu untersuchen.
Ich habe gerade eine statische Website mit Eleventy bereitgestellt – und war ziemlich beeindruckt.
Obwohl ihm die „Komponenten“- und JSX-Fähigkeiten fehlten, die ich lieben gelernt habe. Dann habe ich diesen Beitrag gesehen. Ich wünschte, ich hätte ihn früher gesehen. Werde es definitiv ausprobieren.
Chris, verwendest du React und fügst es zu astro.config.mjs hinzu?
z.B.
export default {
renderer: [‘@astrojs/renderer-react’],
Ich nicht
Tolle Lektüre! Nur ein Hinweis zur
<Markdown />-Komponente. Sie scheint veraltet zu sein. Die neue Art, sie zu schreiben, ist entweder über Frontmatter oder das Abrufen von einer API und die Verwendung desmarked-Pakets. Hier ist mein Beispiel