Cache und Hugo-Umleitungen für Cloudflare Pages

Für Umleitungen (HTTP 3xx) und HTTP Header kann man die Dateien _redirects und _headers auf Cloudflare Pages hochladen. Für Hugo kann man damit das Cachen von Assets aktivieren, und das Alias-Handling verbessern.

_headers

Die Syntax für _headers ist:

[url]
  [name]: [value]

Anstatt alle URLs auszuschreiben, kann man auch Wildcards (*) verwenden.

Ein Beispiel für eine Konfiguration wäre:

1
2
3
4
5
6
7

# Fingerprinted CSS ein Jahr cachen
/assets/*.css
  Cache-Control: max-age=31536000

# Immer HTTPS benutzen
/*
  strict-transport-security: max-age=31536000

Ohne eigene _headers werden Assets wie CSS und Javascript nicht von Cloudflare Pages gecached.

Um die Datei automatisch auf Cloudflare Pages hochzuladen, kann sie einfach im static Ordner von Hugo abgelegt werden. Damit wird sie beim Erstellen der Seite automatisch in den public-Ordner kopiert.

_redirects

Die mit Hugo erstellten Umleitungen sind etwas SEO-unfreundlich, da sie Nutzer zwar umleiten, aber einen noindex-Tag enthalten. Dieser ist zwar nötig, weil die Seite ansonsten in den Suchergebnissen auftauchen würde. Mit Cloudflare Pages kann man aber auch SEO-freundlichere 301-Redirects umsetzen.

Die Syntax für _redirects kann auch Variablen enthalten. Mehr Informationen dazu gibt es in der Dokumentation. Hier geht es nur Aliase.

In hugo.toml fügt man folgende Zeilen hinzu:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

disableAliases = true

[outputs]
  home = ['html', 'rss', 'redir']

[mediaTypes]
  [mediaTypes."text/cf-redir"]
    suffix = ""
    delimiter = ""

[outputFormats.REDIR]
  baseName = "_redirects"
  isPlainText = true
  mediaType = "text/cf-redir"
  notAlternative = true

und im Theme unter themes/your-theme/layouts/index.redir folgende Datei:

1
2
3
4
5
6
7

{{- $index := slice -}}
{{- range $p := .Site.Pages -}}
{{- range .Aliases -}}
{{ if hasSuffix . "/" }}{{ strings.TrimRight "/" . }} {{ $p.RelPermalink }} 301{{ end }}
{{ . }} {{ $p.RelPermalink }} 301
{{ end -}}
{{- end -}}

Die Konfiguration in hugo.toml deaktiviert die Erzeugung der HTML-Redirect-Seiten und führt dazu, das im Output eine neue Datei _redirects erstellt wird.

Die Datei index.redir erstellt den Inhalt der Datei. Es wird über sämtliche Seiten iteriert. Enthält eine Seite Aliase wird eine 301-Umleitung von diesem Alias (mit und ohne abschließendem /) auf die Seite erzeugt. Der Statuscode kann angepasst werden. Cloudflare Pages erlaubt die Codes 301, 302, 303, 307 und 308. Default ist 302.

Das Endergebnis sieht so ähnlich aus wie:

1
2

/quelle /ziel/ 301
/quelle/ /ziel/ 301

Fazit

Wenn man eine Seite sowieso über Cloudflare Pages hostet, sollte man diese Dateien konfigurieren. Der Aufwand ist nicht hoch, aber der Effekt ist groß.