Das Ziel

Ich migriere meinen ehemaligen WordPress-basierten Blog zu einem einfachen Static-Website-Framework. In meinem Fall habe ich eine kurze Recherche zu möglichen Frameworks gemacht und fand zum Beispiel:

und ich fand

Und um ehrlich zu sein – der einzige Grund, warum meine Wahl auf Hexo fiel, war die einfache Installation und schnelle Einsatzbereitschaft. Sowie die verfügbaren Themes für Hexo. Also erstellte ich ein neues Repo auf GitHub für meinen Blog, klonte es auf meinen Rechner und prüfte die Voraussetzungen:

  • Node.js (mindestens Node.js 10.13, empfohlen 12.0 oder höher)
  • Git

Alle Details findet ihr in der Hexo-Dokumentation

Nächster Schritt nach dem Klonen des leeren Repos:

npm install -g hexo-cli

Danach war ich bereit, Hexo zu initialisieren:

hexo init <ordnername>
cd <ordnername>
npm install

Sobald diese Befehle ausgeführt sind, ist die initiale Ordnerstruktur bereitgestellt und die Hexo-Reise kann beginnen. Für weitere Details zur Konfiguration folgt der Dokumentation.

Die statischen HTML-Seiten generieren

Nachdem einige Blogbeiträge erstellt oder z.B. von WordPress migriert wurden (Hexo-Migrations-Docs), können die statischen Webseiten einfach generiert werden:

hexo generate

Alle generierten Dateien findet man dann im “public”-Ordner des Hexo-Verzeichnisses.

Eine Azure Static Website bereitstellen

Als Nächstes habe ich eine Azure Static Website erstellt, um danach die von Hexo generierten HTML-Dateien bereitzustellen. Ein guter Weg für das Azure-Deployment ist Azure Bicep Code:

targetScope = 'resourceGroup'

param env string = 'prod'
param resourceLocation string = 'westeurope'

resource staticWebsite 'Microsoft.Web/staticSites@2021-01-15' = {
  name: 'swa-${env}-website'
  kind: ''
  location: resourceLocation
  properties: {
     }
  sku: {
    tier: 'Free'
    name: 'Free'
  }
}

Mit az deployment create wird dieses Deployment an die Azure-Subscription in eine bestimmte Resource Group gesendet (mehr Details in den Docs).

Nachdem die Static Website bereitgestellt ist, kann das Deployment-Secret im Azure-Portal gefunden werden:

Azure-Portal Static Website

Das Deployment-Token kann in die Zwischenablage kopiert werden, um es im GitHub-Repo als Secret für das Deployment zu verwenden:

Azure-Portal Deployment-Token kopieren

Den GitHub-Action-Workflow erstellen

Jetzt zum spannenden Schritt – wir müssen einen GitHub-Action-Workflow erstellen, um unsere Hexo-Website bereitzustellen.

Eine Workflow-Datei erstellen

Im GitHub-Ordner eures Projekts findet ihr möglicherweise bereits einen Unterordner .github – in diesem Ordner werden die verschiedenen Workflow-Dateien im Unterordner .github/workflows gespeichert. In meinem Fall habe ich einen Workflow namens “deploy-to-azure” als YAML-Datei in diesem Ordner erstellt:

Screenshot in VSCode des Ordners