Mit GitHub-Aktionen und Kinsta’s statischem Seiten Hosting eine Jekyll-Site kostenlos bereitstellen

Jekyll ist einer der beliebtesten Static Site Generators (SSGs), der von der Entwicklergemeinschaft häufig zur Erstellung von Blogs, Portfolios und persönlichen Websites verwendet wird. In diesem Artikel erfährst du, wie du eine Jekyll-Website mit GitHub Actions erstellst und sie mit dem statischen Seiten Hosting von Kinsta kostenlos bereitstellst.

Das statische Seiten Hosting von Kinsta kann automatisch Websites aus SSGs und Webanwendungen erstellen, die auf Node.js basieren. Für andere statische Inhalte, wie z. B. statische Websites, die von Jekyll (das auf Ruby basiert) erstellt wurden, brauchen wir einen anderen Ansatz.

Anforderungen

Für diesen Leitfaden gehen wir davon aus, dass du Folgendes hast:

• Erfahrung mit Jekyll und Git.

• Eine Jekyll-Website, die lokal läuft.

Um mitzumachen, kannst du diese Beispiel-Codebasis als Referenz verwenden.

Bereitstellen deiner Jekyll-Website auf Kinsta

Es gibt verschiedene Möglichkeiten, deine Jekyll-Website auf Kinsta bereitzustellen, z. B:

• Mit dem Anwendungs-Hosting von Kinsta.
• Mit dem Static Site Hosting von Kinsta über eine der folgenden Methoden:
  • A. Du erstellst deine Website mit Continuous Integration and Continuous Deployment (CI/CD), bevor du sie bei Kinsta bereitstellst.
  • B. Du stellst nur deine statischen Dateien bereit.

In diesem Artikel zeigen wir dir beide Methoden, wie du Jekyll mit Kinstas Static Site Hosting einsetzen kannst.

A. Baue deine Website mit GitHub Actions, bevor du sie auf Kinsta bereitstellst

Bei dieser Methode wird ein GitHub Actions (GHA)-Workflow verwendet, um deine Website in einem bestimmten Zweig (deploy) zu erstellen und diesen Zweig zu verwenden, um die generierten statischen Dateien auf Kinsta zu verteilen.

Da wir GitHub Actions verwenden, muss deine Codebasis in einem GitHub-Repository (öffentlich oder privat) gehostet werden. Du kannst aber auch andere CI/CD-Tools verwenden, um das gleiche Ergebnis zu erzielen.

Die wichtigsten Vorteile dieser Methode sind:

• Du kannst weitere Continuous Integration (CI)-Prozesse für deine Website implementieren, z. B. eine test und/oder eine lint Stufe, um deinen Code zu überprüfen.
• Deine Website wird bei jedem Push in dein Repo automatisch gebaut. Du musst sie vor dem Pushen nicht mehr bauen.
• Du garantierst, dass deine Website nur dann aktualisiert wird, wenn die CI/CD-Pipeline erfolgreich abgeschlossen ist.

Schritte:

1. Öffne dein Terminal im Stammverzeichnis des Repositorys deiner Jekyll-Website.
2. Erstelle einen neuen verwaisten (leeren) Zweig (deploy) und schiebe ihn in dein Repository:

git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deploy

Füge keine Dateien zu diesem Zweig hinzu. Er wird vom GitHub Actions Workflow automatisch mit dem Inhalt des erzeugten Jekylls _site-Ordners gefüllt.

3. Schau dir den main Zweig an:

git checkout main

4. Erstelle ein Verzeichnis .github/workflows in main.

5. Um GHA zu konfigurieren, erstelle eine neue Datei gh-actions.yml unter .github/workflows mit dem folgenden Inhalt:

name: Deploy Jekyll
on:
  # The workflow runs only on pushes to the <main> branch
  push:
    branches: ["main"]
    workflow_dispatch:
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
      - name: Set up Jekyll
        run: gem install bundler && bundle install
      - name: Build site
        run: bundle exec jekyll build
        env:
          JEKYLL_ENV: production
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: compiled-site
          path: _site
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
# Commit and push the artifacts to the <deploy> branch
      - uses: actions/checkout@v4
        with:
          ref: deploy
      - name: Download artifacts
        uses: actions/download-artifact@v3
        with:
          name: compiled-site
          path: _site
      - name: Commit and push
      # Replace "<username>" with your GH org or user name
        run: |
          git config user.name "<username>"
          git config user.email "<username>@users.noreply.github.com"
          git pull origin deploy
          git add _site
          git commit -m "Auto generated from ${GITHUB_SHA::7}"
          git push

6. Übertrage den Code und schiebe ihn in den Zweig main.

Bei jedem Push in den main Zweig wird der GitHub Actions Workflow ausgeführt:

1. Baut deine Jekyll-Website mit den statischen Dateien unter _site.
2. Erzeugt Artefakte mit dem Inhalt von _site.
3. Checkt den deploy Zweig aus.
4. Überträgt die Änderungen an _site in den Zweig deploy.

Um deine Website zu aktualisieren, musst du deine Änderungen nur in den main Zweig übertragen.

Pushe deine Änderungen nicht direkt in den deploy Zweig. Du kannst diesen Zweig auf GitHub sperren, um unbeabsichtigte Pusher zu vermeiden.

Weiter unten erfährst du, wie du es auf Kinsta bereitstellst.

B. Erstelle deine Website lokal und stelle sie direkt auf Kinsta bereit

Alternativ zur obigen Methode kannst du deine Website auch lokal erstellen (und den Inhalt des _site-Ordners lokal aktualisieren) und dann den Inhalt des _site-Ordners von Jekyll in ein Repository (auf GitHub, GitLab oder Bitbucket) übertragen. Bei dieser Methode brauchst du weder GH Actions noch ein anderes CI/CD-Tool, um deine Website bei jedem Push an dein Repository zu erstellen.

Der Nachteil dieser Methode ist, dass du die Inhalte deiner Website vor jedem Push in dein Repository erstellen musst.

Diese Methode verwendet nur die Inhalte des _site-Ordners und stellt sie direkt auf Kinsta Static Site Hosting bereit.

Schritte:

1. Öffne die .gitignore-Datei deines Repos und entferne die Zeile mit _site.
2. Commit und pushe den _site-Ordner in dein Repository.

Um deine Website zu aktualisieren, musst du sie mit Jekyll erstellen, bevor du sie in dein Projektarchiv verschiebst.

Bereitstellen deiner Jekyll-Site auf Kinsta mit Static Site Hosting

GitHub-Aktionen-Methode

Wenn du deine Website mit dem GitHub Actions-Workflow erstellt hast, befolge die folgenden Schritte, um sie mit dem Static Site Hosting von Kinsta bereitzustellen.

1. Melde dich bei deinem MyKinsta-Konto an oder erstelle ein neues.
2. Gehe zum Dashboard von MyKinsta.
3. Klicke auf das Menüsymbol in der oberen linken Ecke deines Bildschirms.
4. Klicke in der Seitenleiste auf Statische Seiten.
5. Klicke in der oberen rechten Ecke auf Site hinzufügen.
6. Autorisiere deinen Git-Anbieter.
7. Wähle dein Repository aus.
8. Wähle den Zweig deploy als Standardzweig (in dem sich der Inhalt des _site-Ordners befindet).
9. Wähle Automatische Bereitstellung bei Commit, damit deine Site bei jedem Push in dein Repository bereitgestellt wird.
10. Füge einen eindeutigen Anzeigenamen für deine Website hinzu und klicke auf Weiter.
11. Richte deine Build-Einstellungen ein:
    1. Build-Befehl: leer lassen.
    2. Node-Version: Belasse sie unverändert.
    3. Veröffentlichungsverzeichnis: _site.

12. Klicke auf Website erstellen.

Kinsta richtet deine Website ein und fordert dich auf, die Standard-URL der Website einzugeben. Du kannst dann deine eigene Domain und dein eigenes SSL-Zertifikat hinzufügen, wenn du möchtest.

Lokale Erstellungsmethode

Wenn du die lokale Build-Methode verwendet hast, befolge dieselben Schritte, um deine Website bereitzustellen. Du musst nur den Zweig ändern, von dem aus du die Website bereitstellen willst (in Schritt 8). Anstelle von deploy kannst du main oder einen anderen Zweig deiner Wahl verwenden.

Zusammenfassung

In diesem Artikel hast du zwei Möglichkeiten kennengelernt, wie du deine Jekyll-Website mit dem Static Site Hosting von Kinsta bereitstellen kannst.

Die erste Methode nutzt CI/CD, um deine Anwendung zu erstellen und den Inhalt des _site-Ordners in einem anderen Zweig deines Repositorys zu erzeugen. Die größten Vorteile dieser Methode mit Kinsta Static Site Hosting sind:

• Mit CI/CD gibt es zahlreiche Prozesse, die du zu deiner Website hinzufügen kannst.
• Du stellst deine Site mit einem hervorragenden Hosting-Service bereit und stellst sie mit maximaler Leistung bereit.
• Du brauchst keinen GitHub-Premium-Account, um dein Repository privat zu halten (wie du es zum Beispiel bei GitHub Pages tun würdest).

Bei der zweiten Methode bauen wir Jekyll lokal und pushen den Inhalt des _site-Ordners in denselben Zweig wie den Rest deiner Jekyll-Dateien. Diese Methode kann für Repos, die bei anderen Git-Providern (GitLab und Bitbucket) gehostet werden, ohne weitere Konfiguration wiederholt werden. Es ist die einfachste Methode, hat aber den Nachteil, dass du deine Website vor jedem Push in dein Repository erstellen musst.

Zusätzlich zu diesen Optionen kannst du deine Jekyll-Site auch mit dem Anwendungs-Hosting von Kinsta bereitstellen. Es bietet eine größere Hosting-Flexibilität, ein umfassenderes Angebot an Vorteilen und Zugang zu robusteren Funktionen. Zum Beispiel Skalierbarkeit, individuelles Deployment mit einem Dockerfile und umfassende Analysen, die Echtzeit- und historische Daten umfassen.

Lies weitere Artikel über statische Websites auf dem Kinsta-Blog.

Marcia Ramos Kinsta

Ik ben de Editorial Team Lead bij Kinsta. Ik ben een open source liefhebber en ik houd van coderen. Met meer dan 7 jaar ervaring in technisch schrijven en redactiewerk voor de tech-industrie, werk ik graag samen met mensen om duidelijke en beknopte content te creëren en workflows te verbeteren.

• LinkedIn