Erste Schritte mit Headless Hashnode auf DigitalOcean

Einführung

Hashnode ist eine kostenlose Content-Publishing-Plattform und Entwickler-Community, die Technikbegeisterte aktiv einbindet. Nutzer können hier Blogbeiträge erstellen und teilen sowie eine Community rund um verschiedene Technologiebereiche aufbauen. Hashnode vereinfacht die Erstellung und Pflege eines entwicklerfreundlichen und SEO-optimierten technischen Blogs und bietet Funktionen wie benutzerdefinierte Domains, einen integrierten Editor und die nahtlose Integration mit gängigen Versionskontrollsystemen wie GitHub. Mit dem neuesten Angebot, Headless Hashnode, können Sie mithilfe der innovativen GraphQL-APIs von Hashnode einen Blog von Grund auf neu erstellen. Alternativ können Sie das Next.js-Starterkit nutzen.

In diesem Tutorial richten wir Hashnode headless auf DigitalOcean Droplets ein.

Einführung in Headless HashNode

Ein Headless Content-Management-System (CMS) ist eine Architektur, die die Inhaltsverwaltung und die Präsentationsebene trennt. Bei einem traditionellen CMS werden Inhalte in einem System erstellt, gespeichert und angezeigt. Mit einer Headless-Architektur hingegen können Speicherung und Präsentation von Inhalten separat verwaltet werden. Dies eröffnet Designern und Entwicklern mehr Spielraum, um mit der Darstellung des Blogs für die Nutzer zu experimentieren.

Headless Hashnode ist ein speziell entwickeltes CMS, das Benutzern hilft, persönliche oder Unternehmensblogs zu erstellen, damit sie mit ihrer Domain mithilfe des WYSIWYG-Editors, der KI und der SEO-Optimierungstools von Hashnode herumspielen können, ohne sich während des Hostings Gedanken über die Inhalts- und Analyseverfolgung machen zu müssen.

Start

Voraussetzungen:

1. Ein Konto bei DigitalOcean
2. Ein Account bei Hashnode.

 Nutzung von DigitalOcean Droplets

DigitalOcean Droplets sind einfache, skalierbare und zuverlässige virtuelle Maschinen, die sich problemlos in weniger als einer Minute bereitstellen lassen.

Um zu beginnen, öffnen Sie Ihr DigitalOcean-Kontrollfeld und klicken Sie oben rechts auf der Seite auf die grüne Schaltfläche «Erstellen». Wählen Sie im Dropdown-Menü «Droplets» aus; dies ist die erste Option.

Im nächsten Fenster müssen Sie Ihre Präferenzen für Region, Bild und Größe sowie weitere Details festlegen. Es wird dringend empfohlen, die Region zu wählen, die Ihren potenziellen Lesern am nächsten liegt, selbst wenn das Rechenzentrum bereits für Sie ausgewählt ist.

Gehen Sie im nächsten Menüpunkt «Images» zum Tab „Marketplace“ und suchen Sie nach NodeJS für Ubuntu. Der DigitalOcean Marketplace bietet eine Sammlung sofort einsatzbereiter Tools und Ressourcen, sogenannte 1-Click-Apps. Anstatt alle Abhängigkeiten manuell herunterzuladen, können Sie im Marketplace eine 1-Click-App ausführen, die vorkonfigurierte Images und Einstellungen sowie alle für Ihr Projekt benötigten Pakete und Abhängigkeiten enthält. Ihr Bildschirm sollte wie folgt aussehen:

Im nächsten Fenster können Sie die Größe des Droplets auswählen. Wählen Sie die für Sie oder Ihr Unternehmen optimale Größe, abhängig von der Anzahl der geplanten Blogbeiträge. Für den produktiven Einsatz empfehlen wir idealerweise eine SSD-Festplatte mit mindestens 25 GB. Für eine höhere Performance empfehlen wir ein Premium-Droplet, das Intel- und AMD-Prozessoren sowie NVMe-SSDs unterstützt. Sie können ein Premium-Droplet – genau wie ein Standard-Droplet – an Ihre Bedürfnisse anpassen.

Sobald dies erledigt ist, müssen Sie eine Authentifizierungsmethode auswählen. Sie können sich per SSH-Schlüssel oder Passwort bei Ihrem Droplet anmelden. In diesem Tutorial verwenden wir ein Passwort. Geben Sie also eine beliebige Zeichenfolge ein und notieren Sie sie. Im nächsten Abschnitt können Sie die erweiterte Metriküberwachung und Benachrichtigungen kostenlos aktivieren, indem Sie das entsprechende Kontrollkästchen markieren. Fertig! Achten Sie darauf, einen einfachen Hostnamen für Ihr Droplet zu vergeben und alle Details zu überprüfen, bevor Sie auf “Droplet erstellen” klicken.

Die Bereitstellung eines Droplets dauert etwa eine Minute. Klicken Sie anschließend auf den Link «Los geht’s», um eine Übersicht der Marketplace-App zu erhalten und zu sehen, was enthalten ist.

Droplet-Einrichtung

Um Ihr Droplet zu starten, akzeptieren Sie eingehende Verbindungen und leiten Sie diese in Ihrem lokalen Terminal an die Anwendung weiter:

ssh root@YOUR-DROPLET-IP

«Ersetzen Sie »IHRE-DROPLET-IP“ durch die IP-Adresse Ihres Droplets im Kontrollfeld. Geben Sie das Passwort ein, wenn Sie dazu aufgefordert werden.

Der nächste Schritt besteht darin, die Pakete im Droplet zu aktualisieren und zu upgraden. Führen Sie dazu die folgenden Befehle aus:

sudo apt update && sudo apt upgrade -y
curl -fsSL https://get.pnpm.io/install.sh | sh - to install pnpm.

Um die im Droplet angezeigte Standardseite, die Port 3000 belegt, zu entfernen, verwenden Sie die folgenden Befehle.

cd /var/www
rm -r html
cd ~
cd /etc/nginx/sites-enabled/
rm -r default

Wenn die Änderungen nicht innerhalb von 5 Minuten wirksam werden, müssen Sie Ihr Droplet möglicherweise herunterfahren und wieder einschalten. In diesem Fall müssen Sie sich über Ihr lokales Terminal erneut per SSH mit Ihrem Droplet verbinden. Für die nächsten Schritte verwenden wir Node.js, npm und Nginx, die bereits auf dem Droplet installiert sind. Nginx übernimmt das gesamte Routing zu unserer Next.js-Anwendung.

Nginx-Konfiguration

Erstellen Sie eine neue Nginx-Konfigurationsdatei mit folgendem Befehl:

sudo nano /etc/nginx/sites-available/hashnode

Fügen Sie die folgende Konfiguration ein und ersetzen Sie server_name durch die IP-Adresse Ihres Droplets:

server {
listen 80;
server_name YOUR_IP_ADDRESS;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

Speichern und schließen Sie die Datei anschließend. Nun müssen wir einen symbolischen Link erstellen, um die Einstellungen zu aktivieren. Verwenden Sie dazu Folgendes:

sudo ln -s /etc/nginx/sites-available/hashnode /etc/nginx/sites-enabled/

Um Ihre Nginx-Konfiguration auf Syntaxfehler zu testen, können Sie Folgendes ausführen:

sudo nginx -t

Das ideale Ergebnis sollte folgendermaßen aussehen:

Jetzt können wir Nginx neu starten. Dies können wir mit folgendem Befehl tun:

sudo service nginx restart

Headless Hashnode Installation

Wechseln Sie in das Verzeichnis auf der rechten Seite:

cd /var/www

Klonen Sie das Headless Hashnode GitHub-Repository:

git clone https://github.com/hashnode/starter-kit

Wählen Sie eine Vorlage aus und navigieren Sie zu deren Verzeichnis. In diesem Tutorial verwenden wir das Design „Personal“.

cd starter-kit/packages/blog-starter-kit/themes/personal

Kopieren Sie die Datei mit den Umgebungsvariablen:

cp .env.example .env.local

Bearbeiten Sie anschließend die Datei mit den Umgebungsvariablen:

nano .env.local

Sie müssen die Umgebungsvariablen so ändern, dass sie auf Ihr Hashnode-Konto verweisen. Ändern Sie NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST auf Ihren Endpunkt und NEXT_PUBLIC_MODE auf „production“. Die Datei sieht dann folgendermaßen aus:

Um die Abhängigkeiten zu installieren, führen Sie Folgendes aus:

pnpm install

Ihr Bildschirm sollte wie folgt aussehen:

Nachdem alles eingerichtet ist, können Sie nun den folgenden Befehl ausführen, um Headless Hashnode auf Ihrem Droplet bereitzustellen. Beachten Sie, dass die Kompilierung etwa eine Minute dauern kann. Ihr Terminal sollte in etwa so aussehen:

pnpm dev

Nach der Kompilierung können Sie Ihre Droplet-IP-Adresse aufrufen, um zu sehen, dass Ihre Headless Hashnode-Site betriebsbereit ist!

Damit haben wir Hashnode headless auf einem DigitalOcean Droplet mithilfe eines von Nginx bereitgestellten Reverse-Proxys bereitgestellt!

Einrichten eines PM2-Prozessmanagers

Manchmal kann der ausgeführte Befehl aufgrund eines Serverneustarts oder eines erforderlichen Updates unterbrochen werden. Wir verwenden das PM2-Tool, um sicherzustellen, dass unsere Anwendung stets ausgeführt wird. PM2 startet auch dann neu, wenn die Anwendung abstürzt.

Im Node.js Marketplace-Image ist PM2 vorinstalliert. Um sicherzustellen, dass Ihre Anwendung immer mit PM2 ausgeführt wird:

cd /var/www/starter-kit
pm2 start npm --name "hashnode" --start

Um sicherzustellen, dass PM2 beim Systemstart automatisch startet, führen Sie die folgenden Befehle aus. Dadurch wird ein Skript erstellt, das Sie in Ihr Terminal kopieren und einfügen können, um PM2 beim Systemstart zu starten und die Einstellungen zu speichern.

pm2 startup 
pm2 save

Ergebnis

Headless-CMS-Tools eignen sich hervorragend zur individuellen Gestaltung von Benutzeroberflächen, und Hashnode bietet ein hochskalierbares und flexibles Tool. Um die Sicherheit und SEO Ihres Blogs zu verbessern, empfehlen wir die Einrichtung von SSL-Zertifikaten mit Let's Encrypt und die Implementierung von HTTPS-Verbindungen. Wenn Sie eine eigene Domain hinzufügen möchten, denken Sie daran, Ihre DNS-Einstellungen zu konfigurieren. Richten Sie den A-Record Ihrer Domain auf die IP-Adresse Ihres Droplets ein, damit Sie über Ihre Domain auf die Anwendung zugreifen können. Registrieren Sie sich noch heute! Wir freuen uns darauf, Ihre Blogs mit DigitalOcean zu sehen!