Ich habe mich entschieden mal wieder an meiner Homepage zu schrauben. Nachdem ich seit über 10 Jahren bei Wordpress bin, haben mich doch ein paar Sachen bei der letzten Migration gestört. Vor allem das Aufsetzen und Betreiben eines eigenen Servers. Klar, ist jetzt nicht sooo viel was man noch tun muss, Letsencrypt und Wordpress sind heutzutage fix installiert, aber dennoch muss man immer mal nachschauen, ob sich alle Rädchen noch drehen. Dies sollte mit meiner jetzigen Lösung hoffentlich etwas wartungsärmer werden: eine Static Site, erstellt mit dem Pelican Framework (https://getpelican.com/), die auf einem AWS S3 Bucket gehostet wird. Das Zertifikat übernimmt auch hier AWS mit dem AWS Certificate Manager, das Ausliefern der Webseite übernimmt CloudFront. Da ich mein Wordpress Blog bereits auf AWS Lightsail Instanz gehostet hatte war die Umstellung auch recht einfach (Route53 als Dienst hatte ich schon).

Meine aktuell genutzte Toolchain:

• Lokal:
  • Python
  • Pelican
  • VS Code / vi
• AWS:
  • S3
  • Route 53
  • Certificate Manager
  • CloudFront

Bis jetzt bin ich sehr zufrieden. Auch wenn ich das genutzte Pelican Theme Pelican-Blue (https://github.com/parbhat/pelican-blue) anpassen musste. In der Vergangenheit habe ich mich mit den Default-Themes von Wordpress begnügt. Hier musste ich z.B. erst die Google Fonts Einbettung von dynamisch auf lokal gehostet umstellen, um DSGVO konform zu bleiben.

Hier mal ein kleines HowTo:

1. Identifizieren der genutzten Google Fonts (z.B. manuelles durchsuchen des Themes oder in der Entwicklerkonsole vom Browser über den Netzwerktraffic identifizieren): Bei mir war es https[://]fonts.googleapis.com/css?family=Open+Sans:400,600,700
2. Herunterladen der Fonts und der CSS mittels des Google Web Fonts Helpers: https://gwfh.mranftl.com/fonts
3. Erstellen eines lokalen fonts Verzeichnis unter content (da ich das Theme nicht stark verändern wollte, sauberer wäre es das Theme anzupassen)
4. Ablegen der heruntergeladenen Fonts und erstellen eines CSS Files "open-sans.css" für die Fonts mit dem vom Google Web Fonts Helper erstellten CSS:

/* open-sans-regular - latin */
@font-face {
        font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        src: url('/fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin */
        @font-face {
        font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 600;
        src: url('/fonts/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin */
@font-face {
        font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 700;
        src: url('/fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

5. Einbinden des fonts Verzeichnisses als statischen Inhalt in der pelicanfonf.py:

STATIC_PATHS = ['images','fonts']

6. Anpassen des dynamischen Fontsaufrufes: Folgenden Teil in der page.html unter /pelican-themes/pelican-blue/templates ändern (und ja, man hätte fonts und css auch im static Teil des Themes ablegen können):

<!-- remove dynamic linking of google fonts for GDPR compliance -->
<!-- <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'> -->
<link href="{{ SITEURL }}/fonts/open-sans.css" rel="stylesheet" type="text/css"/>

Mal schauen wie viel am Ende von dem Original-Theme doch noch übrig bleibt 😉