So migrieren Sie von WordPress zum Eleventy Static Site Generator

Eleventy ist ein statischer Website-Generator. Wir werden uns damit befassen, warum Sie einen Static-Site-Generator verwenden möchten, uns mit der Konvertierung einer einfachen WordPress-Site in Eleventy befassen und über die Vor- und Nachteile der Verwaltung von Inhalten auf diese Weise sprechen. Lass uns gehen!

Was ist ein Static-Site-Generator?

Ich habe meine Karriere als Webentwickler vor Jahrzehnten Mitte der 1990er Jahre begonnen, als HTML und CSS die einzigen Dinge waren, die Sie brauchten, um eine Website zum Laufen zu bringen. Diese einfachen, statischen Websites waren schnell und reaktionsschnell. Spulen wir jedoch bis heute vor, und eine einfache Website kann ziemlich kompliziert sein.

Lassen Sie uns im Fall von WordPress überlegen, was zum Rendern einer Webseite erforderlich ist. Das serverseitige PHP von WordPress, das auf den Servern eines Hosts ausgeführt wird, übernimmt die schwere Aufgabe, eine MySQL-Datenbank nach Metadaten und Inhalten abzufragen, wählt die richtigen Versionen von Bildern aus, die in einem statischen Dateisystem gespeichert sind, und führt alles zuvor in einer themenbasierten Vorlage zusammen Zurückgeben an den Browser. Es ist ein dynamischer Prozess für jede Seitenanforderung, obwohl die meisten Webseiten, die ich gesehen habe, von WordPress generiert wurden, nicht wirklich so dynamisch sind. Die meisten Besucher, wenn nicht alle, erleben identische Inhalte.

Statische Site-Generatoren kehren das Modell direkt zu diesem jahrzehntealten Ansatz zurück. Anstatt Webseiten dynamisch zusammenzustellen, nehmen Static-Site-Generatoren Inhalte in Form von Markdown, führen sie mit Vorlagen zusammen und erstellen statische Webseiten. Dieser Vorgang findet außerhalb der Anforderungsschleife statt, wenn Benutzer Ihre Website durchsuchen. Alle Inhalte wurden vorgeneriert und werden bei jeder Anfrage blitzschnell bereitgestellt. Webserver tun buchstäblich das, wofür sie werben: dienen. Keine Datenbank. Keine Plugins von Drittanbietern. Nur reines HTML, CSS, JavaScript und Bilder. Dieser vereinfachte Tech-Stack entspricht auch einer kleineren Angriffsfläche für Hacker. Es gibt eine kleine serverseitige Infrastruktur, die ausgenutzt werden kann, sodass Ihre Website von Natur aus sicherer ist.

Führende Static-Site-Generatoren sind ebenfalls reich an Funktionen, und das kann ein überzeugendes Argument dafür sein, sich von den Tech-Stacks zu verabschieden, die Markenzeichen moderner Content-Management-Systeme sind.

Wenn Sie schon eine Weile in dieser Branche tätig sind, erinnern Sie sich vielleicht an das Produkt Dreamweaver von Macromedia (vor Adobe). Ich mochte das Konzept der Bibliothekselemente und -vorlagen, insbesondere, wie ich damit Konsistenz über mehrere Webseiten hinweg schaffen konnte. Im Fall von Eleventy sind die Konzepte von Templates, Filtern, Shortcodes und Plugins sehr ähnlich. Ich begann mit dieser ganzen Reise, nachdem ich über Smashings Enterprise-Umstellung auf JamStack gelesen hatte. Ich habe auch das kostenlose Buch von Mathias Biilmann & Phil Hawksworth mit dem Titel Modern Web Development on the JAMstack gelesen und wusste, dass ich bereit war, die Ärmel hochzukrempeln und etwas Eigenes umzusetzen.

Warum nicht einen Static-Site-Generator verwenden?

Statische Site-Generatoren erfordern eine gewisse Lernkurve. Sie werden redaktionelle Funktionen nicht einfach an die Eingabe von Inhalten weitergeben können, und bestimmte Anwendungsfälle können Sie daran hindern, eine zu verwenden. Die meiste Arbeit, die ich zeigen werde, wird in Markdown und über die Befehlszeile erledigt. Allerdings gibt es viele Möglichkeiten, statische Website-Generatoren in Verbindung mit dynamischen Daten-, E-Commerce-, Kommentar- und Bewertungssystemen zu verwenden.

Sie müssen auch nicht Ihre gesamte Website auf einmal umstellen. Wenn Sie ein kompliziertes Setup haben, fangen Sie vielleicht klein an und sehen, wie Sie über die Generierung statischer Websites denken, bevor Sie einen Plan zusammenstellen, um etwas auf Unternehmensebene zu lösen. Sie können WordPress auch weiterhin als erstklassiges Headless-Content-Management-System verwenden und ein SSG verwenden, um WordPress-Inhalte bereitzustellen.

Wie ich mich für Eleventy als Static Site Generator entschieden habe

Führen Sie eine schnelle Suche nach beliebten statischen Website-Generatoren durch und Sie werden viele großartige Optionen für den Anfang finden: Eleventy, Gatsby, Hugo und Jekyll waren die führenden Konkurrenten auf meiner Liste. Wie man wählt? Ich tat, was sich natürlich ergab, und fragte einige Freunde. Eleventy war in meiner Twitter-Umfrage klar führend, aber was den Ausschlag gab, war ein Kommentar, der sagte: „@eleven_ty fühlt sich sehr zugänglich an, wenn man nicht weiß, was man tut.“ Hey das bin ich! Ich kann unglücklicherweise in eine Analyselähmung geraten. Nicht heute … es fühlte sich gut an, Eleventy basierend auf einer Umfrage und einem Kommentar auszuwählen. Seitdem habe ich vier WordPress-Sites zu Eleventy konvertiert, wobei ich GitHub zum Speichern des Codes und Netlify zum sicheren Bereitstellen der Dateien verwendet habe. Genau das werden wir heute tun, also krempeln wir die Ärmel hoch und tauchen ein!

Erste Schritte: Bootstrapping der ursprünglichen Site

Eleventy hat eine großartige Sammlung von Starter-Projekten. Wir werden Dan Urbanowicz' Eleventy-Netlify-Boilerplate als Ausgangspunkt verwenden, das als „Vorlage zum Erstellen einer einfachen Blog-Website mit Eleventy und deren Bereitstellung auf Netlify beworben wird. Beinhaltet Netlify CMS und Netlify Forms.“ Klicken Sie auf „Auf netlify bereitstellen“, um loszulegen. Sie werden aufgefordert, Netlify mit GitHub zu verbinden, Ihr Repository zu benennen (ich nenne meins smashing-eleventy-dawson) und dann „Save & Deploy“.

Nachdem dies erledigt war, passierten einige Dinge:

1. Das Boilerplate-Projekt wurde Ihrem GitHub-Konto hinzugefügt.
2. Netlify hat dem Projekt einen dynamischen Namen zugewiesen, es erstellt und bereitgestellt.
3. Netlify hat das Projekt so konfiguriert, dass Identität (wenn Sie CMS-Funktionen verwenden möchten) und Formulare (ein einfaches Kontaktformular) verwendet werden.

Wie der Screenshot andeutet, können Sie dem Projekt eine Domain beschaffen oder zuordnen und die Site auch mit HTTPS sichern. Letztere Funktion war für mich ein wirklich überzeugendes Verkaufsargument, da mein Host eine exorbitante Gebühr für SSL erhoben hatte. Auf Netlify ist es kostenlos.

Ich habe auf „Site-Einstellungen“ und dann auf „Site-Namen ändern“ geklickt, um einen passenderen Namen für meine Site zu erstellen. So sehr ich jovial-goldberg-e9f7e9 mochte, elizabeth-dawson-piano ist passender. Immerhin ist das die Seite, die wir konvertieren! Wenn ich elizabeth-dawson-piano.netlify.app besuche, sehe ich den Boilerplate-Inhalt. Fantastisch!

Laden wir das neue Repository auf unseren lokalen Computer herunter, damit wir mit der Anpassung der Site beginnen können. Mein GitHub-Repository für dieses Projekt gibt mir den Befehl git clone, den ich im Terminal von Visual Studio Code verwenden kann, um die Dateien zu kopieren:

• Klonen Sie git →

Dann befolgen wir die verbleibenden Anweisungen in der README-Datei der Boilerplate, um Abhängigkeiten lokal zu installieren, die Datei „ _data/metadata.json “ so zu bearbeiten, dass sie mit dem Projekt übereinstimmt, und das Projekt lokal auszuführen.

• npm install @11ty/eleventy
• npm install
• npx eleventy --serve --quiet

Mit diesem letzten Befehl startet Eleventy die lokale Entwicklungsseite unter localhost:8080 und beginnt, nach Änderungen zu suchen.

Bewahren von WordPress-Beiträgen, -Seiten und -Bildern

Die Website, von der wir konvertieren, ist eine bestehende WordPress-Website unter elizabethrdawson.wordpress.com. Obwohl die Website einfach ist, wäre es großartig, so viele dieser vorhandenen Inhalte wie möglich zu nutzen. Niemand kopiert und fügt gerne so viel ein, oder? WordPress macht es Ihnen mit seiner Exportfunktion leicht.

Inhalt exportieren gibt mir eine ZIP-Datei, die einen XML-Extrakt des Website-Inhalts enthält. Medienbibliothek exportieren gibt mir eine ZIP-Datei mit den Bildern der Website. Die Website, die ich als Modell für diese Übung ausgewählt habe, ist eine einfache 3-seitige Website, die auf Wordpress.com gehostet wird. Wenn Sie selbst hosten, können Sie zu Extras > Exportieren gehen, um den XML-Extrakt zu erhalten, aber je nach Host müssen Sie möglicherweise FTP verwenden, um die Bilder herunterzuladen.

Wenn Sie die XML-Datei in Ihrem Editor öffnen, wird sie Ihnen wenig nützen. Wir brauchen eine Möglichkeit, einzelne Posts in Markdown zu bringen, das ist die Sprache, die wir mit Eleventy verwenden werden. Glücklicherweise gibt es ein Paket zum Konvertieren von WordPress-Beiträgen und -Seiten in Markdown. Klonen Sie dieses Repository auf Ihren Computer und legen Sie die XML-Datei im selben Verzeichnis ab. Ihr Verzeichniseintrag sollte in etwa so aussehen:

Wenn Sie Beiträge aus dem XML extrahieren möchten, funktioniert dies sofort. Unsere Beispiel-Site hat jedoch drei Seiten, daher müssen wir eine kleine Anpassung vornehmen. Ändern Sie in Zeile 39 von parser.js „post“ in „page“, bevor Sie fortfahren.

Stellen Sie sicher, dass Sie eine „npm install“ im Verzeichnis „ wordpress-export-to-markdown markdown“ durchführen, geben Sie dann „node index.js“ ein und folgen Sie den Anweisungen.

Dieser Prozess hat drei Dateien für mich erstellt: welcome.md , about.md und contact.md . In jeder gibt es eine Titelei, die den Titel und das Datum der Seite beschreibt, und den Markdown des Inhalts, der aus dem XML extrahiert wurde. „Front Matter“ ist vielleicht ein neuer Begriff für Sie, und wenn Sie sich den Abschnitt oben in den .md -Beispieldateien im Verzeichnis „pages“ ansehen, sehen Sie oben in der Datei einen Abschnitt mit Daten. Eleventy unterstützt eine Vielzahl von Titeln, mit denen Sie Ihre Website individuell anpassen können, und Titel und Datum sind nur der Anfang. Auf den Beispielseiten sehen Sie dies im Titelbereich:

 eleventyNavigation: key: Home order: 0

Mit dieser Syntax können Sie Seiten automatisch zur Navigation der Website hinzufügen lassen. Ich wollte dies mit meinen neuen Seiten beibehalten, also habe ich den Inhalt der Seiten kopiert und in die vorhandenen Boilerplate-.md-Dateien für „Home“, „Contact“ und „Info“ eingefügt. Unsere Beispiel-Site wird vorerst keinen Blog haben, also lösche ich auch die .md Dateien aus dem „posts“-Verzeichnis. Jetzt sieht meine lokale Vorschauseite so aus, also kommen wir zum Ziel!

Dies scheint ein guter Zeitpunkt zu sein, um die Updates an GitHub zu übergeben und zu pushen. Ein paar Dinge passieren, wenn ich Updates übertrage. Nach der Benachrichtigung von GitHub, dass Aktualisierungen vorgenommen wurden, führt Netlify den Build aus und aktualisiert die Live-Site. Es ist derselbe Vorgang, der lokal beim Aktualisieren und Speichern von Dateien abläuft: Eleventy konvertiert die Markdown-Dateien in HTML-Seiten. Wenn Sie lokal in Ihrem _site Verzeichnis nachsehen, sehen Sie die HTML-Version Ihrer Website, bereit für statisches Serving. Wenn ich also kurz nach dem Festschreiben zu elizabeth-dawson-piano.netlify.app navigiere, sehe ich dieselben Updates, die ich lokal gesehen habe.

Bilder hinzufügen

Wir verwenden Bilder von der ursprünglichen Website. In der Datei .eleventy.js sehen Sie, dass statische Bildelemente im Ordner static/img abgelegt werden sollten. Jede Seite wird ein Heldenbild haben, und hier funktioniert die Titelei wirklich gut. Im Titelbereich jeder Seite füge ich einen Verweis auf das Heldenbild hinzu:

 hero: `/static/img/performance.jpg`

Eleventy speichert Seitenlayouts im Ordner _includes/layouts . base.njk wird von allen Seitentypen verwendet, daher fügen wir diesen Code direkt unter der Navigation hinzu, da wir dort unser Hero-Image haben möchten.

 {% if (hero) %} <img class="page-hero" src="{{ hero }}" alt="Hero image for {{ title }}" /> {% endif %}

Ich habe auch ein Bild-Tag für das Bild von Elizabeth auf der About-Seite eingefügt, indem ich eine CSS-Klasse verwendet habe, um es auszurichten und ihm die richtige Auffüllung zu geben. Jetzt ist ein guter Zeitpunkt, sich zu verpflichten und genau zu sehen, was sich geändert hat.

Einbetten eines YouTube-Players mit einem Plugin

Auf der Homepage gibt es einige YouTube-Videos. Lassen Sie uns ein Plugin verwenden, um den Einbettungscode von Youtube automatisch zu erstellen. elfty-plugin-youtube-embed ist dafür eine großartige Option. Die Installationsanweisungen sind ziemlich klar: Installieren Sie das Paket mit npm und fügen Sie es dann in unsere .eleventy.js -Datei ein. Ohne weitere Änderungen werden diese YouTube-URLs in eingebettete Player umgewandelt. (siehe Commit)

Verwenden von Sammlungen und Filtern

Wir brauchen keinen Blog für diese Seite, aber wir brauchen eine Möglichkeit, die Leute über kommende Veranstaltungen zu informieren. Unsere Veranstaltungen werden – in jeder Hinsicht – genau wie Blog-Beiträge sein. Jeder hat einen Titel, eine Beschreibung und ein Datum.

Es sind einige Schritte erforderlich, um diese neue sammlungsbasierte Seite zu erstellen:

• Erstellen Sie eine neue events.md -Datei in unserem Seitenverzeichnis.
• Fügen Sie unserem Posts-Verzeichnis einige Veranstaltungen hinzu. Ich habe .md -Dateien für ein Feiertagskonzert, ein Frühlingskonzert und ein Herbstkonzert hinzugefügt.
• Erstellen Sie eine Sammlungsdefinition in .eleventy.js , damit wir diese Ereignisse als Sammlung behandeln können. So wird die Sammlung definiert: Wir sammeln alle Markdown-Dateien im Posts-Verzeichnis und filtern alles heraus, für das kein Speicherort in der Titelsache angegeben ist.

 eleventyConfig.addCollection("events", (collection) => collection.getFilteredByGlob("posts/*.md").filter( post => { return ( item.data.location ? post : false ); }) );

• Fügen Sie unserer Datei events.md einen Verweis auf die Sammlung hinzu und zeigen Sie jedes Ereignis als Eintrag in einer Tabelle an. So sieht das Iterieren über eine Sammlung aus:

 <table> <thead> <tr> <th>Date</th> <th>Title</th> <th>Location</th> </tr> </thead> <tbody> {%- for post in collections.events -%} <tr> <td>{{ post.date }}</td> <td><a href="{{ post.url }}">{{ post.data.title }}</a></td> <td>{{ post.data.location }}</td> </tr> {%- endfor -%} </tbody> </table>

Unsere Datumsformatierung sieht jedoch ziemlich schlecht aus.

Glücklicherweise hat die Boilerplate-Datei .eleventy.js bereits einen Filter namens readableDate. Es ist einfach, Filter für Inhalte in Markdown-Dateien und -Vorlagen zu verwenden:

 {{ post.date | readableDate }}

Jetzt sind unsere Daten richtig formatiert! Die Filterdokumentation von Eleventy geht detaillierter darauf ein, welche Filter im Framework verfügbar sind und wie Sie Ihre eigenen hinzufügen können. (siehe: verpflichten)

Polieren des Site-Designs mit CSS

Okay, jetzt haben wir also eine ziemlich solide Seite erstellt. Wir haben Seiten, Heldenbilder, eine Veranstaltungsliste und ein Kontaktformular. Wir sind nicht durch die Wahl eines Themas eingeschränkt, also können wir mit dem Design der Seite machen, was wir wollen … der Himmel ist die Grenze! Es liegt an Ihnen, Ihre Website leistungsfähig, reaktionsschnell und ästhetisch ansprechend zu gestalten. Ich habe einige Styling- und Markup-Änderungen vorgenommen, um die Dinge zu unserem endgültigen Commit zu bringen.

Jetzt können wir der Welt von all unserer harten Arbeit erzählen. Lassen Sie uns diese Seite veröffentlichen.

Veröffentlichung der Website

Oh, aber warte. Es ist bereits veröffentlicht! Wir haben die ganze Zeit in diesem netten Workflow gearbeitet, in dem unsere Updates für GitHub automatisch an Netlify weitergegeben und in frisches, schnelles HTML umgebaut werden. Updates sind so einfach wie ein Git-Push. Netlify erkennt die Änderungen von Git, verarbeitet Markdown in HTML und bedient die statische Site. Wenn Sie fertig und bereit für eine benutzerdefinierte Domain sind, können Sie mit Netlify Ihre vorhandene Domain kostenlos nutzen. Besuchen Sie Site-Einstellungen > Domain-Verwaltung für alle Details, einschließlich wie Sie das kostenlose HTTPS-Zertifikat von Netlify mit Ihrer benutzerdefinierten Domain nutzen können.

Erweitert: Bilder, Kontaktformulare und Inhaltsverwaltung

Dies war eine einfache Seite mit nur wenigen Bildern. Möglicherweise haben Sie jedoch eine kompliziertere Website. Mit dem Large Media-Dienst von Netlify können Sie Bilder in voller Auflösung auf GitHub hochladen und einen Verweis auf das Bild in Large Media speichern. Auf diese Weise ist Ihr GitHub-Repository nicht mit Bilddaten vollgestopft, und Sie können Ihrer Website ganz einfach Markup hinzufügen, um optimierte Zuschnitte und Größen von Bildern zum Zeitpunkt der Anfrage anzufordern. Ich habe dies auf meinen eigenen größeren Websites ausprobiert und war sehr zufrieden mit der Reaktionsfähigkeit und der einfachen Einrichtung.

Erinnern Sie sich an das Kontaktformular, das mit unserer Boilerplate installiert wurde? Es funktioniert einfach. Wenn Sie das Kontaktformular absenden, sehen Sie die Absendungen im Verwaltungsbereich von Netlify. Wählen Sie „Formulare“ für Ihre Website aus. Sie können Netlify so konfigurieren, dass es Ihnen eine E-Mail sendet, wenn Sie eine neue Formularübermittlung erhalten, und Sie können auch eine benutzerdefinierte Bestätigungsseite in den Code Ihres Formulars einfügen. Erstellen Sie beispielsweise eine Seite auf Ihrer Website unter /contact/success , und fügen Sie dann innerhalb Ihres form -Tags (in form.njk ) action="/contact/success" hinzu, um Benutzer dorthin umzuleiten, sobald das Formular gesendet wurde.

Die Boilerplate konfiguriert auch die Site, die mit dem Content Manager von Netlify verwendet werden soll. Dies so zu konfigurieren, dass es für eine nicht-technische Person gut funktioniert, würde den Rahmen des Artikels sprengen, aber Sie können Vorlagen definieren und Aktualisierungen, die im Inhaltsmanager von Netlify vorgenommen wurden, mit GitHub synchronisieren und automatische erneute Bereitstellungen Ihrer Website auslösen. Wenn Sie jedoch mit dem Arbeitsablauf vertraut sind, Aktualisierungen in Markdown vorzunehmen und sie an GitHub zu übertragen, ist diese Funktion wahrscheinlich etwas, das Sie nicht benötigen.

• Endgültig konvertierte Website (Ergebnis)
• GitHub-Repository

Weiterführende Lektüre

Hier sind einige Links zu Ressourcen, die in diesem Tutorial verwendet werden, und einige andere fortgeschrittenere Konzepte, wenn Sie tiefer eintauchen möchten.

• „Wie Smashing Magazine Inhalte verwaltet: Migration von WordPress zu JAMstack“, Sarah Drasner
• „Moderne Webentwicklung auf dem JAMstack“, Mathias Biilmann & Phil Hawksworth
• „Eleventy ist ein einfacher statischer Site-Generator“, Eleventy Docs
• „Starter-Projekte“, Eleventy Docs
• „Große Mediendokumente“, Netlify
• „Konfigurationsoptionen“, Netlify CMS
• „12 Dinge, die ich nach der Konvertierung von WordPress-Sites in Eleventy gelernt habe“, Scott Dawson