Skip to main content

Ein Design zur GitHub Pages-Website mit Jekyll hinzufügen

Du kannst deine Jekyll-Website personalisieren, indem du ein Design hinzufügst und anpasst.

Wer kann dieses Feature verwenden?

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. Weitere Informationen findest du unter GitHub-Pläne.

GitHub Pages verwendet nun GitHub Actions zur Ausführung des Jekyll-Builds. Wenn Sie einen Zweig als Quelle Ihres Builds verwenden, muss GitHub Actions in Ihrem Repository aktiviert sein, wenn Sie den eingebauten Jekyll-Workflow verwenden möchten. Wenn GitHub Actions nicht verfügbar oder deaktiviert ist, können Sie alternativ eine .nojekyll-Datei zum Stamm Ihrer Quellverzweigung hinzufügen, um den Jekyll-Erstellungsprozess zu umgehen und den Inhalt direkt bereitzustellen. Weitere Informationen zur Aktivierung von GitHub Actions finden Sie unter „Verwalten von GitHub Actions-Einstellungen für ein Repository

Personen mit Schreibberechtigungen für ein Repository können mit Jekyll ein Design zu einer GitHub Pages-Website hinzufügen.

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.

Ein Design hinzufügen

  1. Navigiere in GitHub zum Repository Deiner Website.
  2. Navigiere zur Veröffentlichungsquelle für deine Website. Weitere Informationen findest du unter Eine Veröffentlichungsquelle für deine GitHub Pages-Website konfigurieren.
  3. Navigiere zu _config.yml.
  4. Klicke zum Öffnen des Datei-Editors oben rechts in der Dateiansicht auf .

Screenshot einer Datei. In der Kopfzeile ist eine Schaltfläche mit Stiftsymbol dunkelorange umrandet.

Hinweis: Anstatt die Datei mit dem gewöhnlichen Datei-Editor zu bearbeiten und zu committen, kannst du optional den Code-Editor von github.dev verwenden, indem du das Dropdownmenü auswählst und dann auf github.dev klickst. Du kannst das Repository auch klonen und die Datei lokal über GitHub Desktop bearbeiten, indem du auf GitHub Desktop klickst.

Screenshot einer Datei. In der Kopfzeile ist ein nach unten zeigendes Dreieckssymbol dunkelorange umrandet.

1. Füge in der Datei eine neue Zeile mit den Namen des Designs hinzu. * Um ein unterstütztes Design zu verwenden, geben Sie `theme: THEME-NAME` ein und ersetzen Sie _THEME-NAME_ durch den Namen des Designs, der im `_config.yml` des Repositorys des Designs angezeigt wird (die meisten Designs folgenden einer Namenskonvention `jekyll-theme-NAME`). Eine Liste der unterstützten Designs findest du unter [Unterstützte Designs](https://pages.github.com/themes/) auf der GitHub Pages-Website. Um beispielsweise das Minimal-Design auszuwählen, gibst du `theme: jekyll-theme-minimal` ein. * Um ein anderes Jekyll-Design zu verwenden, das auf GitHub gehostet wird, gib `remote_theme: THEME-NAME` ein und ersetze dabei „THEME-NAME“ durch den Namen des Designs, der im README-Abschnitt des Repositorys des Designs angezeigt wird.
  1. Klicke auf Änderungen committen... .

  2. Gib im Feld „Commitnachricht“ eine kurze, aussagekräftige Commitnachricht ein, die die Änderung beschreibt, die Du an der Datei vorgenommen hast. Du kannst den Commit in der Commit-Mitteilung mehr als einem Autor zuordnen. Weitere Informationen findest du unter Einen Commit mit mehreren Autoren erstellen.

  3. Wenn Ihrem Konto in GitHub mehrere E-Mail-Adressen zugeordnet sind, klicken Sie auf das Dropdownmenü für E-Mail-Adressen und wählen Sie die Adresse aus, die als Git-Autor-Adresse für den verwendet werden soll. Nur verifizierte E-Mail-Adressen werden in diesem Dropdownmenü angezeigt. Wenn Sie den Datenschutz für E-Mail-Adressen aktiviert haben, ist die Commitautor-Standardadresse No-reply. Weitere Informationen zur genauen Form der No-reply-E-Mail-Adresse finden Sie unter „E-Mail-Adresse für Commits festlegen“.

    Screenshot eines GitHub-Pull Requests mit einem Dropdownmenü mit Optionen zum Auswählen der Commit-E-Mail-Adresse des Autors. octocat@github.com ist ausgewählt.

  4. Lege unter den Commit-Mitteilungsfeldern fest, ob Du Dein Commit zum aktuellen Branch oder zu einem neuen Branch hinzufügen möchten. Wenn dein aktueller Branch als Standardbranch festgelegt ist, solltest du einen neuen Branch für deinen Commit und dann einen Pull Request erstellen. Weitere Informationen findest du unter Erstellen eines Pull Requests.

    Screenshot eines GitHub-Pull Requests mit einem Optionsfeld zum direkten Commit an den Mainbranch oder zum Erstellen eines neuen Branchs. Der neue Branch ist ausgewählt.

  5. Klicke auf Änderungen committen oder Änderungen vorschlagen.

Das CSS Deines Designs anpassen

Diese Anweisungen funktionieren am besten mit Designs, die offiziell von GitHub Pages unterstützt werden. Eine vollständige Liste unterstützter Designs findest du unter Unterstützte Designs auf der GitHub Pages-Website.

Das Quell-Repository Deines Design bietet möglicherweise Hilfe beim Anpassen Deines Design. Weitere Informationen findest du z. B. in der README-Datei von Minimal.

  1. Navigiere in GitHub zum Repository Deiner Website.

  2. Navigiere zur Veröffentlichungsquelle für deine Website. Weitere Informationen findest du unter Eine Veröffentlichungsquelle für deine GitHub Pages-Website konfigurieren.

  3. Erstelle eine neue Datei namens /assets/css/style.scss.

  4. Füge oben in der Datei den folgenden Inhalt hinzu:

    ---
    ---
    
    @import "{{ site.theme }}";
    
  5. Füge direkt nach der Zeile @import das gewünschte benutzerdefinierte CSS- oder Sass-Stylesheet (einschließlich Importen) hinzu.

Das HTML-Layout Deines Designs anpassen

Diese Anweisungen funktionieren am besten mit Designs, die offiziell von GitHub Pages unterstützt werden. Eine vollständige Liste unterstützter Designs findest du unter Unterstützte Designs auf der GitHub Pages-Website.

Das Quell-Repository Deines Design bietet möglicherweise Hilfe beim Anpassen Deines Design. Weitere Informationen findest du z. B. in der README-Datei von Minimal.

  1. Navigiere auf GitHub zum Quell-Repository deines Designs. Beispielsweise ist https://github.com/pages-themes/minimal das Quell-Repository für Minimal.
  2. Navigiere im Ordner _layouts zur default.html-Datei deines Designs.
  3. Kopiere den Inhalt der Datei.
  4. Navigiere in GitHub zum Repository Deiner Website.
  5. Navigiere zur Veröffentlichungsquelle für deine Website. Weitere Informationen findest du unter Eine Veröffentlichungsquelle für deine GitHub Pages-Website konfigurieren.
  6. Erstelle eine Datei namens _layouts/default.html.
  7. Füge den zuvor kopierten Inhalt des Standardlayouts ein.
  8. Passe das Layout nach Deinen Vorstellungen an.

Weiterführende Themen