Kostenlose Websites mit Hugo und Cloudflare Pages

Frontend developers want to build fast and beautiful sites, not play system integrator: bogged down by configuring build systems, setting up environments, and keeping production up to date.
— Cloudflare Pages

Es ist zwar immer lustig, ganze Systeme zu betreuen (und ich mache es gerne!), aber es ist nicht immer die beste Lösung.

Wir hatten das Problem, das das Theme mehrerer Wordpress-Seiten nach jedem Update gewartet werden musste. Dieser Aufwand war nicht mehr vertretbar. Da ich mich nach dem Erstellen dieser Seite hier mit Hugo und TailwindCSS auskannte, haben wir dieses Framework für die anderen Seiten einfach übernommen.

Nachdem wir uns für Hugo entschieden hatten, musste noch das Deployment geklärt werden. Ein Nginx-Server ist schnell erstellt, lohnt sich für statische Seiten aber nicht unbedingt. Cloudflare Pages war eine naheliegende Lösung, da wir zum Hochladen einfach GitHub Actions benutzen konnten und die Seiten sowieso ein weltweites Publikum haben.

Cloudflare

Als erstes muss man eine neue Seite unter Workers & Pages > Pages > Upload Assets erstellen. Sobald ein Projekt-Name festgelegt ist, kann man die Seite auch wieder schließen. Zu diesem Zeitpunkt müssen noch keine Assets hochgeladen werden.

Möchte man eine eigene Domain anstatt projektname.pages.dev festlegen, muss man einen DNS CNAME-Record auf projektname.pages.dev legen. Soll der Apex einer Domain (also example.com anstatt nur www.example.​com) auf Pages gehostet werden, muss die Seite komplett von Cloudflare gemanaged werden. Eine Anleitung dazu gibt es aber nochmal in der Cloudflare Dokumentation.

Nutzt man eine eigene Domain, sollte der Zugriff über die *.pages.dev-Domain gesperrt werden. Dafür kann man entweder Cloudflare Access oder Bulk-Redirects verwenden. Eine Anleitung gibt es hier.

GitHub

Um die Pages-Seite auch mit Leben zu füllen, brauchen wir unseren Content. Man startet mit einer Hugo-Seite. Beispiele dafür gibt es genug (siehe hier). Das zugehörige Git-Repository pusht man auf GitHub und erstellt eine GitHub Action:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# .github/workflows/deploy.yml

name: Deploy to Cloudflare

on:
  push:
    branches:
      - main 

jobs:
  deploy:
    runs-on: ubuntu-22.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Publish
        uses: cloudflare/pages-action@v1
        with:
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          projectName: pages-name
          directory: public/
          branch: main
          wranglerVersion: '3'

Die Variable CLOUDFLARE_ACCOUNT_ID findet man auf der Cloudflare-Seite Workers & Pages in der rechten Leiste. CLOUDFLARE_API_TOKEN muss unter Konto > Profil > API Tokens mit der Berechtigung Cloudflare Pages bearbeiten erstellt werden. Beide Secrets müssen anschließend auf GitHub im Repository unter Einstellungen > Secrets and Variables > Actions erstellt werden.

Prinzipiell ist es auch möglich, seine Seiten mit den Cloudflare-eigenen Build-Tools zu erstellen. Diese scheinen aber nur einen Build-Step zuzulassen. Beim in der Einleitung erwähnten Repository hat es sich aber um drei Seiten gehandelt, bei denen dementsprechend mehrere Build-Steps nötig waren. Daher sind wir auf GitHub Actions ausgewichen.

Fertig!

Das war es schon! Beim nächsten Push sollte die Seite automatisch gebaut und hochgeladen werden!

Cloudflare bietet noch einige Features, zum Beispiel die _headers und _redirect-Dateien, um CSS und Javscript zu cachen und Umleitungen SEO-freundlicher zu gestalten. Diese werden hier besprochen.