TOC

Erstellen eines Blogs mit Hexo unter Ubuntu 14.04

Einführung

Hexo ist ein statisches Blogging-Framework, das auf https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for- production-on-ubuntu-14-04 [Node.js]. Mit Hexo können Sie Markdown-Dokumente in Form von Blog-Posts veröffentlichen. Blogposts und -inhalte werden verarbeitet und in HTML / CSS konvertiert, das aus den Standard- oder benutzerdefinierten Vorlagenthemadateien stammt (ähnlich wie bei anderen statischen Bloggeneratoren wie Jekyll und Ghost). Die gesamte Software in Hexo ist modular aufgebaut, sodass Sie genau das installieren und einrichten können, was Sie benötigen.

In diesem Tutorial wird Hexo mit einer Bereitstellung eingerichtet, die von GitHub und Nginx unterstützt wird.

Voraussetzungen

Um diesem Tutorial zu folgen, benötigen Sie:

Schritt 1 - Installieren und Initialisieren von Hexo

Dieser erste Abschnitt enthält alles, was Sie benötigen, um Hexo auf Ihrem Server zum Laufen zu bringen.

Stellen Sie zunächst sicher, dass die Systempakete auf dem neuesten Stand sind.

sudo apt-get update && sudo apt-get upgrade

Das Hexo-Blogging-Framework besteht aus mehreren Softwarepaketen und -komponenten. Hier wollen wir mit + npm +, dem Paketmanager von Node.js, zwei der wichtigsten herausholen.

Das erste, "+ hexo-cli +", ist das wichtigste und enthält die wichtigsten Hexo-Befehle.

npm install hexo-cli -g

Der zweite, "+ Hexo-Server +", ist der integrierte Server, mit dem Sie eine Vorschau Ihres Blogs anzeigen und es testen können, bevor Sie es bereitstellen.

npm install hexo-server -g

Es gibt noch viele weitere Pakete. Dies ist einfach das Nötigste, um Ihren Hexo-Blog zum Laufen zu bringen. Weitere Pakete, die als Teil des Hexo-Frameworks verfügbar sind, finden Sie unter npm search.

Als Nächstes müssen wir die Basisdateien für Ihr neues Blog einrichten. Glücklicherweise erledigt Hexo alle Vorarbeiten mit einem einzigen Befehl. Sie müssen lediglich einen Pfad oder Ordner angeben, in dem sich die Blog-Konfigurationsdateien befinden sollen.

Eine praktische Option ist das Ausgangsverzeichnis Ihres Benutzers.

hexo init ~/hexo_blog

Innerhalb von ein oder zwei Sekunden erhalten Sie eine Ausgabe:

Output. . .

INFO  Copying data to ~/hexo_blog
INFO  You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!

. . .

Wechseln Sie anschließend in das Verzeichnis mit Ihren Konfigurationsdateien.

cd ~/hexo_blog

Führen Sie dann den oben genannten Installationsbefehl aus.

npm install

Sie können optionale Abhängigkeitswarnungen von + npm + ignorieren. Nach einigen Sekunden Verarbeitungszeit haben wir unsere Basis-Konfigurationsdateien.

Schritt 2 - Einrichten der Hauptkonfigurationsdatei von Hexo

Werfen wir einen Blick auf die Basis-Konfigurationsdateien in unserem Hexo-Verzeichnis.

ls -l
Output-rw-rw-r--   1 sammy sammy 1483 Jan 11 12:30 _config.yml
drwxrwxr-x 191 sammy sammy 4096 Jan 11 12:31 node_modules
-rw-rw-r--   1 sammy sammy  442 Jan 11 12:30 package.json
drwxrwxr-x   2 sammy sammy 4096 Jan 11 12:30 scaffolds
drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 source
drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 themes

Von allen vorhandenen Dateien ist wohl die Datei "+ _config.yml +" die wichtigste. Alle Kerneinstellungen werden hier gespeichert und sind für den Blog von zentraler Bedeutung. Wenn Sie in Zukunft etwas optimieren müssen, ist dies wahrscheinlich in dieser Datei enthalten.

Wir werden als nächstes einige grundlegende Anpassungen vornehmen, indem wir Stück für Stück die Datei "+ _config.yml " durchgehen. Öffnen Sie die Datei " _config.yml " mit " nano +" oder Ihrem bevorzugten Texteditor.

nano _config.yml

Am Anfang der Datei sollte ein Abschnitt mit der Bezeichnung * Site * angezeigt werden:

Original ~ / hexo_blog / _config.yml

. . .

# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:

. . .

Die ersten vier Zeilen enthalten den Namen Ihres Blogs, einen geeigneten Untertitel, eine Beschreibung und den Namen des Autors. Sie können wählen, was Sie für diese Optionen möchten. Beachten Sie, dass diese Daten nicht in allen Hexo-Designs angezeigt werden. Daher dienen sie hauptsächlich als relevante Site-Metadaten.

Die nächsten beiden Optionen sind Sprache und Zeitzone. Die Sprachoption akzeptiert nur 2-letter ISO-639-1 codes. Die Zeitzone ist standardmäßig auf die Zeitzone Ihres Servers eingestellt und verwendet die Formatierung "tz database ”. Wenn Sie eine dieser Optionen ändern möchten, stellen Sie sicher, dass sie in diesen Formaten vorliegen.

Hier sind einige Beispielwerte:

Beispiel ~ / hexo_blog / _config.yml

. . .

#Site
title:
subtitle:
description:
author:
language:
timezone:

. . .

Der nächste Abschnitt ist der Abschnitt * URL *. Hier möchten wir die URL-Option ändern. Da wir derzeit keinen Domainnamen für unseren Server haben, können wir hier die IP-Adresse für die Einstellung "+ url: +" eingeben.

~ / hexo_blog / _config.yml

. . .

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

. . .

Die letzte Option, die wir ändern möchten, ist "+ default_layout: +" im Abschnitt "Schreiben" etwas weiter unten. Dadurch werden neue Beiträge als Entwürfe erstellt. Sie müssen daher veröffentlicht werden, bevor sie auf der Blog-Website angezeigt werden.

Setze es jetzt auf "+ draft +" wie wir es unten gemacht haben:

~ / hexo_blog / _config.yml

. . .

# Writing
new_post_name: :title.md # File name of new posts
default_layout:
titlecase: false # Transform title into titlecase

. . .

Speichern und beenden Sie die Datei vorerst. Wir werden kurz auf diese Datei für die Bereitstellungsphasen gegen Ende des Tutorials zurückkommen.

Schritt 3 - Erstellen und Veröffentlichen eines neuen Posts

Der Prozess zum Erstellen eines Posts (oder Entwurfs, wie wir ihn zuvor konfiguriert haben) beginnt mit dem folgenden Befehl, wobei * first-post * der Name des Posts ist, den Sie erstellen möchten.

hexo new

Sie sollten die folgende Ausgabe sehen:

OutputINFO  Created: ~/hexo_blog/source/_drafts/first-post.md

Öffne den neuen Beitrag zur Bearbeitung.

nano ~/hexo_blog/source/_drafts/first-post.md
Für jeden Beitrag muss front-matter eingerichtet sein. Front-matter ist ein kurzer Block von JSON oder YAML, in dem Einstellungen wie der Titel Ihres Posts, das Veröffentlichungsdatum, Tags usw. konfiguriert werden. Das Ende der Front wird durch den ersten "+ --- " - oder " ;

+" - Marker gekennzeichnet. Nach der Einführung können Sie Ihren Blog-Beitrag mit Markdown-Syntax schreiben.

Ersetzen Sie den Standardinhalt in "+ first-post.md +" durch die folgenden Beispieloptionen in der Datei, um den Beitrag zu starten. Sie können sie anpassen, wenn Sie möchten.

Beispiel ~ / hexo_blog / source / _drafts / first-post.md

title: DigitalOcean's First Post
tags:
 - Test
 - Blog
categories:
 - Hexo
comments: true
date: 2015-12-31 00:00:00
---

## Markdown goes here.

**This is our first post!**

Speichern und schließen Sie die Datei.

Die soeben erstellte Markdown-Datei wird in + ~ / hexo_blog / source / _drafts + gespeichert, bis wir sie veröffentlichen. Alle Posts im Ordner "+ _drafts +" sind für Besucher auf der Website nicht sichtbar.

Veröffentlichen Sie als Nächstes den Beitrag, damit die Besucher _auf ihn _ zugreifen können.

hexo publish first-post

Das führt zu:

OutputINFO  Published: ~/hexo_blog/source/_posts/first-post.md

Der Beitrag wird nun sichtbar, sobald wir mit dem Hosten des Blogs beginnen.

Schritt 4 - Ausführen des Testservers

Jetzt sind die vorherigen Konfigurationsdateien fertig und wir haben einen Beispielbeitrag fertig. Als Nächstes starten wir den Testserver.

hexo server

Es ist möglich, den Testserver zu zwingen, Beiträge im Ordner "+ _drafts " zu rendern. Verwenden Sie dazu die Option " -d +", wenn Sie den letzten Befehl absetzen.

Nachdem der Testserver jetzt ausgeführt wird, können Sie Ihr Blog anzeigen, indem Sie in Ihrem bevorzugten Browser "+ http: //: 4000 / +" aufrufen. Sie sehen Hexos vordefinierten "Hello World" -Testbeitrag und den Testbeitrag, den wir gerade erstellt haben.

image: https://assets.digitalocean.com/articles/hexo/07hIfZs.png [Hexo-Blog-Bild von DigitalOcean]

Beenden Sie den Testserver, indem Sie im Terminal die Tastenkombination "+ STRG + C +" drücken.

Der Testserver eignet sich am besten für die Vorschau von Änderungen und Ergänzungen in Ihrem Blog. Sobald Sie mit dem Aussehen zufrieden sind, können Sie es im Web bereitstellen.

Schritt 5 - Einrichten der Git-Bereitstellung

Es gibt verschiedene Möglichkeiten, um das, was wir bisher mit Hexo getan haben, bereitzustellen. Der Ansatz in diesem Lernprogramm besteht darin, die statischen Dateien mit Git zu speichern, sie mit Hooks weiterzuleiten und sie dann mit Nginx zu hosten. Es gibt jedoch Unterstützung für Heroku, Git, Rsync, OpenShift, FTPSync und mehr mit zusätzlichen Framework-Paketen.

Um fortzufahren, benötigen Sie ein Git-Repository zum Speichern der statischen HTML-Dateien, die Hexo generiert. Um dies einfach zu halten, verwenden wir ein öffentliches Git-Repository, das von GitHub bereitgestellt wird.

Erstellen Sie ein neues Repository unter GitHub mit dem Namen * hexo_static *, indem Sie die entsprechenden Schritte unter https://help.github.com/articles/creating-a-new-repository/[repository creation ausführen. Stellen Sie sicher, dass Sie die Option „Öffentlich“ auswählen und das Kontrollkästchen * Dieses Repository mit einer README-Datei initialisieren * aktivieren.

Nachdem Sie das Repository erstellt haben, öffnen Sie die Haupt-Hexo-Konfigurationsdatei zur Bearbeitung.

nano _config.yml

Am Ende der Datei befindet sich ein Abschnitt mit der Bezeichnung * Bereitstellung *:

Original ~ / hexo_blog / _config.yml

. . .

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
 type:

Füllen Sie die Optionen für "+ deploy: " wie unten gezeigt aus. Beachten Sie, dass die Zeile " repo " die URL zu dem soeben erstellten Git-Repository enthalten sollte. Ersetzen Sie daher "+" durch Ihren eigenen GitHub-Account-Benutzernamen.

~ / hexo_blog / _config.yml

deploy:
 type:

Speichern und schließen Sie die Datei.

Da wir uns für die Bereitstellung von Git entschieden haben, benötigen wir das Hexo-Paket, das unser statisches Markup an das Git-Repository sendet.

Benutze + npm + um es zu installieren.

npm install hexo-deployer-git --save

Sie können nun die Bereitstellung im Repository + hexo_static + testen und ihr das erste automatische Hexo-Commit erteilen:

hexo generate && hexo deploy

Geben Sie Ihre GitHub-Authentifizierungsdetails ein, wenn Sie dazu aufgefordert werden.

So sieht eine erfolgreiche Ausgabe nach Verwendung dieser Befehle aus (oder ähnlich). Abzüglich der Dateigenerationen und Git-Einfügungen:

OutputTo username
* [new branch]      master -> master
Branch master set up to track remote branch master from username
INFO  Deploy done: git

Schritt 6 - Einrichten von Nginx

Wir verwenden ein grundlegendes Nginx-Webserver-Setup, um das Hexo-Blog bereitzustellen, da Nginx statische Inhalte sehr gut bereitstellt und unser Blog immer nur statische Dateien enthält. Es gibt andere praktikable Optionen, die ebenfalls gut funktionieren, wie GitHub-Seiten oder Webserver wie Apache, aber diese Auswahl gewährleistet insbesondere eine gewisse Effizienz und persönliche Kontrolle über das Hosting.

Erstellen Sie zunächst die Systemverzeichnisse, die Nginx für das Hosting verwenden soll.

sudo mkdir -p /var/www/hexo

Geben Sie dann Ihrem aktuellen Ubuntu-Benutzer den Besitz dieser Webserver-Systemverzeichnisse.

sudo chown -R $USER:$USER /var/www/hexo

Aktualisieren Sie die permissions in Übereinstimmung mit dem Eigentümer.

sudo chmod -R 755 /var/www/hexo

Öffnen Sie den Nginx-Serverblock "+ default +" zum Bearbeiten.

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

Wenn Sie die auskommentierten Bereiche und Zeilen der Datei ignorieren, nehmen Sie Änderungen am aktiven Teil des Konfigurationscodes vor, sodass die Direktive + root + auf das Verzeichnis + / var / www / hexo + verweist.

/ etc / nginx / sites-available / default

. . .

server {
   listen 80 default_server;
   listen [::]:80 default_server ipv6only=on;

   root ;
   index index.html index.htm;

. . .

Speichern und schließen Sie die Datei. Wenn Sie in Zukunft einen Domainnamen für diesen Server einrichten, kehren Sie zu dieser Datei zurück und ersetzen Sie den Eintrag "+ Servername +" im selben Block durch Ihren neuen Domainnamen.

Starten Sie zuletzt den Nginx-Dienst neu, damit die Änderungen wirksam werden.

sudo service nginx restart

Schritt 7 - Git Hooks erstellen

In diesem Schritt verknüpfen wir das * hexo_static * -Repository mit einem anderen Git-Repository, damit wir die statischen HTML-Dateien an das Webserver-Verzeichnis senden können (wenn sie ausgelöst werden).

Initialisieren Sie zunächst ein neues leeres Git-Repository (nicht auf GitHub). Das einzige Ziel dieses Repositorys ist es, den Inhalt unseres hexo_static-Repositorys in das Webserververzeichnis weiterzuleiten.

git init --bare ~/hexo_bare

Erstelle eine neue Hook-Datei im Git-generierten + hooks + Verzeichnis:

nano ~/hexo_bare/hooks/post-receive

Fügen Sie die beiden folgenden Codezeilen in die Datei ein. Dies gibt den Git-Arbeitsbaum (der den Quellcode enthält) und das Git-Verzeichnis (das Konfigurationseinstellungen, Verlauf und mehr enthält) an.

~ / hexo_bare / hooks / post-receive

#!/bin/bash

git --work-tree=/var/www/hexo --git-dir=/home/$USER/hexo_bare checkout -f

Speichern und beenden Sie die Datei, sobald Sie fertig sind.

Machen Sie diese "+ post-receive +" - Datei ausführbar.

chmod +x ~/hexo_bare/hooks/post-receive

Wir müssen jetzt das in Schritt 5 erstellte Implementierungsrepository "+ hexo_static " auf unseren Server klonen. Stellen Sie sicher, dass Sie in diesem nächsten Befehl "+" durch Ihren eigenen GitHub-Account-Benutzernamen ersetzen.

git clone https://github.com//hexo_static.git ~/hexo_static

Bewegen Sie sich in das geklonte Repository.

cd ~/hexo_static

Schließlich fügen Sie unser nacktes Repository von früher als Git-Remote mit dem Namen * live * hinzu.

git remote add live ~/hexo_bare

Schritt 8 - Erstellen des Bereitstellungsskripts

Ein kurzes Shell-Skript kann verwendet werden, um den gesamten Bereitstellungsprozess zu starten und auszulösen, den wir hier eingerichtet haben. Dies bedeutet, dass wir nicht mehrere Hexo-Befehle einzeln ausführen oder den Git-Hook mit mehreren Befehlen auslösen müssen.

Gehen Sie zurück in unser ursprüngliches Hexo-Blogverzeichnis und erstellen Sie eine Datei für das Bereitstellungsskript.

cd ~/hexo_blog
nano hexo_git_deploy.sh

Fügen Sie den folgenden Code in die Datei ein:

hexo_blog / hexo_git_deploy.sh

#!/bin/bash

hexo clean
hexo generate
hexo deploy

( cd ~/hexo_static ; git pull ; git push live master )

Speichern und beenden Sie die Datei.

Das Skript enthält drei + hexo + Befehle:

  • + clean + entfernt alle zuvor generierten statischen Dateien im öffentlichen Ordner.

  • + generate + erstellt die statischen HTML-Dateien aus unserem Markdown im öffentlichen Ordner.

  • + deploy + sendet die neu generierten statischen Dateien als Commit an das “live” Git-Repository, das wir zuvor in + _config.yml + definiert haben.

Die letzte Zeile, + (cd ~ / hexo_static; git pull; git push live master) +, löst den Git-Hook aus und aktualisiert das Hosting-Verzeichnis des Webservers mit unseren statischen HTML-Dateien.

Vergessen Sie nicht, die ausgefüllte Datei zu speichern und zu beenden.

Machen Sie das neue Bereitstellungsskript ausführbar, um diesen Schritt abzuschließen.

chmod +x hexo_git_deploy.sh

Schritt 9 - Ausführen des Bereitstellungsskripts

Führen Sie das im vorherigen Schritt erstellte Bereitstellungsskript aus, um den gesamten Bereitstellungsprozess zu testen.

./hexo_git_deploy.sh

Warten Sie, bis die Befehle und die Verarbeitung abgeschlossen sind, und geben Sie dabei die GitHub-Authentifizierungsdetails ein. Schauen Sie sich dann die Dateien im Verzeichnis + / var / www / hexo + an.

ls /var/www/hexo
Output2015  2016  archives  categories  css  fancybox  index.html  js  tags

Ihr Webserververzeichnis sollte nun mit den Website-Dateien des Blogs gefüllt sein. Wenn Sie also über Ihren Browser auf den Webserver zugreifen, gelangen Sie zum Blog.

Besuchen Sie "+ http: /// +" in Ihrem bevorzugten Browser, um Ihr Blog live zu sehen (ohne den Testserver zu verwenden).

Um in Zukunft neue Blog-Änderungen bereitzustellen, müssen Sie lediglich das Skript + hexo_git_deploy.sh + erneut ausführen. Denken Sie daran, neue Posts vor der Bereitstellung mit den Befehlen + hexo server + oder + hexo server -d + auf Fehler zu testen.

Schritt 10 - Untersuchen des Hexo-Dateisystems (optional)

Dieser Abschnitt ist optional und bietet Hintergrundinformationen zum restlichen Hexo-Dateisystem. Keine dieser Dateien muss für dieses Lernprogramm geändert oder geändert werden. Es ist jedoch gut, den allgemeinen Zweck der einzelnen Dateien zu kennen, wenn Sie sie in Zukunft verwenden möchten.

Das Layout der Dateien und Verzeichnisse sieht folgendermaßen aus:

Hexo files and directories├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes

node_modules

In diesem Verzeichnis speichert Hexo die Module, die Sie über "+ npm +" herunterladen, zur Verwendung mit Ihrem Blog. Am Ende dieses Tutorials werden nur die Pakete angezeigt, die wir in Schritt 1 heruntergeladen haben.

Outputhexo  hexo-generator-archive  hexo-generator-category  hexo-generator-index  hexo-generator-tag  hexo-renderer-ejs  hexo-renderer-marked  hexo-renderer-stylus  hexo-server

Einige dieser unbekannten Module werden als Teil der Kernpakete gebündelt. Normalerweise müssen die Dateien hier nicht wirklich geändert oder entfernt werden.

package.json

Diese JSON-Datei enthält unsere Hexo-Paketkonfigurationen und -Versionen, die Hexo für Ihr Blog verwendet.

Wenn Sie jemals * manuell * ein Paket aktualisieren, downgraden oder entfernen müssen, können Sie die hier angegebenen Werte ändern. Normalerweise müssen Sie dies nur tun, wenn ein Konflikt innerhalb von Hexo auftritt, was relativ ungewöhnlich ist.

Gerüste

Beim Erstellen neuer Beiträge kann Hexo diese auf Vorlagendateien im Ordner "+ scaffolds +" basieren.

Sie müssen zuerst Vorlagendateien erstellen und diese hier ablegen, um sie zu verwenden. Diese Funktion ist optional und nur erforderlich, wenn Sie wiederholte Layouts für Ihre zukünftigen Hexo-Posts wünschen.

Quelle

Die Posts, die Sie veröffentlichen und die für die Öffentlichkeit sichtbar sein sollen, werden in "+ _posts " gespeichert. Sobald sie erstellt wurden, befinden sich hier auch der Ordner " _drafts +" und alle anderen vom Benutzer erstellten Seiten.

Der Großteil des Markdown-Inhalts Ihres Blogs wird von Hexo in einem dieser Unterordner abgelegt.

Themen

Einmal heruntergeladene benutzerdefinierte Designs sollten hier gespeichert werden. Die meisten Designs haben ihre eigene Datei "+ _config.yml +", in der die entsprechenden Konfigurationseinstellungen gespeichert sind. Für die Zwecke dieses Handbuchs haben wir uns an das Standardthema gehalten.

Fazit

Hexo bietet viel mehr als das, was in diesem Handbuch behandelt wurde. Dies ist jedoch ein guter Vorsprung für die Erstellung Ihrer neuen Blogging-Website. Die documentation for Hexo ist sehr übersichtlich, wenn Sie mehr erfahren möchten. Die Installation eines der für Hexo verfügbaren custom-Themes ist der nächste Schritt zur Entwicklung Ihres Blogs.

Related