Eine Jekyll-Website erstellen – Teil 1 von 3: Eine statische Website in Jekyll konvertieren

Der folgende Beitrag ist ein Gastbeitrag von Mike Neumegen von CloudCannon. Mike und ich sprachen über die Erstellung einer kleinen Serie zum Erstellen von Jekyll-Websites, worauf ich natürlich sofort einging, da Jekyll großartig ist und mehr Wissen über statische Website-Generatoren eine gute Sache ist. Vollständiger Offenlegung halber: Mikes Firma CloudCannon ist ein CMS auf Jekyll-Basis. Als Teil dieser Serie wird er Ihnen zeigen, wie Sie dies nutzen können, daher habe ich darum gebeten, dass es ein gesponserter Beitrag wird.

Statische Website-Generatoren sind nicht mehr nur ein Werkzeug für persönliche Blogs von Entwicklern. Viele Unternehmen setzen auf statische Technologie für ihre öffentlich zugänglichen Websites, darunter Netflix, GitHub und Atlassian.

Jekyll ist der beliebteste statische Website-Generator. Er nimmt Quelldateien entgegen und generiert eine Website aus statischen Seiten im Voraus, die direkt an die Benutzer ausgeliefert werden können. Dies unterscheidet sich von der Funktionsweise eines herkömmlichen CMS wie WordPress. WordPress verwendet eine serverseitige Sprache und eine Datenbank, um eine Seite zu generieren, wenn diese von einem Benutzer angefordert wird.

In dieser Serie behandeln wir die Grundlagen der Entwicklung von Websites mit Jekyll. Wir beginnen mit der Konvertierung einer statischen Website in Jekyll, fügen ein CMS für Nicht-Entwickler mit CloudCannon hinzu und erstellen dann ein kommentarsystem mit Firebase.

Dieses Tutorial erstellt eine Website für ein fiktives Café namens Coffee Cafe. Hier ist eine Demo.

Jekyll installieren

Jekyll ist ein Befehlszeilentool, das vor der Verwendung installiert werden muss.

OS X

$ gem install jekyll -v 2.4.0

Ubuntu

$ apt-get install ruby ruby-dev make gcc nodejs
$ gem install jekyll -v 2.4.0

Windows

Windows wird nicht offiziell unterstützt, aber es gibt eine Umgehungslösung.

Setup

Laden Sie die Quelldateien für Coffee Cafe herunter, wenn Sie folgen möchten.

Führen Sie Jekyll aus, um die Website zu erstellen und anzuzeigen. Navigieren Sie im Terminal zum Verzeichnis und führen Sie aus

$ cd path/to/site/files
$ jekyll serve

jekyll serve erstellt die statische Website im Verzeichnis _site im selben Ordner und startet lokal einen Webserver. Navigieren Sie in Ihrem Browser zu https://:4000, um Coffee Cafe anzuzeigen.

Jekyll-Layouts

Wiederholender Inhalt ist das größte Problem einer rein statischen Website. Jekyll-Layouts lösen dieses Problem. Ein Layout ist eine HTML-Datei im Ordner `_layouts` mit Platzhaltern für Inhalte.

Ein Layout erstellen

In Coffee Cafe sind div.content und title die einzigen Elemente, die sich pro Seite ändern. Der einfachste Weg, ein Layout zu erstellen, ist das Kopieren einer bestehenden HTML-Datei. Kopieren Sie `index.html` nach `_layouts/default.html` und ersetzen Sie den Inhalt von div.content durch {{ content }}.

</header>

<div class="content">
    {{ content }}
</div>

<footer>

{{ content }} ist ein Liquid-Tag, der Teil der Vorlagensprache von Jekyll ist.

Ein Layout festlegen

Um `index.html` das Standardlayout zuzuweisen, verwenden wir Front Matter, einen YAML-Schnipsel am Anfang der Datei zwischen drei Bindestrichen.

Um das Layout von `index.html` festzulegen

1. Aktualisieren Sie den Inhalt der Datei, sodass nur der Inhalt von div.content enthalten ist
2. Fügen Sie layout: default zum Front Matter hinzu

---
layout: default
---
<section class="hero">...</section>
<div class="container">...</div>
<section class="cta">...</section>

Die Indexseite wird mit dem Standardlayout generiert und der Dateiinhalt wird anstelle von {{ content }} eingefügt. Die Website sollte genauso aussehen wie zuvor. Wiederholen Sie den gleichen Vorgang für alle anderen HTML-Dateien.

Seitenvariablen verwenden

Um den title jeder Seite anzupassen, legen wir eine Front-Matter-Variable auf jeder Seite fest und verwenden sie im Layout. Fügen Sie die Variable title zu `index.html` hinzu

---
layout: default
title: Home
---
...

Geben Sie die Variable in _layout/default.html mit Liquid aus

...
<title>{{ page.title }}</title>
...

Der Titel-Tag ändert sich nun zwischen den Seiten. Dies reduziert unnötige Duplizierung auf der Website, sodass Sie zukünftige Änderungen an einem Ort vornehmen können.

Bloggen

Das Hinzufügen von Beiträgen ist fast der gleiche Vorgang wie das Hinzufügen einer Seite. Beiträge sind Markdown- oder HTML-Dateien im Ordner `_posts` mit einem Dateinamen, der mit :year-:month-:day-:title.:extension formatiert ist.

Beiträge schreiben

Der Inhalt eines Beitrags ist derselbe wie bei einer Seite: ein Front-Matter-Header und der Inhalt der Datei. Erstellen Sie eine Datei namens `_posts/2016-01-01-what-is-coffee.md`, fügen Sie dann das Front Matter hinzu, gefolgt vom Inhalt des Beitrags.

---
layout: post
title: What is Coffee?
category: Information
---
Coffee is a brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant. The Coffea plant is native to subtropical Africa and some islands in southern Asia. The plant was exported from Africa to countries around the world and coffee plants are now cultivated in over 70 countries, primarily in the equatorial regions of the Americas, Southeast Asia, India, and Africa. The two most commonly grown are the highly regarded arabica, and the less sophisticated but stronger and more hardy robusta. Once ripe, coffee beans are picked, processed, and dried. Green (unroasted) coffee beans are one of the most traded agricultural commodities in the world. Once traded, the coffee beans are roasted to varying degrees, depending on the desired flavor. Roasted beans are ground and brewed to produce coffee as a beverage.

Source / Read more [Wikipedia](https://en.wikipedia.org/wiki/Coffee).

Diese Trennung von Markup und Daten ist Kern der Jekyll-Philosophie. Dies ermöglicht die Wiederverwendung des Inhalts an jeder Stelle der Website.

Ein Beitrags-Layout erstellen

Das obige Beispiel verwendete ein neues Layout namens post. Dieses Layout erweitert das Standardlayout und fügt beitragsbezogene Elemente hinzu, wie z. B. das Veröffentlichungsdatum und die Kategorie. Um dies in Jekyll zu erreichen, geben wir ein Layout innerhalb eines Layouts an. Kopieren Sie Folgendes in `_layouts/post.html`

---
layout: default
---
<div class="container">
  <h2 class="spacing">{{ page.title }}</h2>

  <div class="blog-post spacing">
    <p class="summary">{{ page.category }}<span class="date">{{ page.date | date: '%B %d, %Y' }}</span></p>
    {{ content }}
  </div>
</div>

Mithilfe von Liquid geben wir jede Variable aus dem Front Matter aus, genau wie wir title oben ausgegeben haben. Die Datumsvariable wird mit einem Liquid-Filter formatiert.

Beiträge auflisten

Der letzte Schritt ist das Auflisten der Blogbeiträge in blog.html. Verwenden Sie eine Liquid for-Schleife, um für jeden Beitrag in site.posts ein Element zu erstellen

---
layout: default
title: Blog
---
<div class="container">
  <h2 class="spacing">Blog</h2>

  <div class="blog-posts">
    {% for post in site.posts %}
      <div class="blog-post spacing">
        <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
        <p class="summary">
          {{ post.category }}
          <span class="date">
            {{ post.date | date: '%B %d, %Y' }}
          </span>
        </p>
        {{ post.excerpt }}
      </div>
    {% endfor %}
  </div>
</div>

Jekyll stellt integrierte Variablen bereit, die hier verwendet werden und nicht im Front Matter definiert sind

• url ist die generierte URL für den Beitrag, die normalerweise /:categories/:year/:month/:day/:title.html lautet, aber es gibt viele Konfigurationsoptionen
• excerpt ist ein Ausschnitt aus dem Anfang des Beitragsinhalts
• content wird hier nicht verwendet, aber es zeigt den gesamten Inhalt des Beitrags an, genau wie {{ content }} in den Layouts

Alles erledigt

In wenigen Minuten sind wir von einer statischen Website zu einer Jekyll-Website mit einem Blog gelangt. Hier ist ein Download-Link für die finale Jekyll Coffee Cafe Website.

Bleiben Sie dran in den nächsten Tagen, während wir diese Website mit leistungsstarken Bearbeitungsfähigkeiten und Funktionen aufwerten.