Ein Leitfaden für statische Site-Generatoren mit Hexo und WordPress

Statische Site-Generatoren sind Systeme, die Vorlagen in statische HTML-Seiten kompilieren. Wenn das effizient klingt – ja, das ist es. Es gibt keine Serververarbeitung oder Rendering, daher sind statische Websites in der Regel sehr schnell und leichtgewichtig, was Ihnen und Ihren Benutzern wertvolle Zeit und Bandbreite spart. Diese gesteigerte Effizienz spiegelt sich in niedrigeren Kosten und potenziell höheren Einnahmen wider.

Von der Optimierung von WordPress bis hin zum statischen System

Apropos effiziente Umsatzgeneratoren, da fällt mir WordPress ein. Es betreibt 28 Prozent des Internets und ist eine leistungsstarke Plattform mit vielen großartigen Funktionen, einschließlich umfangreicher Benutzer- und Inhaltsverwaltung, die durch eine Reihe von Plugins, Themen, APIs usw. unterstützt wird.

Auch große Player unserer Branche nutzen WordPress. Websites wie Smashing Magazine und CSS-Tricks verwenden WordPress, wenn auch in beiden Fällen stark angepasste Instanzen. Die Arbeit mit WordPress kann jedoch eine mühsame Aufgabe sein, insbesondere wenn es um die Anpassung und Optimierung der Leistung geht.

Ich habe 2015 einen kleinen Blog gestartet. Mein erster Instinkt war, WordPress zu verwenden. Es gab mir eine Starthilfe, da ich bereits mit WordPress arbeitete. Ich habe ein neues Droplet auf DigitalOcean als Server erstellt, Vesta als Hosting Control Panel eingerichtet und WordPress als Blog-Plattform installiert. Letztendlich habe ich ein brandneues WordPress-Theme entworfen und entwickelt. Nur der Inhalt fehlte.

Ich wusste, dass ich einige Tipps zu Atom teilen wollte, da ich damals diesen großartigen Editor benutzte. Ich habe einige Artikel darüber veröffentlicht und sie mit der Community geteilt.

Anfangs habe ich der Performance nicht so viel Aufmerksamkeit geschenkt, weil ich mich zu sehr auf den Inhalt konzentriert habe. Nach einer Weile bemerkte ich einige Leistungsprobleme. Die Punktzahl bei Google PageSpeed ​​Insights war miserabel, also habe ich hart daran gearbeitet, meine Website zu reparieren und zu optimieren, und eine fast perfekte Punktzahl von 99/100 erreicht:

• Ich bin von Nginx+Apache auf Nginx+PHP-FPM umgestiegen.

• Ich habe CloudFlare für Geschwindigkeit und Schutz verwendet.

• Ich habe Cloudinary zum Hosten von Bildern verwendet.

• Ich habe mein Design optimiert und Critical CSS verwendet.

Die einzige Warnung betraf ein Google Analytics-Caching-Problem, von dem ich damals nicht wusste, wie ich es beheben sollte.

Aber was ist, wenn 99/100 oder 100/100 immer noch nicht die gewünschte Leistung bringen? Hier kommen statische Seitengeneratoren ins Spiel.

Geben Sie Static Page Generators und Hexo ein

Was ist also ein Static-Site-Generator?

Wie der Name schon sagt, ist ein statischer Website-Generator ein System, das statische HTML-Dateien generiert. Das Bereitstellen statischer HTML-Dateien ist viel schneller als das Erstellen von Seiten im laufenden Betrieb. Es gibt kein Server-Rendering oder Kompilieren, was oft zu einer Verzögerung beim Laden der Seite führt.

Wenn es um Performance geht, muss man an Caching denken. Obwohl es mehrere Techniken zum Caching von WordPress gibt, ist dies normalerweise keine einfache Aufgabe, im Gegensatz zum Caching statischer Dateien. Das Bereitstellen von zwischengespeicherten Dateien ist leistungsfähiger als das Bereitstellen tatsächlicher Dateien vom Server und kann beim Laden von Websites Zeit sparen.

Im Juni dieses Jahres stellte Vitaly Friedman vom Smashing Magazine JAMstack in einem Workshop in meiner Stadt vor. Ich hatte noch nie davon gehört und war sehr fasziniert. Nachdem das Seminar beendet war, studierte ich dieses neue Konzept ein wenig und mir wurde klar, wie großartig es ist. Mir wurde klar, dass meine Website kein WordPress benötigt.

Der erste Schritt bestand darin, zu entscheiden, welcher statische Seitengenerator verwendet werden sollte. Mir war nicht bewusst, wie viele es sind. Ich beschloss, das Hexo-Blog-Framework auszuprobieren. Es kann auf Netlify bereitgestellt werden, verfügt über ein Plugin zur Migration von WordPress und verwendet Node.js, mit dem ich vertraut bin, im Gegensatz zu Jekyll und Hugo, die auf Ruby bzw. Go basieren. Und wie ich später entdeckte, ist es blitzschnell.

Migration von WordPress zu Hexo

Die Hexo-Installation ist so einfach wie möglich. Installieren Sie hexo-cli global mit npm, führen Sie den Befehl hexo init aus, installieren Sie npm-Abhängigkeiten und voila:

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

Um die Migration durchzuführen, installieren Sie das Hexo-Migrator-Wordpress-Plugin. Dieses Plugin erwartet XML-Dateien als Quelle. XML-Dateien können über das WordPress-Exporttool exportiert werden, das im Administrationsbereich unter Tools -> Export -> Wordpress zu finden ist. Geben Sie abschließend den Hexo-Migrationsbefehl ein, um den Import abzuschließen.

 hexo migrate wordpress <source>

Es bleibt nur noch, das Ergebnis zu überprüfen. Führen Sie den Hexo-Serverbefehl aus, um den Server zu starten, und öffnen Sie den Browser unter der angegebenen Adresse.

 hexo server

Markdown und seine Grenzen

Hexo unterstützt Markdown standardmäßig. Markdown ist eine Auszeichnungssprache, die viele verwenden, um README-Dateien, Kommentare und Beiträge zu formatieren. Aber es könnte auch zum Schreiben Ihres Artikels verwendet werden. Seine Syntax ist intuitiv und leicht zu erlernen.

Ein weiterer Vorteil von Markdown ist, dass es sauberes und gültiges HTML generiert. Dadurch können Entwickler saubere und wartbare CSS-Regeln für die Gestaltung von Blogartikeln und -seiten erstellen.

Das Leben eines Entwicklers ist nie einfach. Wir stoßen oft auf Probleme, die dazu führen können, dass wir Zeit mit unerwarteten Dingen verbringen. Wenn wir dabei etwas lernen, dann haben wir diese Zeit nicht vergeudet, und das ist gut so. Dasselbe ist mir passiert. Ich dachte, alles lief gut, weil es keinen Kompilierungsfehler gab, aber dann bemerkte ich, dass einige Dinge nicht wie erwartet funktionierten.

Beispielsweise wurden Codepen-Demos nicht geladen. Ich habe nach einem Hexo-Plugin gesucht und eines gefunden. Leider war dieses Plugin nicht offiziell und erzeugte HTML-Fehler, die nicht akzeptabel waren. Ich wollte einen Beitrag leisten und die Probleme beheben, aber der letzte Pull-Request war mehr als anderthalb Jahre lang ungelöst. Ich entschied, dass es einfacher wäre, das Repository zu forken, die Probleme zu beheben und das Plugin auf der Hexo-Seite zu veröffentlichen, damit jeder es verwenden kann. Das Plugin wurde akzeptiert, ich habe den Inhalt aktualisiert und die Codepen-Demos funktionierten wie am Schnürchen.

Ähnliche Probleme traten bei CanIUse-Einbettungen auf. Jetzt, da ich wusste, wie man ein Hexo-Plugin erstellt, gab es keine Entschuldigung, es nicht zu tun. Mein Hexo-Caniuse-Plugin wurde ebenfalls veröffentlicht, ebenso wie mein Hexo-Cloudinary-Plugin für responsive Bilder, die von Cloudinary CDN geladen wurden.

Neugestaltung und Optimierung

Das Design der Website ist eher grundlegend. Hexo bietet eine Handvoll Themes kostenlos auf der offiziellen Website an, aber ich wollte ein einzigartiges Theme für meine Hexo-Site. Nachdem ich die Dokumentation gelesen und gelernt hatte, wie man Hexo anpasst, begann ich, ein originelles Design von Grund auf neu zu entwickeln.

Um neue Templates zu erstellen, habe ich mich entschieden, EJS für das Templating zu verwenden. Da ich noch nie mit EJS gearbeitet habe, sah ich es als Chance, die neue Template-Syntax zu lernen. Wenn Sie EJS nicht mögen, bietet Ihnen Hexo Swig-, Haml- oder Pug-Unterstützung über Plugins.

Während des Redesign-Prozesses habe ich genau auf die Leistung geachtet. Indem wir Best Practices befolgen, können wir unsere statische Website noch weiter beschleunigen. Das Platzieren von JavaScript-Dateien am Ende des Dokuments und die Verwendung der Critical CSS-Technik schaffen die beste Erfahrung für Ihr Publikum.

SEO-Optimierung ist entscheidend für die Sichtbarkeit von Blogs in Suchmaschinen wie Google. Hexo hat einen eingebauten Helfer zum Einfügen von Open Graph-Daten. Hexo verwendet YAML-Dateien zum Speichern der Site- und Designkonfiguration. Ich habe die Theme-Konfigurationsdatei verwendet, um den Site-Namen, die Beschreibung und verschiedene soziale IDs zu konfigurieren.

Das Hinzufügen von Gulp oder Webpack zu Ihrem Build-Prozess ist immer hilfreich und wird empfohlen. Ich habe Gulp verwendet, um CSS- und JavaScript-Dateien zu verkleinern und zu komprimieren, und alles war bereit. Ich könnte es einsetzen.

Netlify

Netlify ist eine Plattform, die Hosting für Websites und Apps mit blitzschneller Leistung bietet. Es vermarktet sich selbst als einheitliche Plattform, die Code automatisiert, um leistungsstarke und einfach zu wartende Websites zu erstellen.

Geben Sie einfach Ihren Code ein und wir kümmern uns um den Rest.

Wie zu erwarten, ist die Konfiguration der Website unkompliziert:

1. Richten Sie die Domäne ein.

2. Ändern Sie die DNS-Einträge.

3. Aufbau und Bereitstellung einrichten.

4. Aktivieren Sie SSL.

Als alles eingerichtet war, führte ich eine Handvoll grundlegender Tests durch, um die Ergebnisse zu sehen, darunter Pingdom Website Speed ​​Test, Web Page Test und Testmysite.io. Die Ergebnisse waren ausgezeichnet, da die Website bei jedem Tool die höchsten Punktzahlen erzielte.

CloudFlare

Trotz der hervorragenden Ergebnisse wollte ich CloudFlare ausprobieren, nur um zu sehen, wie sehr es die Website zusätzlich beschleunigen würde. CloudFlare kann anfangs überwältigend sein, aber zu lernen, wie man es benutzt, ist von grundlegender Bedeutung. Nachdem ich CloudFlare konfiguriert hatte, führte ich die Tests erneut durch und die Ergebnisse waren sogar noch besser.

Der letzte Test war Google PageSpeed ​​Insights. Die Punktzahl betrug sowohl für die Mobil- als auch für die Desktop-Version fast 100 %. Das Problem war das Google Analytics-Browser-Caching. Ich konnte das Problem mithilfe der CloudFlare-App für Google Analytics beheben.

Wie viel kostet es?

Die Nutzung von Hexo auf Netlify mit CloudFlare kostet nichts.

Hexo ist eine Open-Source-Plattform, also ist es kostenlos, egal wie Sie sich entscheiden, es zu verwenden. Es hat eine große Community und ist laut StaticGen der drittbeliebteste Open-Source-Generator für statische Seiten.

Netlify hat einen offenen Plan, der uns großartige Optionen für unser Hosting bietet. Bilder werden auch auf Cloudinarys Open Plan gehostet. Der kostenlose Plan von CloudFlare ermöglicht es uns, eine große Anzahl von Regeln zu konfigurieren, die Ihre bereits schnelle Website beschleunigen können. Es ermöglicht uns auch, das Caching-Problem des Google Analytics-Browsers zu beheben. Ich habe auch nicht für die Domain bezahlt, da ich eine kostenlose persönliche Domain verwendet habe, die von der Regierung bereitgestellt wurde.

Dieses Projekt-Setup reduzierte mein Budget auf ein Minimum. Wenn Sie erweiterte Funktionen für Ihr Projekt benötigen, können Sie mit einem Generator für statische Seiten immer noch ein paar Dollar sparen.

Das Bereitstellen von zwischengespeicherten Dateien bedeutet, dass die CPU- und Bandbreitenauslastung reduziert wird, was wiederum bedeutet, dass Sie günstigere Hosting-Pläne mit weniger leistungsstarker Hardware verwenden können. Nicht nur das, Ihre Website wird viel schneller sein, was bedeutet, dass Ihre Benutzer sowohl auf mobilen als auch auf Desktop-Geräten gerne surfen werden. Und da sich die Seitenladegeschwindigkeit auf die Platzierungen in der Google-Suche auswirken kann, wird Ihre Website einen höheren Rang einnehmen und noch mehr Besucher gewinnen.

All dies bedeutet, dass Sie einen Teil Ihres Budgets anderweitig ausgeben könnten – zum Beispiel für die Werbung für Ihre Website oder die Erstellung zusätzlicher Inhalte, die dazu beitragen, ein bisschen mehr Umsatz zu erzielen.

Der Fall für Static-Site-Generatoren

Die Migration von WordPress zu einem statischen Seitengenerator ist keine einfache Aufgabe und definitiv nicht etwas, was jeder WordPress-Benutzer tun sollte. Hexo machte diesen Übergang jedoch dank seiner Plugins, der hervorragenden Dokumentation und einer einfachen API relativ schmerzlos.

Bevor Sie entscheiden, ob Sie Ihr Produkt auf eine statische Lösung migrieren möchten oder nicht, müssen Sie sich der Einschränkungen bewusst sein, die mit statischen Seitengeneratoren einhergehen, z. B. Inhaltsbeschränkungen, Markdown-Lernkurve und Versionskontrolle.

Sie sollten sich auch darüber im Klaren sein, dass Hexo ein Blog-Framework ist. Es ist perfekt für Entwickler und Techniker, die wissen, wie man einen Texteditor und ein Terminal verwendet. Wenn Sie Ihre Inhalte gerne über eine Weboberfläche verwalten, gibt es ein Plugin, das diese Funktionalität ebenfalls bietet. Es heißt hexo-admin und ist sehr beliebt.

Wenn Sie WordPress bereits verwenden, sollten Sie innehalten und darüber nachdenken, welche Funktionen von WordPress Sie gerade verwenden und welche unverzichtbar sind. Haben Sie eine komplizierte Inhaltsstruktur? Nutzt du die Benutzerverwaltung? Verwenden Sie viele Plugins auf Ihrer WordPress-Instanz und sind sie alle notwendig? Sind Sie mit der Leistung Ihrer Website zufrieden?

Wenn die Antwort auf die meisten oder alle dieser Fragen nein lautet, dann sind Sie bereit, Ihre Website mit einem statischen Seitengenerator zu optimieren. Abhängig vom Anwendungsfall und Ihren Anforderungen können statische Seiten dazu beitragen, die Effizienz zu maximieren und gleichzeitig die Kosten zu minimieren. Wenn Sie andererseits Flexibilität von WordPress fordern, ziehen Sie einen solchen Schritt wahrscheinlich nicht einmal in Betracht.