Einführung
11ty ist ein NodeJS-basierter leistungsstarker statischer Site-Generator. In diesem Tutorial führe ich Sie Schritt für Schritt durch und zeige Ihnen, wie Sie 11ty auf Ihrem Ubuntu-System installieren und statische Websites generieren. Ich verwende Ubuntu 20.04 Edition. Alle Anweisungen und Befehle gelten nur für Ubuntu.
Voraussetzungen
Als Linux-Benutzer sollten Sie die folgenden beiden Pakete auf Ihrem System verfügbar haben.
~ NodeJS
~ NPM
Wenn Sie sie zu diesem Zeitpunkt nicht haben. Installieren Sie sie mit den folgenden Befehlen:
$ sudo apt update
$ sudo apt install node
$ sudo apt install npm
Ohne Node.js und NPM können Sie mit 11ty nicht weiterarbeiten.
Das Beste an 11ty ist, dass Sie es nicht wie andere Node-Pakete installieren müssen. Lassen Sie uns zunächst ein neues Verzeichnis erstellen, dorthin wechseln und es entsprechend initialisieren.
$ mkdir newEleventySite
$ cd newEleventySite/
$ npm init -y
11ty-Projekt installieren und erstellen
Schritt 1. Führen Sie nun einfach den folgenden Befehl aus, um ein neues Verzeichnis für Ihre statische 11ty-Site zu erstellen.
$ npm install --save-dev @11ty/eleventy
Sobald dies erledigt ist, wird 11ty in Ihrem neu erstellten Verzeichnis installiert. Es handelt sich um eine projektbezogene Installation. Ich habe mich nicht dafür entschieden, 11ty global zu installieren. Dies macht die Installation einfacher und überschaubarer.
Schritt 2. Führen Sie nun Eleventy aus und Sie werden sehen, dass einige Dateien geschrieben wurden. Ich habe keine Dateien, daher wird in diesem Stadium nichts passieren.
$ npx @11ty/eleventy
Wie Sie im obigen Bildschirm sehen können, habe ich 11ty erfolgreich ausgeführt. In dieser Phase funktioniert alles absolut einwandfrei. Wir haben so lange daran gearbeitet, und jetzt ist es an der Zeit, die Website zu erstellen und zu veröffentlichen. Davor brauchen wir eine Vorlage.
Erstellen Sie eine Vorlage
Schritt 3. Jetzt werde ich Ihnen helfen, eine Vorlage zu erstellen. Es ist einfach und es gibt nichts Kompliziertes auszuführen. Es ist lediglich ein Ausgangspunkt.
Hier ist der Code:
$ echo '<!doctype html><html><head><title>Page title</title></head><body><p>Hi</p></body></html>' > index.html
$ echo '# Page header' > README.md
Sobald die Vorlage fertig ist, können Sie Ihre Website vorerst veröffentlichen. Im obigen Screenshot sehen Sie, dass 11ty die beiden Seiten erfolgreich geschrieben hat.
Veröffentlichung der Website
Sobald die Vorlagenerstellung abgeschlossen ist, speichert 11ty die Website unter _site Mappe. Sie können alle exportierten Dateien nehmen und sie mit einem FTP-Client auf Ihrem Host veröffentlichen. Wie im Screenshot unten gezeigt, habe ich am Ende den Befehl –serve angehängt, um die Website zu veröffentlichen.
So sieht es im Browser aus.
Schlussfolgerung
In diesem Tutorial habe ich Sie durch die Installation von Eleventy geführt, einem netten statischen Site-Generator, der von NodeJS unterstützt wird. Diese Anleitung ist für Benutzer von Ubuntu 20.04. Ich schreibe ständig Artikel für verschiedene Distributionen. Ich lade Sie ein, sie zu lesen und mit Ihren Freunden und Ihrer Familie zu teilen.