Skip to main content

Informationen zu GitHub Pages und Jekyll

Jekyll ist ein Generator für statische Websites mit integrierter Unterstützung von GitHub Pages.

GitHub Pages ist in öffentlichen Repositorys mit GitHub Free und GitHub Free für Organisationen sowie in öffentlichen und privaten Repositorys mit GitHub Pro, GitHub Team, GitHub Enterprise Cloud und GitHub Enterprise Server verfügbar.

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

Du kannst die meisten Jekyll-Einstellungen konfigurieren, z. B. das Design und die Plug-Ins deiner Website, indem du die Datei _config.yml bearbeitest. 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:

  • befinden sich in einem Ordner namens /node_modules oder /vendor.
  • beginnen mit _, . oder #.
  • enden mit ~.
  • werden von der exclude-Einstellung 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 ein Design manuell hinzufügen. Weitere Informationen findest du unter Unterstützte Designs auf der GitHub Pages-Website und Hinzufügen eines Designs zu deiner GitHub Pages-Website mit Jekyll.

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:

Du kannst zusätzliche Plug-Ins aktivieren, indem du das Gem des Plug-Ins der plugins-Einstellung in der _config.yml-Datei hinzufügst. 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 Informationen findest du auf der GitHub Pages-Website unter „Lokales Testen der GitHub Pages-Website mit Jekyll“ und „Abhängigkeitsversionen“.

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 Enterprise Server pushen.

Syntaxhervorhebung

Damit deine Website leichter lesbar ist, werden Codeausschnitte auf GitHub Pages-Websites ebenso markiert wie auf GitHub Enterprise Server. Weitere Informationen zur Syntaxhervorhebung auf GitHub Enterprise Server findest du unter „Erstellen und Hervorheben von Codeblöcken“.

Standardmäßig werden Codeblöcke auf deiner Website von Jekyll markiert. Jekyll verwendet den Rouge-Marker, der mit Pygments kompatibel ist. Pygments ist veraltet und wird in Jekyll 4 nicht unterstützt. Wenn du Pygments in deiner _config.yml-Datei angibst, wird Rouge stattdessen als Fallback verwendet. Jekyll kann keinen anderen Syntaxmarker verwenden. Wenn du einen anderen Syntaxmarker in der _config.yml-Datei angibst, wird eine Buildwarnung für die Website angezeigt. Weitere Informationen findest du unter „Informationen zu Jekyll-Buildfehlern für GitHub Pages-Websites“.

Wenn du einen anderen Marker (z. B. highlight.js) verwenden möchtest, musst du die Jekyll-Syntaxhervorhebung deaktivieren, indem du die _config.yml-Datei deines Projekts aktualisierst.

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

Änderungen an deiner Website automatisch veröffentlicht, wenn sie in der Veröffentlichungsquelle deiner Website zusammengeführt werden. Wenn du zuerst eine Vorschau deiner Änderungen sehen möchtest, kannst du die Änderungen lokal vornehmen statt auf GitHub Enterprise Server. Dann teste deine Website lokal. Weitere Informationen findest du unter Lokales Testen deiner GitHub Pages-Website mit Jekyll.