Einrichten einer Jekyll-Entwicklungssite unter Ubuntu 16.04

Jekyll ist ein statischer Site-Generator, der einige der Vorteile eines Content Management Systems (CMS) bietet und gleichzeitig die Leistungs- und Sicherheitsprobleme vermeidet, die durch solche datenbankgesteuerten Sites verursacht werden. Es ist "blog-aware" und enthält spezielle Funktionen für den Umgang mit datumsorganisierten Inhalten, obwohl seine Nützlichkeit nicht auf Blogging-Sites beschränkt ist. Jekyll eignet sich besonders für Personen, die offline arbeiten, für die Inhaltspflege eher einfache Editoren als Webformulare verwenden und die Versionskontrolle verwenden möchten, um Änderungen an ihrer Website nachzuverfolgen.

In diesem Tutorial installieren wir eine Jekyll 3.7.3-Entwicklungssite unter Ubuntu 16.04. In späteren Lernprogrammen werden wir den hier generierten Inhalt untersuchen, eine statische Site auf demselben Server veröffentlichen und schließlich an einem Produktionsstandort bereitstellen.

Um diesem Tutorial zu folgen, benötigen Sie:

Sobald Sie diese Voraussetzung erfüllt haben, können Sie Jekyll und seine Abhängigkeiten installieren.

Zunächst aktualisieren wir unsere Paketliste, um sicherzustellen, dass wir die neuesten Informationen zu den neuesten Versionen von Paketen und deren Abhängigkeiten haben:

Dann installieren wir Ruby und seine Entwicklungsbibliotheken sowie "+ make " und " build-essential +", damit die Bibliotheken von Jekyll nach der Installation von Jekyll kompiliert werden:

Wenn dies abgeschlossen ist, werden wir Ihrer + .bashrc-Datei zwei Zeilen hinzufügen, um Rubys` + gem`-Paketmanager anzuweisen, Edelsteine ​​im Home-Ordner unseres Benutzers abzulegen. Dies vermeidet Komplikationen, die bei systemweiten Installationen auftreten können, und fügt den lokalen Befehl "+ jekyll " dem " PATH +" des Benutzers hinzu.

Öffnen Sie "+ .bashrc +", indem Sie Folgendes eingeben:

Fügen Sie am Ende der Datei die folgenden Zeilen hinzu:

Speichern und schließen Sie die Datei. Führen Sie Folgendes aus, um die Exporte zu aktivieren:

Danach installieren wir Jekyll selbst und Bundler, der die Gem-Abhängigkeiten verwaltet, mit "+ gem +":

Als Nächstes stellen wir sicher, dass unsere Firewall-Einstellungen den Datenverkehr zum und vom Jekyll-Entwicklungswebserver zulassen.

Zunächst überprüfen wir den Firewall-Status, um festzustellen, ob er aktiviert ist. In diesem Fall stellen wir sicher, dass der Datenverkehr zu unserer Website zulässig ist, damit wir unsere Entwicklungssite in einem Webbrowser anzeigen können.

In diesem Fall ist nur SSH erlaubt durch:

Möglicherweise gibt es andere Regeln oder gar keine Firewall-Regeln. Da in diesem Fall nur SSH-Datenverkehr zulässig ist, müssen wir Port 4000, den Standardport für den Jekyll-Entwicklungsserver, öffnen:

Überprüfen wir den Status noch einmal:

Jetzt sehen unsere Firewall-Regeln so aus:

Wenn die Software installiert und der erforderliche Port geöffnet ist, können Sie die Entwicklungssite erstellen.

In unserem Ausgangsverzeichnis verwenden wir den Befehl "+ new " von Jekyll, um ein Gerüst für eine Site in einem Unterverzeichnis mit dem Namen " www +" zu erstellen:

Der Befehl + jekyll new + startet + bundle install +, um die erforderlichen Abhängigkeiten zu installieren, und installiert automatisch ein Design mit dem Namen Minima. Nach erfolgreicher Installation sollte die Ausgabe folgendermaßen aussehen:

Jekylls Befehl + new + erstellt die folgenden Verzeichnisse und Dateien:

Dies sind nicht die eigentlichen Website-Dateien. Dies sind die Quelldateien, mit denen Jekyll die statische Site erstellt. Jekyll verwendet bestimmte Namen, Namensmuster und Verzeichnisstrukturen, um die verschiedenen Inhaltsquellen zu analysieren und zu einer statischen Site zusammenzufassen. Es ist wichtig, die vorhandene Struktur zu verwenden und die Namenskonventionen von Jekyll zu befolgen, wenn Sie neue Posts und Seiten hinzufügen.

Der integrierte, kompakte Webserver von Jekyll unterstützt die Website-Entwicklung, indem er die Dateien im Verzeichnis überwacht und die statische Website bei jeder Änderung automatisch neu erstellt. Da wir auf einem Remote-Server arbeiten, geben wir die Host-Adresse an, um die Site von unserem lokalen Computer aus zu durchsuchen. Wenn Sie auf einem lokalen Computer arbeiten, können Sie "+ jekyll serve " ohne die Hosteinstellung ausführen und eine Verbindung mit " http: // localhost: 4000 +" herstellen.

Als wir "+ jekyll serve " aufriefen, analysierte Jekyll die Konfigurations- und Inhaltsdateien in ein neues Verzeichnis, " _site ", und begann, den Inhalt in diesem " _site +" - Ordner bereitzustellen:

Außerdem wurde das aktuelle Verzeichnis "+ www " auf Änderungen überprüft. Sobald eine Änderung an einem Beitrag oder einer Seite gespeichert wird, wird die statische Site automatisch neu erstellt. Daher ist es wichtig, keine Änderungen direkt an Dateien im Ordner " _site +" vorzunehmen.

Wenn wir dieses Terminal geöffnet lassen, während der Entwicklungsserver bei der Arbeit an unserer Site im Vordergrund ausgeführt wird, erhalten wir sofortiges Feedback, wenn wir Seiten und Beiträge hinzufügen und Inhalte ändern.

Die Seite ist jetzt verfügbar. In einem Webbrowser können wir ihn unter der Serveradresse und dem Port aufrufen, die in der Ausgabe von "+ jekyll serve +" angegeben sind:

Bild: http: //assets.digitalocean.com/articles/jekyll-1604/jekyll_home_update.png [Screenshot der Jekyll-Homepage]

In diesem Tutorial haben wir Jekyll installiert und eine Entwicklungssite mit einigen automatisch generierten Inhalten erstellt. In unserem next guide werden wir diesen Inhalt untersuchen, um zu veranschaulichen, wie Jekyll die Quelldateien in eine statische Site umwandelt und die Entscheidungen über unsere Konfigurationseinstellungen.