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

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

GitHub Pages is available in public repositories with GitHub Free and GitHub Free for organizations, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server. For more information, see "GitHub's products."

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

Änderungen an Deiner Website werden automatisch veröffentlicht, wenn die Änderungen in der Veröffentlichungsquelle Deiner Website zusammengeführt werden. Wenn Du zuerst eine Vorschau Ihrer Änderungen sehen möchtest, kannst Du die Änderungen lokal vornehmen statt auf GitHub. Dann teste Deine Website lokal. Weitere Informationen findest Du unter „Deine 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 zu Veröffentlichungsquellen findest Du unter „Informationen zu GitHub Pages.“

  3. Navigiere zur Datei _config.yml.

  4. Klicken Sie in der oberen rechten Ecke der Dateiansicht auf , um den Datei-Editor zu öffnen. Schaltfläche „Edit file" (Datei bearbeiten)

  5. Füge in der Datei eine neue Zeile mit den Namen des Designs hinzu.

    • To use a supported theme, type theme: THEME-NAME, replacing THEME-NAME with the name of the theme as shown in the README of the theme's repository. Eine Liste der unterstützten Designs findest Du unter „Unterstützte Designs“ auf der GitHub Pages-Website. Supported theme in config file
    • 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 in der README-Datei des Repositorys des Designs aufgeführt ist. Unsupported theme in config file
  6. Am Ende der Seite schreibe eine kurze, aussagekräftige Commit-Mitteilung, welche die Änderung beschreibt, welche Du an der Datei vornimmst. Du kannst den Commit in der Commit-Mitteilung mehr als einem Autor zuordnen. Weitere Informationen findest Du unter "Erstellen eines Commit mit mehreren Co-Autoren" Commit-Mitteilung für Deine Änderung

  7. If you have more than one email address associated with your GitHub account, click the email address drop-down menu and select the email address to use as the Git author email address. Nur verifizierte E-Mail-Adressen werden in diesem Dropdownmenü angezeigt. Wenn Sie den Datenschutz für E-Mail-Adressen aktiviert haben, dann ist <username>@users.noreply.github.com die standardmäßige Commit-Autor-E-Mail-Adresse. Weitere Informationen findest Du unter „Deine Commit-E-Mail-Adresse festlegen.“ Wähle Commit E-Mail-Adressen

  8. Lege unter den Commit-Mitteilungsfeldern fest, ob Du Deinen Commit zum aktuellen Branch oder zu einem neuen Branch hinzufügen möchtest. If your current branch is the default branch, you should choose to create a new branch for your commit and then create a pull request. Weitere Informationen findest Du unter „Erstellen eines neuen Pull Requests." Branch-Optionen für Commit

  9. Klicke auf Propose file change (Dateiänderung vorschlagen). Schaltfläche „Propose file change" (Dateiänderung vorschlagen)

Das CSS Deines Designs anpassen

These instructions work best with themes that are officially supported by GitHub Pages. Eine vollständige Liste der unterstützten Designs findest Du unter „Unterstützte Designs" auf der Website GitHub Pages.

Das Quell-Repository Deines Design bietet möglicherweise Hilfe beim Anpassen Deines Design. Beispiele findest Du auf „Minima's README."

  1. Navigiere in GitHub zum Repository Deiner Website.

  2. Navigiere zur Veröffentlichungsquelle für Deine Website. Weitere Informationen zu Veröffentlichungsquellen findest Du unter „Informationen zu GitHub Pages.“

  3. Erstelle eine neue Datei mit den Namen /assets/css/style.scss.

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

    ---
    ---
    
    @import "";
    
  5. Füge direkt nach der Zeile @import das gewünschte benutzerdefinierte CSS oder Sass (einschließlich Importe) hinzu.

Das HTML-Layout Deines Designs anpassen

These instructions work best with themes that are officially supported by GitHub Pages. Eine vollständige Liste der unterstützten Designs findest Du unter „Unterstützte Designs" auf der Website GitHub Pages.

Das Quell-Repository Deines Design bietet möglicherweise Hilfe beim Anpassen Deines Design. Beispiele findest Du auf „Minima's README."

  1. Navigieren Sie auf GitHub zum Quell-Repository Ihres Designs. Das Quell-Repository für Minima ist beispielsweise https://github.com/jekyll/minima.
  2. Navigiere im Ordner _layouts (Layouts) zur Datei default.html 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 zu Veröffentlichungsquellen findest Du unter „Informationen zu GitHub Pages.“
  6. Erstelle eine Datei mit dem Namen _layouts/default.html.
  7. Füge den zuvor kopierten Inhalt des Standardlayouts ein.
  8. Passe das Layout nach Deinen Vorstellungen an.

Weiterführende Informationen

Did this doc help you?Privacy policy

Help us make these docs great!

All GitHub docs are open source. See something that's wrong or unclear? Submit a pull request.

Make a contribution

Oder, learn how to contribute.