So erstellst du eine Jamstack-Website mit Publii und netlify

Du wolltest immer schon eine Jamstack-Seite, aber das war dir mit Hugo, Jekyll, Github und Kommandozeile zu kompliziert?

Im folgenden zeige ich dir, wie du schnell, einfach und kostenlos eine hochperformante Webseite mit Jamstack baust - ohne Tracker und mit schlankem CO2-Fußabdruck. Es dauert höchstens 10 Minuten und ist ganz einfach.

Publii installieren

Lade und installiere zunächst Publii, eine einfach zu bedienende Open Source Software zum Erstellen und Publizieren statischer Jamstack-Websites.

Publii übernimmt die CMS-Funktion für Deine Webseite.

netlify Konto erstellen 

Erstelle dir anschließend ein kostenloses Konto bei netlify. du musst nach der Mailbestätigung ein paar Fragen beantworten dazu, was du bei netlify anstellen möchtest, und dann ist das Nutzerkonto fertig eingerichtet.

Netlify ist ein Cloud-Computing-Unternehmen, das u.a. Hosting für statische Websites anbietet. Netlify hat sich zum Ziel gesetzt, seine Rechenzentren mit erneuerbaren Energien zu betreiben, konnte dies gleichwohl allerdings erst teilweise umsetzen.

Netlify übernimmt das Hosting und die Auslieferung für Deine Jamstack-Seite.

Publii starten

Öffne nun Publii auf Deinem Computer. Gebe der Website einen Namen und trage Deinen Namen im Feld für den Autor ein. 

Text schreiben 

Anschließend kannst du dir einen Editor aussuchen für die Bearbeitung Deiner Website. Wähle WYSIWYG und erstelle Deinen ersten Artikel im Editor. Du kannst Text formatieren, außerdem Links und Bilder einfügen.

Falls du von einem WordPress Blog wechselst, können Artikel über die WP Import Option unter dem Menüpunkt Tools importiert werden.

Oben links gibt es einen Button, mit dem eine Vorschau für die Website im Browser generiert werden kann (das Layout lässt sich später noch ändern). Wenn du zufrieden bist mit dem Text, kannst du Ihn speichern und gelangst zurück ins Menü.

Website Einstellungen festlegen

• Unter "Site Settings" setzt du die Sprache für die Webseite auf Deutsch. 

• Wechsele im Menü auf "Theme", dort setzt du unter Hero Section die gewünschte Überschrift für Deine Website ein und ggf. ein Bild, dessen Höhe du im Feld Heigth als Prozentziffer eingibst. Du kannst zudem auswählen, ob du als Autor auf der Startseite angezeigt werden möchtest. 

• Unter den Theme Einstellungen kannst du zudem den Link zu getpublii.com im Footer löschen und unter "Post Options" die gewünschten Meta-Informationen für Texte ein- und ausblenden. 

• Falls du kein Blog betreiben möchtest, sondern nur eine kurze Informationsseite, klicke unter "Layout" auf Selected Post und wähle den Text aus, der erscheinen soll.

Server konfigurieren

Wenn du fertig bist, musst du die Website einmalig manuell in netlify importieren. Klicke dazu unten links in Publii auf "Configure Server" und wähle zip aus (das Symbol mit dem Reißverschluss).

Wähle anschließend "Use relative URLs" und als Output "ZIP archive". Wenn du nun links im Menü auf "Sync your website" klickst, wird Deine Website als Archiv in den Download Ordner auf Deinem Computer heruntergeladen.

Die zip-Datei kannst du dann in netlify unter "Sites" per Drag and Drop installieren. Unter Site Settings kannst du die Subdomain festlegen, unter der die Website veröffentlicht werden soll (du kannst bei Bedarf - auch später noch - ebenso eine eigene Domain nutzen).  

Seite live schalten

In den netlify "Site details" findest du eine API ID, die du kopieren solltest zusammen mit deiner Website URL für netlify, in meinem Falle einfach.netlify.app.

Kehre nun zurück zu Publii und klicke in den Sync Settings unten links auf "Change Server Type". Wähle nun netlify aus, trage Deine netlify Website URL ein (relative URLs dafür deaktivieren), sowie Deine API ID unter Site ID.

Zusätzlich brauchst du noch einen Token, den du einfach in Deinem netlify Account oben rechts unter User Settings / Applications generieren kannst. Wenn du alles eingetragen hast, kannst du die Verbindung testen und nun die Website gleich aus Publii auf netlify publizieren und auch zukünftig ganz einfach auf Knopfdruck aktualisieren. 

Jamstack-Website anschauen

Hier findest du meine Website, inkl. dieser Anleitung. Ganz hübsch, nicht wahr?

Die Seite setzt keine Tracker (Test), hat einen sehr schlanken CO2-Footprint (Test) und zudem eine anständige Performance (Test). 

Mit Jamstack und Publii wirst du an deiner Webseite schneller und produktiver arbeiten können. Gleichzeitig ist das System z.B. ggü. WordPress Websites einfach wartbar und besitzt ohne Plugins und Tuning gute Ladezeiten.

Viel Spaß mit Deiner neuen Jamstack-Website.