Wie installiert und erstellt man einen Blog mit Hexo auf Ubuntu 20.04
Hexo ist ein statisches Blogging-Framework, das auf Node.js aufbaut. Mit Hexo können Sie Beiträge im Markdown-Format schreiben. Diese Blog-Posts werden verarbeitet und mithilfe vordefinierter Themen in statische HTML-Dateien umgewandelt.
Es unterscheidet sich von der üblichen Blogging-Software wie WordPress, da es statische Dateien erzeugt. WordPress lädt den Blog dynamisch, indem bei jedem Neuladen der Website PHP-Code ausgeführt wird, was die Website anfällig für Schwachstellen macht.
In diesem Tutorial erfahren Sie, wie Sie Hexo installieren und zur Erstellung eines Blogs auf einem Ubuntu 20.04-basierten Server verwenden können.
Voraussetzungen
- Ubuntu 20.04-basierter Server mit einem Nicht-Root-Benutzer mit Sudo-Berechtigungen.
- Git sollte installiert sein. Wenn Sie Git nicht installiert haben, können Sie es mit den folgenden Befehlen tun.
$ sudo apt install git $ git config --global user.name "Your Name" $ git config --global user.email "[email protected]" - Ein Konto auf Github.
Konfigurieren der Firewall
Ubuntu 20.04 wird standardmäßig mit der Unkomplizierten Firewall(UFW) ausgeliefert. Sollte dies nicht der Fall sein, installieren Sie sie zuerst.
$ sudo apt install ufw
Aktivieren Sie den SSH-Port.
$ sudo ufw allow "OpenSSH"
Aktivieren Sie die Firewall.
$ sudo ufw enable
Aktivieren Sie den Port 4000, der vom Hexo-Server verwendet wird.
$ sudo ufw allow 4000
Öffnen Sie auch die HTTP- und HTTPS-Ports, die wir später benötigen werden.
$ sudo ufw allow http
$ sudo ufw allow https
Überprüfen Sie den Status der Firewall.
$ sudo ufw status
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
80/tcp ALLOW Anywhere
4000 ALLOW Anywhere
443/tcp ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
80/tcp (v6) ALLOW Anywhere (v6)
4000 (v6) ALLOW Anywhere (v6)
443/tcp (v6) ALLOW Anywhere (v6)
Installieren Sie Node.js
Da Hexo auf Node.js basiert, müssen Sie es zuerst installieren.
Führen Sie den folgenden Befehl aus, um das Node.js-Repository hinzuzufügen.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Installieren Sie Node.js.
$ sudo apt-get install nodejs
Bestätigen Sie, ob es ordnungsgemäß installiert ist.
$ node --version
v14.15.0
Hexo installieren
Führen Sie den folgenden Befehl aus, um das Hexo-Paket zu installieren.
$ sudo npm install hexo-cli -g
Der Parameter -g installiert das Paket hexo-cli global, wodurch Sie den Hexo-Blog in einem beliebigen Verzeichnis Ihrer Wahl installieren können.
Erstellen Sie das Verzeichnis, in dem Hexo installiert werden soll.
$ sudo mkdir -p /var/www/hexo
Legen Sie die erforderlichen Berechtigungen und Eigentumsverhältnisse fest.
$ sudo chown -R $USER:$USER /var/www/hexo
$ sudo chmod -R 755 /var/www/hexo
Als nächstes müssen Sie die notwendigen Dateien für den Hexo-Blog initialisieren und einrichten. Wechseln Sie dazu in das Verzeichnis, das Sie gerade erstellt haben.
$ cd /var/www/hexo
Initialisieren Sie das Hexo-Blog.
$ hexo init
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
added 185 packages from 430 contributors and audited 191 packages in 6.47s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
INFO Start blogging with Hexo!
Hexo installieren.
$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 5 packages from 1 contributor and audited 191 packages in 1.567s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Sie können nun die Verzeichnisstruktur überprüfen.
$ ls
_config.yml node_modules package-lock.json package.json scaffolds source themes
Die Datei _config.yml enthält die Konfiguration für Ihren Hexo-Blog. Die meisten der Blog-Einstellungen können von hier aus geändert werden.
Das Verzeichnis node_modules enthält alle Pakete, die Hexo benötigt und die, von denen es abhängt.
Die Datei package.json enthält eine Liste aller von Hexo benötigten Pakete und deren Versionsnummern.
Die Datei package-lock.json wird von npm jedes Mal automatisch generiert, wenn Sie eine Installation oder eine Änderung am Hexo-Paket vornehmen. Sie enthält Informationen über die Pakete und die Versionen, die installiert oder geändert wurden.
Das Verzeichnis scaffolds enthält die Vorlagen, auf denen Ihre Blog-Einträge und Seiten basieren werden.
Das Verzeichnis source enthält den eigentlichen Website-Inhalt im HTML/CSS-Format, der dann im Web veröffentlicht wird. Jeder Ordner oder jede Datei mit dem Präfix _(Unterstriche) wird von Hexo ignoriert, mit Ausnahme des Ordners _posts. Im Moment ist das Verzeichnis leer, weil wir noch nichts geschrieben oder veröffentlicht haben.
Das Verzeichnis themes enthält Ihre Blog-Themen.
Hexo konfigurieren
Öffnen Sie die Datei _config.yml zur Bearbeitung.
$ nano _config.yml
Überprüfen Sie den Abschnitt der Datei mit dem Titel Site
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
Die Optionen sind ziemlich selbsterklärend. Ändern Sie den Namen Ihrer Website, setzen Sie einen Untertitel, wenn Sie möchten. Fügen Sie eine Beschreibung Ihrer Site und einige Schlüsselwörter hinzu, um sie zu beschreiben. Ändern Sie den Autorennamen und die Zeitzone für Ihre Site.
Prüfen Sie als nächstes den Abschnitt URL in der Datei.
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
Ändern Sie die URL Ihrer Website in Ihren Domänennamen. Stellen Sie sicher, dass Sie HTTPS in Ihrer URL verwenden, da wir SSL später installieren werden.
Wenn Sie nicht möchten, dass Ihre Site-URL am Ende jeder Seite index.html anzeigt, können Sie die beiden Optionen trailing_index und trailing_html in false ändern.
Es gibt noch ein paar weitere Einstellungen, die Sie einschalten sollten.
Ändern Sie den Wert der Variablen default_layout von post in draft. Dadurch werden neue Beiträge als Entwürfe erstellt, so dass Sie diese veröffentlichen müssen, bevor sie im Blog erscheinen.
Ändern Sie den Wert der Variablen post_asset_folder in true. Dadurch erhalten Sie individuelle Bildordner für jeden Beitrag anstelle eines einzigen Bildordners für alle Beiträge.
Speichern Sie die Datei, indem Sie Strg+X drücken und Y eingeben, wenn Sie dazu aufgefordert werden.
Installieren eines Themas
Hexo wird mit einem Standardthema namens Landscape ausgeliefert. Sie können zu einem anderen Thema wechseln, indem Sie ein anderes Hexo-Thema installieren, das auf der Themes-Seite verfügbar ist.
Alle Hexo-Themen sind über Github verfügbar, so dass Sie das Github-Repository des Themas klonen müssen.
Für unser Tutorial installieren wir gerade das nächste Thema. Wechseln Sie in das Hexo-Verzeichnis und klonen Sie das Github-Repository des Themas in das Verzeichnis themes.
$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
Ändern Sie die Datei /var/www/hexo/_config.yml, um das Thema von Landscape auf Next zu ändern.
$ nano _config.yml
Nehmen Sie die Änderung an der Themenvariablen vor, um das Thema zu wechseln.
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
Sie können die Themeneinstellungen ändern, indem Sie die Datei /var/www/hexo/themes/next/_config.yml ändern.
Erstellen und Veröffentlichen eines Beitrags
Zeit, unseren ersten Posten zu schaffen.
$ hexo new first-post
INFO Validating config
INFO Created: /var/www/hexo/source/_drafts/first-post.md
Öffnen Sie den neuen Beitrag zur Bearbeitung.
$ nano ./source/_drafts/first-post.md
Für jeden Beitrag muss eine front-matter eingerichtet werden. Front-matter ist ein kurzer Block von JSON oder YAML, in dem wesentliche Details wie der Titel des Beitrags, das Veröffentlichungsdatum, Kategorien, Tags usw. konfiguriert werden. Ersetzen Sie die Standarddaten durch die richtigen Optionen.
title: Howtoforge's First Post
tags:
- test
categories:
- Hexo
comments: true
date: 2020-11-14 00:00:00
---
## Markdown goes here.
**This is our first post!**
Wenn Sie ein Bild in Ihren Beitrag einfügen möchten, fügen Sie den folgenden Code in Ihren Beitrag ein.
{% asset_img "example.jpg" "This is an example image" %}
Kopieren Sie danach die Datei example.jpg in das Verzeichnis \source\_posts\first-post, aus dem alle Bilder für Ihren ersten Beitrag abgerufen werden können.
Speichern Sie die Datei, indem Sie Strg+X drücken und Y eingeben, wenn Sie dazu aufgefordert werden, sobald Sie den Beitrag fertig geschrieben haben.
Als nächstes veröffentlichen Sie den Beitrag.
$ hexo publish first-post
INFO Validating config
INFO Published: /var/www/hexo/source/_posts/first-post.md
Dieser Beitrag wird sichtbar sein, sobald wir den Blog hosten.
Installieren eines Plugins
Hexo hat einige hundert Plugins, die Sie installieren können. Je nach Verwendung können Sie ein oder mehrere Plugins installieren.
Alle Hexo-Plugins sind Node.js-Pakete und werden auf Github gehostet, wo Sie ihre Installations- und Konfigurationsdetails finden können.
Für unser Tutorial werden wir die hexo-filter-nofollow Plugin.
Stellen Sie sicher, dass Sie sich zuerst im Hexo-Verzeichnis befinden und installieren Sie dann das Plugin.
$ cd /var/www/hexo
$ npm i hexo-filter-nofollow --save
Öffnen Sie die Hexo-Konfigurationsdatei zum Bearbeiten.
$ sudo nano _config.yml
Fügen Sie den folgenden Code am Ende der Datei ein.
nofollow:
enable: true
field: site
exclude:
- 'exclude1.com'
- 'exclude2.com'
Die Option enable aktiviert das Plugin. Die Option field definiert den Geltungsbereich des Plugins, wobei site das nofollow-Attribut zu den externen Links auf der gesamten Website hinzufügt und post das nofollow-Attribut nur zu den Links in den Beiträgen hinzufügt. Die Option exclude listet die Domains auf, bei denen das nofollow-Attribut nicht hinzugefügt wird.
Test-Server
Hexo wird mit einem einfachen Webserver ausgeliefert. Nun, da unser Beitrag veröffentlicht ist, ist es an der Zeit, den Hexo-Testserver zu starten.
$ hexo server
Sie können jetzt die URL http://yourserverIP:4000 in Ihrem Browser starten und sehen dann die folgende Seite.
Verlassen Sie den Server durch Drücken von Strg + C am Terminal.
Hexo Static-Dateien erzeugen
Der Test-Server von Hexo kann den Blog sowohl dynamisch als auch über die statischen Dateien bedienen. Der obige Befehl bedient das Blog dynamisch.
Es gibt mehrere Möglichkeiten, das Hexo-Blog öffentlich anzubieten. Für unser Tutorial werden wir die statischen Dateien von Hexo über den Nginx-Server bereitstellen.
Führen Sie den folgenden Befehl aus, um die statischen Dateien zu generieren.
$ hexo generate
Der obige Befehl erzeugt statische Dateien, die im Ordner /var/www/hexo/public gespeichert werden. Wir werden den Nginx-Server verwenden, um Dateien aus diesem Ordner bereitzustellen.
Installieren und Konfigurieren von Nginx
Installieren Sie den Nginx-Server.
$ sudo apt install nginx
Erstellen und öffnen Sie die Hexo-Konfigurationsdatei für Nginx.
$ sudo nano /etc/nginx/sites-available/hexo.conf
Fügen Sie den folgenden Code darin ein.
server {
server_name hexo.example.com;
root /var/www/hexo/public;
index index.html index.htm;
listen 443 ssl http2;
listen [::]:443 ssl http2;
ssl_certificate /etc/letsencrypt/live/hexo.example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/hexo.example.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_session_timeout 1d;
ssl_session_cache shared:MozSSL:10m; # about 40000 sessions
ssl_session_tickets off;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES25> ssl_prefer_server_ciphers off;
ssl_dhparam /etc/ssl/certs/dhparam.pem;
location / {
try_files $uri $uri/ =404;
}
}
server {
if ($host = hexo.example.com) {
return 301 https://$host$request_uri;
}
server_name hexo.example.com;
listen 80;
listen [::]:80;
return 404;
}
Speichern Sie die Datei, indem Sie Strg+X drücken und Y eingeben, wenn Sie dazu aufgefordert werden.
Aktivieren Sie die Konfiguration.
$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/
Öffnen Sie die Datei /etc/nginx/nginx.conf zur Bearbeitung.
$ sudo nano /etc/nginx/nginx.conf
Fügen Sie die folgende Zeile vor der Zeile include /etc/nginx/conf.d/*.conf
server_names_hash_bucket_size 64;
Ändern Sie den Wert der Variable types_hash_max_size von 2048 auf 4096.
types_hash_max_size 4096;
Drücken Sie Strg + X, um den Editor zu schließen, und drücken Sie Y, wenn Sie zum Speichern der Datei aufgefordert werden.
Testen Sie, um sicherzustellen, dass keine Syntaxfehler in Ihrer Konfiguration vorhanden sind.
$ sudo nginx -t
Wenn es keine Probleme gibt, starten Sie den Nginx-Server neu.
$ sudo systemctl restart nginx
SSL installieren
Es ist an der Zeit, SSL mit dem Dienst Let’s Encrypt für unseren Hexo-Blog zu installieren.
Installieren Sie dazu Certbot.
$ sudo apt install certbot
Stoppen Sie Nginx, da es den Certbot-Prozess stören wird.
$ sudo systemctl stop nginx
Erzeugen Sie das Zertifikat. Wir müssen auch ein DHParams-Zertifikat erstellen.
$ sudo certbot certonly --standalone -d hexo.yourdomain.com --preferred-challenges http --agree-tos -n -m [email protected] --keep-until-expiring
$ sudo systemctl start nginx
$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048
Wir müssen auch einen Cron-Job für die automatische Erneuerung der SSL einrichten. Um den Crontab-Editor zu öffnen, führen Sie den folgenden Befehl aus.
$ sudo crontab -e
no crontab for root - using an empty one
Select an editor. To change later, run 'select-editor'.
1. /bin/nano <---- easiest
2. /usr/bin/vim.basic
3. /usr/bin/vim.tiny
4. /bin/ed
Choose 1-4 [1]: 1
Der obige Befehl öffnet den Crontab-Editor. Wenn Sie ihn zum ersten Mal ausführen, werden Sie aufgefordert, den Editor für die Bearbeitung von Cron-Jobs zu wählen. Wählen Sie 1 für den Nano-Editor.
Fügen Sie die folgende Zeile unten ein.
25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”
Der obige Cron-Job wird certbot jeden Tag um 2:25 Uhr ausführen. Sie können ihn nach Belieben ändern.
Speichern Sie die Datei, indem Sie Strg + X drücken und Y eingeben, wenn Sie dazu aufgefordert werden.
Hexo aktualisieren
Wechseln Sie zum Ordner Hexo.
$ cd /var/www/hexo
Wenn Sie zu einer größeren Hexo-Version wechseln, müssen Sie die Datei package.json aktualisieren. Öffnen Sie sie zum Bearbeiten. Sie können direkt zum Aktualisierungsbefehl für die Aktualisierung auf Minor-Versionen springen.
$ nano package.json
Ändern Sie die folgende Zeile unter dem Abschnitt dependencies.
"hexo": "^5.0.0",
Ändern Sie den Wert 5.0.0 auf die nächste Version, wenn diese in Zukunft veröffentlicht wird. Wenn z.B. Hexo 6.0 nicht verfügbar ist, dann ändern Sie ihn auf folgende.
"hexo": "^6.0.0",
Speichern Sie die Datei, indem Sie Strg + X drücken und Y eingeben, wenn Sie dazu aufgefordert werden.
Führen Sie den folgenden Befehl aus, um Hexo zu aktualisieren.
$ npm update
Bereitstellen von Hexo
Hexo kann nicht nur direkt auf Ihrem Server gehostet werden, sondern kann auch direkt auf Git, Netlify, Vercel, Heroku, OpenShift und verschiedenen anderen Methoden eingesetzt werden.
Für die meisten Deployment-Plugins müssen Sie ein Plugin installieren. Für unser Tutorial werden wir den Einsatz von Hexo in Netlify einrichten. Wenn Sie Netlify einsetzen möchten, brauchen Sie die Schritte im Zusammenhang mit Nginx und SSL nicht zu befolgen, da Netlify mit kostenlosem SSL geliefert wird.
Eine Netlify-Site wird normalerweise von einem Git-Repository aus bereitgestellt. Für unsere Zwecke veröffentlichen wir die statische Site jedoch direkt bei Netlify unter Verwendung des CLI-Tools von Netlify.
Netlify-CLI installieren.
$ sudo npm install netlify-cli -g
Sie können überprüfen, ob das CLI-Tool installiert wurde.
$ netlify --version
netlify-cli/2.68.5 linux-x64 node-v14.15.0
Bei Netlify anmelden.
$ netlify login
Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=dfb575d97d07213c9cf73848c8d19e90
You are now logged into your Netlify account!
Run netlify status for account details
To see all available commands run: netlify help
Kopieren Sie die Anmeldung vom Terminal in Ihren Browser und melden Sie sich in Ihrem Netlify-Konto an, um sich zu authentifizieren.
Sie können überprüfen, ob Sie angemeldet sind, indem Sie den folgenden Befehl verwenden.
$ netlify status
???????????????????????
Current Netlify User ?
???????????????????????
Name: Your Name
Email: [email protected]
Teams:
Your Team's team: Collaborator
Wechseln Sie in das öffentliche Verzeichnis von Hexo.
$ cd /var/www/hexo/public
Stellen Sie die Website bei Netlify bereit.
$ netlify deploy
This folder isn't linked to a site yet
? What would you like to do? + Create & configure a new site
? Team: Navjot Singh's team
Choose a unique site name (e.g. isnt-yourname-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): Howtoforge
Site Created
Admin URL: https://app.netlify.com/sites/Howtoforge
URL: https://Howtoforge.netlify.app
Site ID: 986c931c-3f06-40a1-a89b-59621f337c18
Please provide a publish directory (e.g. "public" or "dist" or "."):
/var/www/hexo/public
? Publish directory /var/www/hexo/public
Deploy path: /var/www/hexo/public
Deploying to draft URL...
? Finished hashing 37 files
? CDN requesting 9 files
? Finished uploading 9 assets
? Deploy is live!
Logs: https://app.netlify.com/sites/howtoforge/deploys/5fb0c9b806e72eb9c5f073c8
Website Draft URL: https://5fb0c9b806e72eb9c5f073c8--howtoforge.netlify.app
If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
Wählen Sie mit den Pfeiltasten, um eine neue Site zu erstellen, und geben Sie einen Namen für Ihre Site ein. Geben Sie . als zu deployendes Verzeichnis ein, von dem aus auf das aktuelle Verzeichnis verwiesen wird.
Sie erhalten einen URL-Entwurf. Kopieren Sie die URL und laden Sie sie in einen Browser. Wenn alles gut aussieht, führen Sie den folgenden Befehl aus, um eine produktive Bereitstellung durchzuführen.
$ netlify deploy --prod
Ihre Website sollte jetzt live sein. Sie können in den Netlify-Einstellungen eine benutzerdefinierte Domäne hinzufügen, um sie auf eine echte Site zu verweisen.
Jedes Mal, wenn Sie einen neuen Beitrag veröffentlichen und neue Dateien erzeugen, führen Sie den folgenden Befehl aus dem Hexo-Hauptverzeichnis aus, um die Änderungen in Netlify zu implementieren.
$ netlify deploy --dir ./public --prod
Schlussfolgerung
Dies beschließt unser Tutorial zur Installation und Erstellung eines Blogs unter Verwendung des Hexo Blog-Frameworks auf einem Ubuntu 20.04-basierten Server. Wenn Sie Fragen haben, stellen Sie diese in den Kommentaren unten.
