„Static Site Generator“, um genau zu sein. Dazu kommen wir gleich.
Netlify ist Sponsor dieser Seite (vielen Dank) und ich sehe, dass Zach Leatherman dort jetzt zu arbeiten begonnen hat. Sehr cool. Zach ist der Schöpfer von Eleventy, einem SSG für Node. Eine der vielen bemerkenswerten Eigenschaften von Eleventy ist, dass man es nicht einmal installieren muss, wenn man das nicht möchte. Lassen Sie mich die Bühne bereiten.
Nehmen wir an, Sie haben eine Website mit drei Seiten und einer der Gründe, warum Sie einen SSG verwenden möchten, ist, dass Sie die Navigation auf allen drei Seiten wiederholen möchten. Ein „HTML-Include“, einer der ältesten Bedürfnisse in der Webentwicklung, ist enthalten! Wir haben viele Wege behandelt, dies zu tun in der Vergangenheit. Also haben wir…
/my_project
- index.html
- about.html
- contact.htmlUnd jede dieser HTML-Dateien benötigt diesen wiederkehrenden Navigationsblock.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Southside Laundromat</title>
</head>
<body>
{{ INCLUDE NAVIGATION HERE }}
Unique content to this page.
</body>
</html>Nun, warum werfen wir diesen Navigationsblock nicht in eine Datei, also…
/my_project
- /_includes
- nav.html
- index.html
- about.html
- contact.htmlWas in etwa so aussieht…
<nav>
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
</nav>Wie führen wir also tatsächlich das Include durch? Hier kommt Eleventy ins Spiel. Eleventy unterstützt eine Reihe von Vorlagensprachen, aber die Standardvorlage ist Liquid. Liquid unterstützt Datei-Includes! So…
{% include ./nav.html %}Das ist also die Zeile, die ich in jede der drei HTML-Dateien einfüge. Wie verarbeite ich sie dann? Ist das nicht der Moment, in dem ich Eleventy installieren muss, um das alles zum Laufen zu bringen? Nein, ich kann einen einzigen Befehl auf der Kommandozeile ausführen, um dies zu erreichen (vorausgesetzt, ich habe npm installiert).
npx @11ty/eleventyHier ist ein 30-sekündiges Video, das es in Aktion zeigt
Es gibt keine package.json. Es gibt keine npm install. In gewisser Weise ist dies eine Zero-Dependency-Methode zur Verarbeitung einer statischen Website, was ich sehr cool finde. Eleventy verarbeitet alles standardmäßig in einen _site-Ordner.
Nehmen wir an, ich möchte diese statische Website bereitstellen… Auf der Netlify-Seite kann ich angeben, dass der _site-Ordner bereitgestellt werden soll. Ich muss ihn auch nicht committen (und das sollten Sie auch nicht), also kann ich ihn in eine .gitignore-Datei legen. Netlify kann ihn mit demselben Befehl bauen.
Ich könnte diese Einstellungen in eine Datei packen, wenn das einfacher zu verwalten ist als die Website selbst. Hier ist, was in eine netlify.yml-Datei käme
build:
command: "npx @11ty/eleventy"
publish: _siteDer Sinn dieses Artikels ist es: Schauen Sie, wie cool es ist, dass Sie nicht einmal etwas installieren müssen, um einen SSG auszuführen! Das hat einen Geschwindigkeitspreis. Es wird schneller sein, sowohl lokal als auch für Cloud-Computer, die Ihre Builds ausführen, Pakete zu installieren.
Als ich an dieser kleinen Demo arbeitete, wollte ich eine winzige Konfiguration für Eleventy, da ich wollte, dass meine CSS-Dateien auf die verarbeitete Website übernommen werden, also…
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("./styles");
};Das ist alles.
Netter Trick.
Gibt es einen Unterschied darin, wie Netlify Eleventy und Abhängigkeitsmodule zwischen npx und einem „klassischen“ npm-Install speichert?
Ich bin mir nicht sicher! Wahrscheinlich? Ich würde denken, Netlify hat ein starkes Interesse daran, Builds schnell zu machen, und das beinhaltet wahrscheinlich das Caching, wenn es das kann.
Auf meinem lokalen Computer sieht es so aus, als ob
npxdie Module jedes Mal herunterlädt, sodass der Build nicht so augenblicklich ist, wie er sein könnte.Gibt es Einstellungen, die hinzugefügt werden können, um einen Cache zu haben?
Folgen Sie dieser praktischen Anleitung, um Eleventy zu Ihrem lokalen Projekt hinzuzufügen: https://www.11ty.dev/docs/getting-started/