Was ist GitHub Pages?

In dieser Lerneinheit erfahren Sie, wie Sie eine GitHub Pages-Website erstellen und pflegen.

GitHub Pages sind statische Websites, die direkt aus Ihrem GitHub-Repository gehostet werden, aber sie sind mehr als nur eine Sammlung statischer Dateien. Unter Verwendung von Technologien zum Generieren von Websites wie Jekyll und Liquid definieren Entwickler dynamische Vorlagen, aus denen vollständige statische Websites erstellt werden. Immer wenn Sie eine Änderung an den der Website zugeordneten Quellbranch committen, wird die Website mit den neuesten Aktualisierungen neu generiert und automatisch unter der Ziel-URL veröffentlicht.

Erfahren Sie mehr über Veröffentlichungsquellen für GitHub Pages-Websites.

Aktivieren von GitHub Pages

Der erste Schritt der Verwendung von GitHub Pages besteht in der Aktivierung über die Registerkarte Settings (Einstellungen) Ihres Repositorys. Sie können entweder den main-Branch verwenden oder den darin enthaltenen Ordner docs angeben. Sollten Sie GitHub Pages deaktivieren wollen, ist dies hier ebenfalls möglich.

Auswählen eines Designs mit Jekyll

Jekyll ist der Generator für statische Websites, mit dem GitHub aus dem Inhalt Ihres Repositorys Ihre Website erstellt. Neben dem hohen Komfort in Bezug auf die Inhalte bietet Jekyll auch eine Standardkonvention für Designs. Diese Standardisierung von Stilen ermöglicht austauschbare Designs, die Sie in der GitHub Pages-Konfiguration auswählen können.

GitHub bietet verschiedene Designs. Darüber hinaus sind zahlreiche kommerzielle Designs und Open-Source-Designs über die Jekyll-Community verfügbar.

Erfahren Sie mehr über Jekyll-Designs.

Verwenden eines YAML-Front-Matters

Der Begriff Front Matter bezeichnet YAML-Metadaten, die dem Inhalt einer Datei vorausgehen. Bei Jekyll umfassen diese Metadaten Generatoranweisungen zur Angabe des Layoutstils einer Markdown-Seite (z. B. post oder page). Es sind möglicherweise auch Seitenmetadaten enthalten, z. B. der Titel des Dokuments oder Seiteninhaltsvariablen wie der Autor eines Blogbeitrags.

Im folgenden Beispiel wird das Layout post verwendet: In diesem Beispiel wird davon ausgegangen, dass es eine Datei _layouts/post.html gibt, in der der HTML-Code für den Container definiert wird. Bei Hinzufügung der entsprechenden HTML-Dateien im Ordner _layouts können auch weitere Layoutoptionen angegeben werden.

---
layout: post
title: This is set as the document title.
---

This is visible body content, which might use Markdown, HTML, and Liquid templating.

Erfahren Sie mehr über das Front Matter.

Anpassen Ihrer Website

Sobald Ihre Website in Betrieb ist, können Sie Details über _config.yml anpassen. Diese Datei enthält nahezu alle websiteweiten Konfigurationsoptionen, einschließlich Websitemetadaten, Navigationsmenüs, Designfarben, Compileroptionen und vieles mehr.

Erfahren Sie mehr über die Konfiguration über _config.yml.

Erstellen und Bearbeiten von Inhalten

Das Erstellen und Bearbeiten von Seiten auf Ihrer Website erfolgt über die GitHub-Standardbenutzeroberfläche. Die Dateien, die Sie für Ihre GitHub Pages-Website verwenden, profitieren von allen Vorteilen wie andere Dateien in Ihrem GitHub-Repository. Sie können sie mit beliebigen Tools bearbeiten, Branches erstellen und mergen und mit Issues oder Pull Requests verknüpfen.

Neben Markdown und HTML unterstützt Jekyll die Syntax der Vorlagensprache Liquid. Mit Liquid können Benutzer Variablen und einfache logische Flowkonstrukte dynamisch in ihre Inhaltsdateien einzufügen. Das Endprodukt der Kompilierung ist Standard-HTML-Code.

Das folgende Beispiel zeigt eine Kombination aus einer for-Schleife und einer Variableneinfügung.

<ul>
  {% for post in site.posts %}
    <li>
      <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

Erfahren Sie mehr über die Vorlagensprache Liquid.

Arbeiten mit Blogbeiträgen

Auch wenn Jekyll nicht mit einer Datenbank arbeitet, wird das Bloggen durch eine bestimmte Konvention dennoch unterstützt: _posts/2020-06-25-blog-post-name.md. Wie Sie sich daraus wahrscheinlich ableiten können, werden alle Blogbeiträge im Ordner _posts gespeichert und verwenden die gezeigte Datums- und Namenskonvention. Während der Kompilierung verarbeitet Jekyll die Dateien in diesem Ordner, um eine Liste der HTML-Blogbeiträge zu erstellen.

Das folgende Beispiel zeigt die Struktur eines einfachen Blogbeitrags. Es enthält Metadaten für subtitle, tags und comments. Das von Ihnen ausgewählte Design unterstützt diese Metadaten möglicherweise nicht.

---
layout: post
title: Blog post title rendered by theme
subtitle: Blog post subtitle rendered by theme
tags: welcoming
comments: true
---

This is the first line of rendered content in the post.

Weitere Informationen finden Sie unter Inhalte zur GitHub Pages-Website mit Jekyll hinzufügen.