Informationen zu GitHub Pages und Jekyll

Informationen zu Jekyll

Jekyll ist ein Generator für statische Websites mit integrierter Unterstützung von GitHub Pages und einem vereinfachten Build-Prozess. Jekyll erstellt aus Markdown- und HTML-Dateien eine statische Website und nutzt dabei die von Dir ausgewählten Layouts. Jekyll unterstützt Markdown und Liquid, eine Vorlagensprache, die dynamische Inhalte auf deiner Website lädt. Weitere Informationen findest du unter Jekyll.

Jekyll wird von Windows nicht offiziell unterstützt. Weitere Informationen findest du in der Jekyll-Dokumentation unter „Jekyll on Windows“.

Wir empfehlen, Jekyll mit GitHub Pages zu verwenden. Wenn du möchtest, kannst du aber auch andere Generatoren für statische Websites verwenden oder deinen eigenen Build-Prozess lokal oder auf einem anderen Server anpassen. Weitere Informationen findest du unter Informationen zu GitHub Pages.

Jekyll in der GitHub Pages-Website konfigurieren

Die meisten Jekyll-Einstellungen, z. B. das Design und die Plug-Ins Ihrer Site, können Sie durch Bearbeitung der Datei _config.yml konfigurieren. Weitere Informationen findest du in der Jekyll-Dokumentation unter „Configuration“.

Einige Konfigurationseinstellungen können für GitHub Pages-Websites nicht geändert werden.

lsi: false
safe: true
source: [your repo's top level directory]
incremental: false
highlighter: rouge
gist:
  noscript: false
kramdown:
  math_engine: mathjax
  syntax_highlighter: rouge

Standardmäßig erstellt Jekyll keine Dateien und Ordner, auf die Folgendes zutrifft:

Sie befinden sich in einem Ordner namens /node_modules oder /vendor.
Sie beginnen mit _, . oder #.
Sie enden mit ~.
Sie werden durch die Einstellung exclude in der Konfigurationsdatei ausgeschlossen.

Wenn du möchtest, dass Jekyll solche Dateien verarbeitet, kannst du dies mit der include-Einstellung in der Konfigurationsdatei festlegen.

Frontmatter

Um Variablen und Metadaten wie Titel und Layout für eine Seite oder einen Beitrag auf Deiner Seite zu setzen, kannst Du YAML-Titelei zuoberst in jeder Markdown- oder HTML-Datei hinzufügen. Weitere Informationen findest du in der Jekyll-Dokumentation unter Front Matter.

Du kannst site.github einem Beitrag oder einer Seite hinzufügen, um deiner Website Metadaten für Repositoryreferenzen hinzuzufügen. Weitere Informationen findest du in der Dokumentation zu Jekyll-Metadaten unter „Using site.github“.

Designs

Du kannst zu Deiner GitHub Pages-Website ein Jekyll-Design hinzufügen, um das Erscheinungsbild Deiner Website anzupassen. Weitere Informationen findest du in der Jekyll-Dokumentation unter „Themes“.

Du kannst deiner Website auf GitHub ein unterstütztes Design hinzufügen. Weitere Informationen findest du unter „Unterstützte Designs“ auf der GitHub Pages-Website und unter „Hinzufügen eines Designs zu deiner GitHub Pages-Website mit von Jekyll“.

Zur Verwendung eines beliebigen anderen auf GitHub gehosteten Open Source-Designs von Jekyll kannst du dieses manuell hinzufügen. Weitere Informationen findest du unter Auf GitHub gehostete Designs und Ein Design zur GitHub Pages-Website mit Jekyll hinzufügen.

Du kannst alle Standardeinstellungen deines Designs überschreiben, indem du die Dateien des Designs bearbeitest. Weitere Informationen findest du in der Dokumentation zu deinem Design und in der Jekyll-Dokumentation unter „Overriding your theme's defaults“.

Plug-Ins

Du kannst Jekyll-Plug-ins herunterladen oder erstellen, um die Funktionalität von Jekyll für deine Website zu erweitern. Mit dem Plugin jemoji kannst du beispielsweise GitHub-Emojis auf allen Seiten deiner Website genauso verwenden wie auf GitHub. Weitere Informationen findest du in der Jekyll-Dokumentation unter „Plugins“.

GitHub Pages verwendet Plug-ins, die standardmäßig aktiviert sind und nicht deaktiviert werden können:

Sie können zusätzliche Plug-Ins aktivieren, indem Sie das Gem des Plug-Ins der Einstellung plugins in der Datei _config.yml hinzufügen. Weitere Informationen findest du in der Jekyll-Dokumentation unter „Configuration“.

Eine Liste der unterstützten Plug-Ins findest du auf der GitHub Pages-Website unter „Abhängigkeitsversionen“. Informationen zur Verwendung eines bestimmten Plug-ins findest du in der dazugehörigen Dokumentation.

Tipp: Um sicherzustellen, dass du die aktuellen Versionen aller Plug-Ins verwendest, solltest du das GitHub Pages-Gem regelmäßig aktualisieren. Weitere Inforamtionen findest du unter GitHub Pages-Website lokal mit Jekyll testen und Abhängigkeitsversionen auf der GitHub Pages-Website.

GitHub Pages kann keine Websites mit nicht unterstützten Plug-ins erstellen. Wenn du nicht unterstützte Plug-ins verwenden möchtest, musst du deine Website lokal erstellen und die statischen Dateien der Website anschließend zu GitHub pushen.

Syntaxhervorhebung

Damit deine Website leichter lesbar ist, werden Codeausschnitte auf GitHub Pages-Websites ebenso markiert wie auf GitHub. Weitere Informationen zur Syntaxmarkierung in GitHub findest du unter Code-Blöcke erstellen und markieren.

Standardmäßig werden Codeblöcke auf deiner Website von Jekyll markiert. Jekyll verwendet den Rouge-Marker, der mit Pygments kompatibel ist. Wenn Sie Pygments in der Datei _config.yml angeben, wird stattdessen Rouge als Fallback verwendet. Jekyll kann keinen anderen Syntaxmarker verwenden. Wenn Sie einen anderen Syntaxmarker in der Datei _config.yml angeben, wird eine Buildwarnung für die Seite angezeigt. Weitere Informationen findest du unter Informationen zu Jekyll-Build-Fehler für GitHub Pages-Websites.

Wenn Sie einen anderen Marker, wie zum Beispiel highlight.js verwenden möchten, müssen Sie die Jekyll-Syntaxhervorhebung deaktivieren, indem Sie die Datei _config.yml des Projekts aktualisieren.

kramdown:
  syntax_highlighter_opts:
    disable : true

Wenn dein Design kein CSS für Syntaxhervorhebung enthält, kannst du GitHub-Syntaxhervorhebungs-CSS generieren und der style.css-Datei des Projekts hinzufügen.

rougify style github > style.css

Website lokal erstellen

Falls die Veröffentlichung über einen Branch erfolgt, werden Änderungen an deiner Website automatisch veröffentlicht, wenn sie in der Veröffentlichungsquelle deiner Website zusammengeführt werden. Falls die Veröffentlichung über einen benutzerdefinierten GitHub Actions-Workflow erfolgt, werden Änderungen bei jeder Auslösung des Workflows veröffentlicht (normalerweise durch einen Push an den Standardbranch). Wenn du zuerst eine Vorschau deiner Änderungen sehen möchtest, kannst du die Änderungen lokal vornehmen statt auf GitHub. Dann teste deine Website lokal. Weitere Informationen findest du unter GitHub Pages-Website lokal mit Jekyll testen.