Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

zu erstellen

Willkommen beim MakeUseOf-Handbuch zur Verwendung eines statischen Site-Generators. In diesem Leitfaden erfahren Sie, was ein Static Site Generator (SSG) ist, warum Sie einen verwenden möchten und wie Sie damit eine brandneue Site erstellen können. Einige der Details, die wir erkunden werden:

Diese Anleitung steht als PDF zum kostenlosen Download zur Verfügung. Download Verwenden Sie jetzt einen Static Site Generator, um eine schnelle Website zu erstellen . Fühlen Sie sich frei zu kopieren und teilen Sie dies mit Ihren Freunden und Familie.

Inhaltsverzeichnis

  • Einführung in statische Site Generators (SSGs)
    Warum sollten Sie ein SSG verwenden? | Wie funktionieren SSGs? | Welche populären SSGs sind verfügbar? | Auswählen einer SSG
  • Vorbereiten der Installation von Jekyll
    Vorteile einer lokalen Installation | Vorteile einer Remote-Installation | Voraussetzungen
  • Jekyll-Installation
    Installieren von Ruby unter Linux | Installieren (Aktualisiert) Ruby auf macOS | Installieren von Ruby unter Windows | Installieren von Jekyll
  • Projekteinrichtung und -struktur
    Erstellen eines Jekyll-Projekts | Die Jekyll-Struktur kennenlernen
  • Jekyll-Inhaltserstellung
    Vorschau Ihrer Site | Aktualisieren der About-Seite | Aktualisieren der Site-Konfiguration | Erstellen neuer Inhalte in Markdown
  • Erstellen und Bereitstellen von Build | Deploy
  • Jekyll Theming
  • Jekyll Plugins

Einführung in statische Site Generators

In den letzten Jahren gab es ein Wiederaufleben von statischen Websites. Viele moderne Websites verwenden ein Content-Management-System Alles, was Sie über WordPress und andere CMS wissen müssen Alles, was Sie über WordPress und andere CMS wissen müssen Für den durchschnittlichen Internet-Surfer ist das Anzeigen von Inhalten einfach. Sie öffnen einen Link und die Seite wird angezeigt. Aber was passiert hinter den Kulissen? So kümmern sich Ihre Lieblings-CMSs um Ihr Geschäft. Lesen Sie mehr (CMS), das eine Kombination aus Scripting und Datenbankinhalt beinhaltet, um seine Seiten dynamisch zu erstellen.

Im Gegensatz dazu werden die Seiten für statische Websites erstellt und dann auf einen Webhost hochgeladen. Es klingt irgendwie altmodisch, nicht wahr? Ja, aber das ist eine gute Sache.

Warum sollten Sie ein SSG verwenden?

In den frühen Tagen des Internets wurden Webseiten erstellt, indem jede Seite als Datei erstellt und dann die Dateien auf einen Server hochgeladen wurden. In der heutigen Welt der Datenbanken und ausgefallenen Admin-Panels mag das etwas veraltet wirken. Aber eine Kombination von zwei Trends hat zu der steigenden Popularität von SSGs geführt.

  • Erstens haben viele nicht-technische Autoren, die mit dem Web arbeiten (wie Blogger) leichte Markup-Sprachen wie Markdown What Is Markdown? 4 Gründe, warum Sie es jetzt lernen sollten Was ist Markdown? 4 Gründe, warum Sie es jetzt lernen sollten Ermüdet von HTML und WYSIWYG-Editoren? Dann ist Markdown die Antwort für Sie, egal wer Sie sind. Lesen Sie mehr sehr beliebt. Als die Leute sich daran gewöhnten, Inhalte in diesen Formaten zu produzieren, wurden SSGs zu einem bequemen Werkzeug, um daraus eine Website zu machen.
  • Zweitens verursacht die Komplexität von CMS-Systemen manchmal Leistungs- und Sicherheitsprobleme. Der traurige Zustand der Sicherheit personenbezogener Daten im E-Commerce Der traurige Zustand der Sicherheit personenbezogener Daten im E-Commerce Viele dieser Händler schulden ihr ganzes Wesen im Internet, sind jedoch nicht in der Lage, selbst den grundlegendsten Datenpraktiken zu folgen. Lesen Sie mehr (z. B. für einfache Blogs ohne eine Menge Funktionalität ist eine statische Website im Vergleich zum Overhead eines CMS attraktiv).

SSGs haben noch weitere Vorteile. 7 Gründe, Ihr CMS abzulegen und einen statischen Site Generator in Betracht zu ziehen 7 Gründe, Ihr CMS abzulegen und einen statischen Site Generator in Erwägung zu ziehen Viele Jahre lang war die Veröffentlichung einer Website schwierig für viele Benutzer. CMS wie WordPress haben das geändert, aber sie können immer noch verwirrend sein. Eine andere Alternative ist ein Static Site Generator. Lesen Sie mehr, einschließlich der Fähigkeit, am Ende des Tages offline und eine sehr schnelle Website zu arbeiten. Wo Static-Site-Generatoren sich nicht auszeichnen, ist die Erstellung sehr interaktiver Websites. Wenn Sie Nutzern erlauben möchten, sich auf Ihrer Website zu einem Kommentar zu äußern. Sollten Sie Kommentare zu Ihrer Website zulassen? Die Vor-und Nachteile sollten Sie Kommentare auf Ihrer Website zulassen? Die Vor- und Nachteile Sollten Sie Kommentare auf Ihrer Website oder in Ihrem Blog zulassen? Auf der einen Seite können Sie argumentieren, dass qualitativ hochwertige Inhalte qualitativ hochwertige Kommentare fördern; Auf der anderen Seite gibt es immer jemanden mit etwas Negativem, um … Lesen Sie mehr, oder sogar erstellen Sie ihre eigenen Seiten, ein SSG möglicherweise nicht die beste Option. Ebenso, wenn Sie suchen, pr zu verkaufenProdukte Die 5 besten Möglichkeiten, um einen Web-Shop zu erstellen Die 5 besten Möglichkeiten, um einen Web-Store zu erstellen Wir führen Sie durch einige große Vorteile und Fallstricke der Erstellung und den Betrieb Ihres eigenen Webshops und geben Ihnen einen Vorsprung auf dem Weg zu digitalen Unternehmerin. Lesen Sie mehr, ermöglichen Sie es Benutzern, sich gegenseitig zu melden oder an Dokumenten zusammenzuarbeiten. Aber wenn Sie nach einem einfachen Weg suchen, Inhalte vor Ihre Zielgruppe zu bringen, sind SSGs eine gute Option.

Wie funktionieren SSGs?

Moderne CMS verwenden einen ähnlichen Ablauf wie die folgenden:

  • Der Site-Besucher fordert eine Webseite vom Server an.
  • Der Server akzeptiert die Anfrage und bestimmt, wonach der Benutzer sucht.
  • Der Server assembliert den Inhalt mit Skripten, die hauptsächlich eine Datenbank abfragen.
  • Der Server sendet den Inhalt in Form einer Webseite an den Benutzer zurück, die im Browser angezeigt wird.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Im Gegensatz dazu verzichten statische Sites auf all diese Komplexität, indem sie die Seiten vorher erstellen. Dann fragt der Browser eines Besuchers einfach nach der Seite, und der Server gibt die Seite zurück.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Daher können Sie sich SSGs im Wesentlichen als Publishing-Tools vorstellen. Sie erstellen Inhalte, führen ein SSG aus und konvertieren diesen Inhalt in Webseiten. Anschließend laden Sie diese Seiten mit einer beliebigen Anzahl verfügbarer Methoden auf einen Webserver hoch.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Klang gut? Wenn Sie interessiert sind, werfen Sie einen Blick auf einige der beliebtesten SSGs, und sehen Sie, was sie zu bieten haben.

Welche populären SSGs sind verfügbar?

Die Website StaticGen ist eine führende Ressource für statische Site-Generatoren. Es bietet eine umfangreiche Liste der verfügbaren, sowie ein Ranking-System auf der Grundlage von Benutzer Stimmen sowie Github Gabeln Was ist Git & Warum sollten Sie Versionskontrolle verwenden Wenn Sie ein Entwickler sind Was ist Git & Warum sollten Sie die Versionskontrolle verwenden, wenn Sie ein Entwickler sind? Als Webentwickler arbeiten wir oft auf lokalen Entwicklungsseiten und laden dann einfach alles hoch, wenn wir fertig sind. Dies ist in Ordnung, wenn es nur Sie und die Änderungen sind klein, … Lesen Sie mehr.

Sie können in der Auflistung nachsehen, welche Programmiersprache das SSG verwendet, und eine Zusammenfassung seiner Funktionen anzeigen. Basierend auf diesen Auflistungen untersuchen wir einige führende SSGs basierend auf den untenstehenden Attributen.

  • Programmiersprache: Dies beschreibt die Sprache, in der das SSG-Tool selbst geschrieben wird Welche Programmiersprache zu lernen – Web-Programmierung Welche Programmiersprache zu lernen – Web-Programmierung Heute wir Ich werde mir die verschiedenen Programmiersprachen des Internets anschauen. Dies ist der vierte Teil einer Anfänger-Programmierserie. In Teil 1 lernten wir die Grundlagen von … Read More. Dies ist sehr wichtig für CMS-Anwendungen, da die Webserver-Umgebung dies unterstützen muss. Es ist immer noch etwas wichtig für SSGs, aber Sie haben in der Regel mehr Flexibilität in was Sie können und können nicht auf Ihrem eigenen Rechner installieren.
  • Templating-Sprache: Die Template-Sprache ist die Sprache, die zum Erstellen der Struktur von Seiten sowie zum Ausführen einer gewissen Automatisierung (z. B. Anzeigen der einer bestimmten Seite zugewiesenen Tags) verwendet wird. Dies kann wichtig sein, wenn Sie bereits mit einem und nicht einem anderen vertraut sind.
  • (Native) Eingabeformate: Welche Text-Markup-Formate können Sie verwenden, um Ihren Inhalt zu erstellen?
  • (Native) Ausgabeformate: Wir konzentrieren uns auf das Generieren von Websites, daher ist HTML (plus CSS / Javascript) eine Selbstverständlichkeit. Einige Generatoren können jedoch auch andere Formate wie PDF ausgeben.
  • Features:   Es gibt weitere nützliche Funktionen, die das SSG enthalten kann. Ein häufiges Beispiel ist, wenn es blog bewusst ist, ” Mit dieser Option können Sie Inhaltsdateien Tags und Datumsangaben hinzufügen und die resultierenden Seiten in einer blogähnlichen Struktur anordnen.

Diese Tabelle fasst die obigen fünf führenden SSGs zusammen:

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Auswählen eines SSG

Wie bei jeder Anwendung sollten Sie einen der verfügbaren Generatoren auswählen, basierend auf 1) wie gut er Ihre Anforderungen unterstützt und 2) ersten Tests. Wenn ich mir die obige Tabelle anschaue, springen drei meiner Optionen als gute heraus.

Jekyll ist das beliebteste von ihnen, und am weitesten unterstützt in Bezug auf verfügbare Themen, Plugins, etc. Auf der anderen Seite, ich mag die größeren Content-Modelle in Hugo, sowie die Möglichkeit, den Org-Modus als Eingabe zu verwenden. Die Möglichkeit, eine Website als ein PDF-Buch über GitBook zu exportieren, ist ebenfalls ansprechend.

Letztendlich habe ich mich für Jekyll entschieden, da ich einige der fehlenden Funktionen über Plugins erreichen kann. Aber der entscheidende Faktor ist, dass es in Ruby geschrieben ist, und Web-Hosts sind eher Ruby als Hugo Go Programmiersprache zu unterstützen. (“ Aber warte, ich dachte, das wäre ein lokales Programm! „Es ist oder kann es zumindest sein. Wie wir im nächsten Abschnitt sehen werden, gibt es dafür Vor- und Nachteile.)

Vorbereitungen zur Installation von Jekyll

Nachdem wir uns nun für Jekyll entschieden haben, lassen Sie uns alles einrichten. Die folgenden Abschnitte helfen Ihnen, zu entscheiden, wo Sie den Generator selbst installieren möchten und welche vorausgesetzte Software Sie benötigen.

Im Gegensatz zu einem CMS haben Sie eine gewisse Flexibilität, wo Sie die statische Site Generator-Anwendung selbst installieren. Denken Sie daran, diese Systeme sind nicht wirklich , um die Seiten den Besuchern der Site zu liefern. Sie nehmen Inhalte in einem Format und wandeln sie in HTML um. Daher können Sie das SSG entweder installieren:

  • Lokal (dh auf denselben Computern, auf denen Sie auch Inhalte verfassen)
  • Remote (dh auf dem Server, auf dem Ihre Site lebt)

Vorteile einer lokalen Installation

Der größte Vorteil von Wenn Sie Ihr SSG lokal installieren, können Sie leicht eine Vorschau anzeigen, bevor Sie es veröffentlichen. Ihre SSG nimmt Ihre Klartext-Inhalte und spuckt HTML-Versionen aus, auf die alle Arten von Visualisierungen angewendet werden. Es ist sehr nützlich, in der Lage zu sein, Ihre Site in einem Browser zu erstellen und eine Vorschau davon zu erstellen (mehr dazu später), bevor Sie sich über das Kopieren auf einen Server Gedanken machen. Das folgende Bild zeigt den Hugo-Server, auf dem   — Beachten Sie, wie es den gesamten Inhalt erstellt, dann einen Webserver startet und Ihnen die URL zur Verfügung stellt, um es anzuzeigen:

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Wie erwähnt, eine lokale Installation möglicherweise die einzige verfügbare Option. Ihre Webhosting-Umgebung unterstützt möglicherweise nicht die Basisprogrammiersprache. Eine Größe passt nicht für alle: Warum Software nicht universell kompatibel ist Eine Größe passt nicht für alle: Warum Software nicht universell kompatibel ist Software ist auf jedem Betriebssystem gleich , Recht? Falsch. Es könnte genauso aussehen und funktionieren ähnlich, aber es ist anders hinter den Kulissen. Lesen Sie mehr von der SSG. Zum Beispiel, ohne Unterstützung für Ruby können unsere Jekyll-Befehle nicht ausgeführt werden, und daher können Sie Ihre Site nicht aufbauen. Sie sollten jedoch keine Probleme bei der Installation von Voraussetzungen auf Ihrem eigenen Rechner haben, es sei denn, Sie haben keine Administratorrechte. Wie man Administratorrechte auf Windows erhält Wie man Administratorrechte auf Windows erhält Benötigen Sie Administratorrechte auf Ihrem PC? Wir zeigen Ihnen, was Ihre Administratorrechte einschränkt und wie Sie die Kontrolle über Windows wiederherstellen können. Weiterlesen .

Vorteile einer Remote-Installation

Auf der anderen Seite können Sie die SSG auf dem Server installieren. In diesem Fall sieht Ihr Workflow etwa wie folgt aus: 1) Schreiben von Rohdaten, 2) Verschieben von Rohdaten auf den Server und 3) Ausführen der SSG, um Rohdaten in HTML zu konvertieren. Einige der Vorteile dieses Ansatzes sind die folgenden:

  • Eine Reihe von Voraussetzungen: Installieren Sie die SSG an einem Ort bedeutet, dass Sie nur durch seine Arbeit arbeiten müssen   Installation einmal.
  • Eine Installation zur Verwaltung: SSGs werden, wie alle Software, neue Versionen veröffentlichen, und Sie müssen diese aktualisieren, wenn Sie diese neuen Funktionen wünschen. Wenn Sie mit Ihrem SSG auf mehreren Rechnern arbeiten, müssen Sie diese einzeln aktualisieren. Wenn Sie Ihr SSG jedoch auf einem zentralen Server betreiben, müssen Sie es nur einmal aktualisieren.
  • Plattformunabhängigkeit beim Authoring: Wenn Sie auf einer Vielzahl von Geräten arbeiten, bedeutet ein Remote-SSG, dass Sie sich nur um das Authoring kümmern müssen. Und da Sie im Klartext verfassen, können Sie so ziemlich jedes beliebige Gerät verwenden. Sie könnten beispielsweise Posts mit einem Texteditor auf Ihrem Android-Telefon verfassen, sie dann prüfen und Grafiken auf einem Windows-Computer hinzufügen. Und Sie können sogar alles mit einer der vielen plattformübergreifenden Dateisynchronisierungslösungen synchronisieren. 6 Cross-Platform & Kostenlose Datei-Sync-Tools 6 Cross-Plattform & Kostenlose Tools zur Dateisynchronisierung Wenn Sie den Komfort des Zugriffs auf Ihre Dateien überall benötigen, ohne Hardware mit sich herumtragen zu müssen, werden Dateisynchronisierungstools zu einem Muss. Lesen Sie mehr da draußen.

Auf der einen Seite überwiegt die Möglichkeit, die Site vor dem Veröffentlichen von Änderungen in der Vorschau anzuzeigen, bei Weitem die Vorteile einer Remote-Installation. Wenn Sie also nur einen auswählen, gehen Sie zur lokalen Installation.

Aber denken Sie daran, dass die beiden sich gegenseitig nicht ausschließen. Es gibt nichts, was verhindertSie von der lokalen Installation (z. B. auf Ihrer Windows-Maschine) für einen normalen „Standard“ ” Workflow, sondern auch eine Installation auf Ihrem Server für Notfall-Posts von Ihrem Handy.

Voraussetzungen

Um eine SSG im Allgemeinen nutzen zu können, benötigen Sie Folgendes:

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

  • Ein Editor, der Inhalte im Klartext schreiben kann. Ablenkungsfrei Schreib in Frieden mit diesen ablenkungsfreien Redakteuren Schreibe Frieden mit diesen ablenkungsfreien Redakteuren Ich habe es gespürt. Visuelles Durcheinander – Dank Menüs und anderen Markup-Funktionen – habe oft den Block meines Verfassers zementiert. Also habe ich ziemlich viele ablenkungsfreie Texteditoren in einem großartigen … Read More Editoren sind eine gute Wahl (Lightpaper für den Mac Lightpaper ist ein kostenloser Tabbed Markdown Editor für Mac Lightpaper ist ein kostenloser Tabbed Markdown Editor für Mac Verwenden Sie immer noch Microsoft Word, um für das Web zu schreiben? Sie tun es falsch. Lesen Sie mehr ist im Bild oben abgebildet).
  • Eine Webhosting-Umgebung Die besten Webhosting-Services Die besten Webhosting-Services Suchen Sie nach den besten Webhosting-Services für Ihre Bedürfnisse? Ob Sie einen Ort benötigen, um Ihren kleinen persönlichen Blog oder eine große Unternehmens-Website zu hosten, diese Liste ist für Sie. Weiterlesen .
  • Internetzugang, um Inhalte in Ihre Hosting-Umgebung zu übertragen.

Wenn Sie den Typ der Person angeben, die ein SSG über einen der „“ Punkte und ” Site-Building-Services 10 Wege, um eine kleine und einfache Website ohne Overkill 10 Möglichkeiten, eine kleine und einfache Website ohne Overkill WordPress erstellen kann ein Overkill sein. Wie diese anderen ausgezeichneten Dienste beweisen, ist WordPress nicht das A und O der Website-Erstellung. Wenn Sie einfachere Lösungen wünschen, können Sie aus einer Vielzahl auswählen. Lesen Sie mehr, Sie haben wahrscheinlich alle diese Dinge bereits. Darüber hinaus müssen Sie die Softwareanforderungen erfüllen. Für Jekyll sind dies:

  • Ruby Version 2.2.5 oder höher
  • RubyGems, ein Format zum Packen Ruby-basierte Anwendungen
  • GCC und make, ein Open-Source-Software-Compiler (keine Sorge, Sie müssen sich darüber keine Gedanken machen, aber Jekyll verwendet es im Hintergrund)

Jekyll-Installation

Installation von Ruby unter Linux

Auf Unix-basierten Betriebssystemen wie Linux sind die Voraussetzungen ein Kinderspiel: einige einfache Befehlszeileninstallationen . Unter Ubuntu und seinen Ableitungen das folgende APT-Kommando Ein Anfängerleitfaden zum Installieren von Software in Ubuntu mit APT Ein Anfängerhandbuch zum Installieren von Software in Ubuntu mit APT Wenn Sie Ubuntu benutzt haben, haben Sie wahrscheinlich irgendwann den Befehl apt benutzt. Aber wussten Sie, dass es so viel mehr gibt als apt-get install und apt-get upgrade? Read More wird die Ruby-Sprache für Sie eingerichtet:

sudo apt install ruby ruby-dev

Dies wird die Ruby-Sprache sowie die Entwicklungswerkzeuge installieren, die dazu benötigt werden gehe mit einigen Gems um. Edelsteine ​​sind das Ruby-Paket-Format, und die Installation einiger von ihnen wird sie tatsächlich an Ort und Stelle bauen. Aber keine Sorge, die Installateure kümmern sich darum.

Sobald Ruby vorhanden ist, können Sie Jekyll installieren, wie in „Installieren von Jekyll“ beschrieben. Abschnitt unten.

Ruby auf macOS installieren (aktualisiert)

macOS wird mit Ruby ausgeliefert. Leider ist diese Version (zumindest in High Sierra) 2.0.0 und reicht daher nicht aus, um Jekyll auszuführen.

Der einfachste Weg zur Installation ist über das Homebrew-Projekt , das ein Befehlszeilen-Tool zur Verfügung stellt Mac-Software vom Terminal mit Homebrew installieren Mac-Software vom Terminal mit Homebrew installieren (fast ) eine kostenlose Mac-App, indem Sie vier Wörter eingeben und „Enter“ drücken. Lesen Sie mehr, um viele nützliche Open-Source-Programme zu installieren. Es ist nicht anders als MacPorts, die wir in der Vergangenheit auf MUO untersucht haben MacPorts bringt die beste Open-Source-Software auf Ihren Mac MacPorts bringt die beste Open-Source-Software auf Ihren Mac Der Mac ist ein hervorragender Host für viele Open-Source-Communities besten kostenlosen Tools, und MacPorts ist Ihr „App Store“ für all diese großartige Software Lesen Sie mehr.

Holen Sie zuerst Homebrew base installiert, indem Sie Folgendes in die Terminal-Anwendung einfügen. Es wird ein Installer heruntergeladen und ausgeführt, derwird den Prozess weiter erklären, wie es weitergeht:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Verwenden Sie als Nächstes den Befehl brew , um eine aktualisierte Version von Ruby zu installieren, die Jekyll unterstützt:

brew install ruby

An dieser Stelle vergewissern Sie sich, dass Sie das Terminal schließen & erneut öffnen. — Es wird die aktualisierte Ruby-Version (im folgenden Bild gezeigt) aufgenommen. Dann führen Sie die Installation mit dem Befehl in „Installieren von Jekyll ” unten.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Ruby unter Windows installieren

Windows ist kein formal unterstütztes Ziel für Jekyll. Nichtsdestotrotz gibt es mehrere Möglichkeiten, es zu installieren, einige weniger schmerzhaft als die für Macs.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

  • Erstens können Sie über ein standardmäßiges .EXE-Installationsprogramm installieren. Das RubyInstaller-Projekt unterstützt die neueste Version 2.5.0. Durch Doppelklicken auf die Datei (siehe oben) wird ein bekannter Installationsassistent ausgeführt.
  • Alternativ können Sie Chocolatey, einen Paketmanager für Windows, verwenden, um Ruby zu installieren. Folgen Sie unserer vorherigen Anleitung zur Installation von Chocolatey Chocolatey: Installieren Sie Windows-Programme von einer Befehlszeile Chocolatey: Installieren Sie Windows-Programme von einer Befehlszeile Read More, dann installieren Sie Ruby mit dem Befehl choco install ruby ​​.
  • Schließlich, wenn Sie das neueste Windows 10 ausführen, können Sie Ubuntu aus dem Windows Store installieren. Ubuntu ist jetzt im Windows Store verfügbar. Ubuntu ist jetzt im Windows Store verfügbar. Windows Insider können jetzt Ubuntu herunterladen und installieren auf Windows 10. Das bringt Linux und Windows in einer unheiligen Verbindung zusammen, von der sich nur wenige jemals vorstellen konnten, dass sie lange genug leben würden, um Zeuge zu werden. Weiterlesen . Dann können Sie Ruby mit dem oben erwähnten APT-Befehl installieren, zusätzlich zu all den Open-Source-Eigenschaften, die Ubuntu bietet.

Jekyll installieren

Sobald Sie Ruby installiert haben, können Sie den Befehl gem auf allen drei Plattformen verwenden, um Jekyll und alle seine Abhängigkeiten zu installieren (ungefähr 25 insgesamt):

gem install jekyll

Hinweis: Unter Ubuntu müssen Sie die obigen Schritte mit sudo ausführen, um systemweit zu installieren. Während eine Nur-Benutzer-Installation möglich ist, fand ich es problematisch.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Schließlich können Sie die Installation und Version von Jekyll mit folgenden Angaben bestätigen:

jekyll -v

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Wenn das funktioniert hat, kannst du in den nächsten Abschnitt gehen und deine erste Jekyll-Seite einrichten.

Projekteinrichtung und -struktur

Erstellen eines Jekyll-Projekts

Nachdem Sie nun Jekyll installiert haben, wird Ihr erster Schritt darin bestehen, ein Projekt einzurichten. Dies stellt eine einzelne Site dar, die Sie mit Jekyll erstellen und verwalten möchten. Der folgende Befehl erstellt ein neues Projekt in Ihrem aktuellen Verzeichnis:

jekyll new awesome-site

Dies erstellt ein neues Verzeichnis namens awesome-site . Lassen Sie sich eingraben und machen Sie sich damit vertraut.

Die Jekyll-Struktur kennenlernen

Die Jekyll-Projektstruktur enthält eine Reihe von Schlüsseldateien und Unterverzeichnissen wie folgt:

  • _posts: Wie der Name andeutet, werden hier Blogposts platziert. Blogposts unterscheiden sich von “ reguläre Seiten ” Sie enthalten ein Datum, das ihnen hilft, sie zu sortieren, sowie optionale Kategorien, um sie zu sortieren. Im Abschnitt Content Authoring untersuchen wir dies genauer.
  • _config.yml: Dies ist die Konfigurationsdatei Ihrer Site, die im YAML-Format geschrieben wurde. YAML ist eine Auszeichnungssprache, die für strukturierte Informationen verwendet wird und ein gängiges Format für Konfigurationen ist. Wir werden einige davon ändern, wenn es an der Zeit ist, mit der Erstellung unseres Inhalts zu beginnen.
  • 404.html: Wie bei anderen Systemen wird die 404-Seite angezeigt, wenn Besucher unbekannte URLs anfordern.
  • Gemfile: Dies ist eine Ruby-Konfigurationsdatei. Wir fügen dies später bei der Installation zusätzlicher Komponenten hinzu, aber für den Moment nehmen Sie keine Änderungen daran vor.
  • index.md: Wenn Sie mit Webservern im Allgemeinen vertraut sind, sollte dies Ihnen bekannt vorkommen. Wenn ein Benutzer zu einer URL geht (wie „www.makeuseof.com“), wird ein typischer Webserver versuchen, entweder < index.html ” oder “ index.php. ” Diese Markdown-Datei wird in die „index.html ” unserer statischen Website.

Vielleicht bemerken Sie, dass eine Sache in dieser Liste fehlt … Seiten! Wie können Sie eine Site ohne Seiten haben?

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Sie können auch andere Dateien erstellen und faltenfür Ihre Website.                                 Sie können diese “ rohen ” Quelldateien entweder im Stammverzeichnis Ihres Projekts (z. B. die Datei „about.md“ im obigen Bild) oder in diesen beliebigen Ordnern. Alles, was fehlt, ist, dass wir tatsächlich etwas Inhalt schreiben. Wir werden uns im nächsten Abschnitt umdrehen und genau das tun.

Jekyll Content Authoring

Vorschau Ihrer Site

Das erste, was wir tun können, ist zu sehen, wie die Site aus der Box aussieht. Wie bereits erwähnt, ist einer der Vorteile der lokalen Installation von Jekyll die Verwendung des integrierten Web-Servers für die Vorschau unserer Site. Der folgende Befehl startet diesen Server und zeigt Ihnen, wie Sie Ihren Browser darauf hinweisen können.

Hinweis: Es ist wichtig, Jekylls Befehle aus dem Verzeichnis Ihres Projekts auszugeben (zB „/ home / aaron / Documents / awesome-site /“ in der unter Beispiel). Sonst werden Sie alle möglichen Fehler über fehlende Dinge bekommen, die nur so aussehen, weil Sie nicht am richtigen Ort sind.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Wie die Ausgabe sagt, können wir dies jetzt in einem Browser mit https://127.0.0.1:4080 öffnen. Und jetzt gibt es eine Seite, die uns zu Jekyll begrüßt, wie in der Abbildung unten gezeigt.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Aktualisierung der About-Seite

Aus dem obigen Bild können wir eine „Über“ -Markierung sehen. Link im Kopfmenü. Wenn du darauf klickst, erscheint eine Seite mit einem Haufen Gerümpel über Jekyll und sein Minima-Thema.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Aber das ist meine Seite! Lassen Sie uns dies ändern, um es zu personalisieren. Wir können dem “  about.md ” Datei im Stammverzeichnis unseres Projekts. Beachten Sie auch die “ Vorderseiten ” am Anfang der Datei, wo das „/ about / ” Die URL ist angegeben.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Aktualisieren Sie unsere Browser-Registerkarte (Jekyll Server wird unsere Änderungen in Echtzeit abholen), unsere Willkommensnachricht erscheint genau dort oben . Perfekt!

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Aber jetzt werden andere Dinge bemerkbar. Der Titel der Website lautet “ Dein ehrfürchtiger Titel ” anstelle von “ Mein ehrfürchtiger Titel. ” Und da ist etwas Quatsch über „_config.yml“ in der Beschreibung des Standortes. Lassen Sie uns sie reparieren.

Aktualisieren der Site-Konfiguration

Die Datei _config.yml (es ist wirklich wichtig und nicht Unsinn) enthält einige wichtige Informationen über unsere Site. Wie in der folgenden Abbildung zu sehen ist:

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Suchen und Anpassen der Dinge sind hier einfach, lassen Sie 1) den Titel ändern, 2) ändern Sie die Beschreibung und 3) entfernen Sie den GitHub-Link. Im Gegensatz zur Seitenänderung müssen wir den Server neu starten, um die aktualisierte Konfigurationsdatei mit Strg + C (zum Stoppen) und jekyll serve (um sie zu starten) aufzurufen wieder):

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Aber das Fummeln mit YAML ist nicht das, was wir wollten. Nein, wir möchten Inhalte in Formaten wie Markdown erstellen.

Neuen Inhalt in Markdown erstellen

Wie bereits erwähnt, besteht die Möglichkeit, Inhalte für die meisten statischen Site-Generatoren in Markdown zu erstellen. Diese sehr beliebte, leichtgewichtige Auszeichnungssprache erleichtert das Erstellen von Webseiten in einem Texteditor. Wir haben es schon einige Male auf MUO behandelt, einschließlich der Gründe, warum es sich lohnt zu lernen Was ist Markdown? 4 Gründe, warum Sie es jetzt lernen sollten Was ist Markdown? 4 Gründe, warum Sie es jetzt lernen sollten Ermüdet von HTML und WYSIWYG-Editoren? Dann ist Markdown die Antwort für Sie, egal wer Sie sind. Read More, solide Editoren für Windows 5 Sites und Apps für schnelles Lernen Markdown 5 Sites und Apps für schnelles Lernen Markdown Markdown ist das Standard-Schreibformat für viele. Gewöhne dich daran mit einigen Tools, die dir helfen, zu lernen und dann Markdown zu verwenden. Lesen Sie mehr, Mac und Linux auf der Suche nach einem Markdown-Editor für Linux? Versuchen Sie diese 3 Solid-Optionen Suche nach einem Markdown-Editor für Linux? Versuchen Sie, diese 3 Solid-Optionen Windows und Mac-Benutzer haben viele Markdown-Editoren zur Auswahl, Linux-Benutzer, weniger. Hier sind einige Möglichkeiten. Weiterlesen . Aber wenn Sie völlig neu zu Markdown, Michael Super Markdown Überblick lernen Markdown: Schreiben für das Web, schneller lernen Markdown: Schreiben für das Web, schneller Markdown ist die beste Möglichkeit, im Klartext zu schreiben, aber immer noch komplexe Dokumente erstellens. Im Gegensatz zu HTML oder LaTex ist Markdown zum Beispiel einfach zu erlernen. Lesen Sie mehr sollte Ihre erste Anlaufstelle sein, um die Einzelheiten zu lernen.

Sobald Sie es sich bequem gemacht haben, Markdown zusammenzustellen, können wir mit der Erstellung Ihres ersten Beitrags fortfahren. Erstellen Sie eine neue Nur-Text-Datei mit dem Namen „YYYY-MM-DD-your-title.md ” mit welcher Methode auch immer Sie möchten, wobei der erste Teil des Namens das Datum darstellt. Legen Sie die Datei in die “ _posts ” Verzeichnis, öffnen Sie es dann mit Ihrem bevorzugten Texteditor.

Raw Jekyll-Quelldateien sind meist Standard-Markdown, mit Ausnahme der Front-Sache . Dies ist eine Konfiguration, die am Anfang der Datei im YAML-Format angezeigt wird (siehe dazu, dass es beliebt ist). Das grundlegendste, was Sie von vorne zur Verfügung stellen können, ist der Titel des Posts. Sie sollten auch eines der verfügbaren Layouts Ihres Themas auswählen (“ post “ im folgenden Beispiel). Legen Sie diese in Ihre Markdown-Datei ganz am Anfang zwischen zwei Gruppen von drei Strichen:

---
title: "Testing Out Some Headings"
layout: post
---

Nach dem Schließen Die Front mit drei Strichen, Sie können den Rest des Inhalts in Standard Markdown schreiben. Es ist am besten, keine H1-Tags direkt zu verwenden, da Jekyll diese auf den oben definierten Titel anwenden wird. Aber das Hinzufügen einiger unterer Überschriften (zweiter und dritter Ebene) und anderer Texte (einschließlich einer Aufzählung) gibt uns eine ziemlich ausgearbeitete Seite.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

An diesem Punkt können Sie beginnen, Beiträge zu sammeln. Wenn du von deiner Jekyll-Seite nur einen einfachen Blog im Stil eines Blogs haben willst, dann hast du es. Einige weitere Schritte, die Sie in Erwägung ziehen könnten, sind (die Links führen Sie zu Ressourcen mit mehr Details):

  • Erstellen Sie andere statische Seiten wie die &ldquot; About ” Seite, die wir früher überarbeitet haben. Denken Sie daran, dass Sie die Quelldateien entweder im Stammverzeichnis des Projekts oder in von Ihnen definierten Unterordnern speichern können.
  • Kategorisieren von Seiten in der Front mit der “ -Kategorie ” Stichwort. Erstellen Sie anschließend Zielseiten, die jede Ihrer Kategorien filtern.
  • Organisieren Sie die Seiten mit dem „Permalink ”“ in einer Site-Struktur. Stichwort in der Front. So können Sie beispielsweise festlegen, dass das &ldquot; about.md ” in der Wurzel Ihres Projekts bekommt tatsächlich eine Adresse von “ awesome-site.com / über / „.

Mit diesem Wissen haben Sie alles, was Sie brauchen, um eine Website zu erstellen, die als Portfolio, persönlicher Blog oder sogar als kleine Geschäftsseite dient. Das Problem ist, bis jetzt, es ist immer noch auf Ihren Desktop beschränkt. Im nächsten Abschnitt erfahren Sie, was passiert ist, als Sie Ihre Website erstellt haben (Sie wussten nicht, dass Sie das getan haben, oder?). Wir sehen uns auch einige Methoden an, um das gebaute oder “ generierte ” Website, ins Internet.

Erstellen und Deployment

Erstellen

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Werfen Sie einen Blick auf den obigen Screenshot   — In der fünften Zeile werden Sie die Ausgabe „Generating …“ bemerken.

Um Ihre Website zu bedienen muss Jekyll zuerst erstellen . Dies bedeutet, dass alle Markdown-Dateien in HTML konvertiert werden müssen. Konvertieren zwischen verschiedenen Dokumentenformaten in Linux So konvertieren Sie zwischen verschiedenen Dokumentenformaten in Linux Die Umstellung auf Linux kann zu Problemen mit der Dateikompatibilität führen. Zum Beispiel sehen Dokumente in LibreOffice nicht gleich aus wie in Word. Dies ist nur ein Grund, warum Sie Pandoc brauchen. Lesen Sie mehr und fügen Sie die Seiten nach Bedarf zusammen (z. B. die Kategorieseiten, die wir bereits erwähnt haben). Der Befehl jekyll serve erstellt auch das Projekt für Sie. Aus diesem Grund mussten wir unseren Browser nur aktualisieren, um Änderungen zu sehen.

Wir können das Projekt auch manuell mit dem folgenden Befehl erstellen:

jekyll build

Wenn Sie Ihr Projekt erstellen, wird ein Unterverzeichnis namens _site </ erstellt. stark>. Es enthält das “ live “ Version Ihrer Website (wir besprechen, wie Sie dies im nächsten Abschnitt tun können). Es enthält eine Struktur, die der Hauptprojektstruktur ähnelt, aber ein wenig davon abweicht:

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Jekyll wird im Laufe des Projekts Schritte unternehmen einschließlich:

  • Markdown in HTML konvertieren.
  • Hinzufügen von “ eingeschlossenen ” Elemente wie Kopf- und Fußzeilen auf die Seiten der Website.
  • Ersetzen von dynamischen Snippets in den Vorlagen durch ihre Werte. Ein Beispiel ist das Erstellen einer Seite, indem Sie nach allen Blogposts suchen und eine Liste mit ihren Daten und Titeln ausfüllen.
  • Erstellen Sie, wo nötig, Navigation, wie die Ordner für Post-Kategorien („jekyll“ im obigen Bild) oder einen Menüeintrag für die” Über ” auf “ awesome-site.com / über / “ zeigen.

Am Ende dieses Prozesses können Sie den Inhalt der „_site“ einfach verschieben. Verzeichnis zu einer Webhosting-Umgebung.

Bereitstellen

Die von Jekyll generierten Websites müssen nicht mit einer ausgefallenen Datenbankinstallation arbeiten. Alles, was Sie tun müssen, ist den gesamten Inhalt der “ _site ” Verzeichnis auf Ihrem Web-Host. Es gibt eine Reihe von Methoden, die Sie dazu verwenden können, einschließlich:

  • Gerades manuelles Kopieren. Kein Aufhebens, nein Muss. Denken Sie daran, SFTP zu verwenden. What SSH Is & Wie es sich von FTP unterscheidet [Technologie erklärt] Was SSH ist & Wie unterscheidet es sich von FTP [Technologie erklärt] Lesen Sie mehr und nicht regelmäßig (unsicher) FTP.
  • Dateisynchronisation . Wenn Sie ein Synchronisierungstool finden 6 Cross-Platform & Kostenlose Datei-Sync-Tools 6 Cross-Plattform & Kostenlose Tools zur Dateisynchronisierung Wenn Sie den Komfort des Zugriffs auf Ihre Dateien überall benötigen, ohne Hardware mit sich herumtragen zu müssen, werden Dateisynchronisierungstools zu einem Muss. Lesen Sie mehr, das SFTP unterstützt (oder reguläres FTP, wenn Sie müssen ), können Sie es so einstellen, dass die “ _site ” Verzeichnis mit Ihrem Web-Root. Denken Sie daran, dass es sich um eine einseitige Synchronisierung von Ihrem Computer zum Webhost handelt. Rsync ist eine Option, die auf allen Plattformen verfügbar ist, und die Grsync Weitere Gründe, warum Grsync ein großartiges Synchronisierungstool ist [plattformübergreifend] Weitere Gründe, warum Grsync ein großartiges Synchronisierungstool ist [Cross-Platform] Verwenden Sie rsync, das ultimative Synchronisierungstool, ohne um Linux zu installieren oder die Befehlszeile zu lernen. Das ist der Reiz von Grsync, einer GUI-Version des beliebten Unix / Linux-Befehlszeilenprogramms rsync. Grsync ist nicht nur … Read More UI macht es einfach zu bedienen.
  • Versionskontrolle. Zu guter Letzt, für etwas, das sich so schnell und oft wie ein Blog ändert, sollten Sie das „rohe ” Inhalt mit Quellcodeverwaltung Verwalten Sie Ihre Dateiversionierung Wie ein Programmierer mit Git Verwalten Sie Ihre Dateiversionierung Wie ein Programmierer mit Git Programmierer erstellt Versionskontrollsysteme (VCS), um Dateiversionssteuerprobleme zu lösen. Lassen Sie uns die Grundlagen der Versionskontrolle mit Git heute betrachten. Weiterlesen . Eine Bereitstellungsoption besteht darin, auch die “ _site ” Verzeichnis unter der Quellcodeverwaltung.   Es ermöglicht Ihnen, “ git push ” Aktualisierungen an Ihrer Hosting-Umgebung, wenn Sie Inhalte erstellen oder überarbeiten. Oder, wenn Sie wirklich clever sind, können Sie einen Post-Commit-Hook in Ihrem Quellverzeichnis versuchen, der rsync verwendet, um aktualisierte Inhalte auf Ihren Web-Host zu kopieren.

An dieser Stelle haben Sie alles, was Sie zum Erstellen einer Website benötigen. Aber das ist nicht zu sagen, wir haben alles abgedeckt. Zum Beispiel ist das Standard-Minima-Thema ein wenig, gut … fehlt. Lass es uns mit etwas etwas schärferem aufpeppen.

Jekyll Theming

Am schwierigsten ist es, wenn Sie ein neues Thema für Ihre Jekyll-Site erhalten, indem Sie zwischen allen Optionen wählen. Es gibt Hunderte verfügbar. Probieren Sie die Jekyll Themes-Site für eine schöne, durchsuchbare Themengalerie aus. Sobald Sie sich für eines entscheiden, folgen Sie den Anweisungen auf seiner Website, um es zu installieren.

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Hinweis: Viele Themen sind als Ruby-Edelsteine ​​gepackt, was bedeutet, dass Sie das „Juwel“ nutzen können installiere ” Befehl, den wir früher benutzt haben. Dies ist jedoch immer noch in Arbeit. Alternativ können Sie bei einigen Designs manuell installieren.

Da große, vertikale Sidebar-Menüs cool sind, installieren wir das Hydeout-Theme. (Du findest viele Hinweise auf den klassischen Roman im gesamten Jekyll-Ökosystem.) Es ist als Ruby-Juwel verpackt, also kannst du es mit demselben Befehl installieren, mit dem wir Jekyll überhaupt installiert haben:

gem install jekyll-theme-hydeout

Erstelle dann eine neue Jekyll-Site und ändere die folgenden beiden auf 1) berücksichtige den Edelstein , der das Thema enthält, und 2 ) das -Thema auf die aktuelle Site anwenden. Ändern Sie zunächst die folgende Zeile in der Gemdatei:

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Ändern Sie nun die Einstellung in _config. yml , um Hydeout zu verwenden (mit dem Namen des Edelsteins, „jekyll-theme-hydeout“), der das aktive Thema der Site angibt:

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Starten Sie jetzt den Jekyll-Server neu (denken Sie daran, wir haben die Konfigurationsdatei berührt), und sehen Sie sich Ihr neues tolles Thema an:

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Jekyll Plugins

Diemes aren &nsquo; t die einzige Möglichkeit, Ihre Website zu verbessern. Jekyll-Plugins helfen dabei, Funktionen hinzuzufügen, die von neuen Eingabe- und Ausgabeoptionen, der automatischen Generierung von Inhaltsverzeichnissen oder der Einbettung eines Spotify-Web-Players reichen. 7 Gründe für den Start des Spotify Web Player heute 7 Gründe für den Einsatz des Spotify Web-Players Heute ist Spotify um Dinge durch die Desktop- und Web-App-Erfahrungen ähnlicher zu machen. Es ist also an der Zeit, dass sich viele von uns gefragt haben: Warum nicht einfach die Web-App benutzen? Weiterlesen . Es kann sogar einige der Funktionen bereitstellen, die wir als Nachteile von SSGs hervorgehoben haben, wie Kommentare (z. B. das Juwel „disqus-for-jekyll“ aktiviert den Disqus-Dienst).

Wir installieren ein Administrations-Panel für unsere Site und machen es zu einem „statischen Site-CMS“. ” Der „jekyll-admin ” Juwel hat diese Funktionalität … alles, was wir tun müssen, ist es zu installieren:

gem install jekyll-admin

Und dann aktivieren Sie es in unserem Gemfile nach den Anweisungen des Entwicklers:

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Fertig! Gehen Sie zum neuen Administrationsbereich Ihrer Website auf Ihrer eigenen Seite: 4080 / admin:

Verwenden Sie einen statischen Site Generator, um eine schnelle Website

Zusammenfassung

Zur Erinnerung, in Dieser Leitfaden hat gelernt:

  • Wie SSGs reinen Textinhalt nehmen und ihn in schön formatierte Webseiten umwandeln
  • Was die wichtigen Attribute von SSGs sind und wie Wählen Sie eine, die für Sie funktioniert
  • Wie Sie den Jekyll Static Site Generator unter Windows, Mac und Linux installieren
  • Wie Sie Ihr erstes Jekyll-Projekt starten und wie seine Struktur aussieht
  • So erstellen Sie Inhalte für Ihre Website mit der Markdown-Sprache und eine Vorschau der Ergebnisse
  • Wie Sie die Ausgabe von Jekyll nehmen und es von Ihrem lokalen Rechner zu einem Web-Host
  • So installieren und wählen Sie ein neues Jekyll-Design für Ihre Site
  • So installieren und verwenden Sie Add-ons, um Funktionen zu Jekyll hinzuzufügen

Bewaffnet damit Wissen sollten Sie in der Lage sein, Jekyll zu verwenden, um eine grundlegende, inhaltsorientierte Website schnell und einfach zu erhalten ly. Darüber hinaus wird diese Website schnell, sicher und einfach zu verwalten sein. Sie können Ihre Inhalte unabhängig von Ihrem Standort bearbeiten, unabhängig davon, ob Sie Zugang zum Internet haben oder nicht, und eine Vorschau Ihrer Arbeit anzeigen, als ob Sie online wären.

Sie können Ihre Website auf fast jedem Web-Host hosten, sogar mit sehr erschwinglichen und „nackten Knochen“ ” Pläne. Gleichzeitig können Sie moderne, gut aussehende Themen verwenden und sogar einige dieser CMS-Funktionen über Plugins hinzufügen.

Was halten Sie von SSG-basierten Websites? Ist es richtig für dich? Oder hört sich das alles zu kompliziert an und du bleibst lieber bei WordPress? Lass es uns in den Kommentaren wissen!

q , quelle

Zusammenhängende Posts:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.