So erstellen Sie einen einfachen Blog mit Hexo Static Site Generator
In diesem Tutorial werden Ihnen angezeigt, wie Sie ein einfaches Blog mit einem statischen Site -Generator einrichten können, der sehr schnell und einfach zu bedienen ist.
Was ist ein SSG?
SSG oder statischer Site -Generator ist eine Webanwendung, die den dynamischen Inhalt auf einer Webseite in statische Inhalte umwandelt, die normalerweise lokal gespeichert sind. Statische Site -Generatoren benötigen keine Datenbanken und Backends, wodurch die Notwendigkeit beseitigt wird, zu lernen, wie man codiert. Es konzentriert sich hauptsächlich auf das Schreiben und Präsentieren des Inhalts.
SSG vs. CMS
Die beliebteste Möglichkeit, Websites zu erstellen und Inhalte zu verwalten, ist die Verwendung von CMS- oder Content -Management -Systemen wie WordPress, Drupal, Joomla usw.
CMS -Systeme funktionieren, indem Inhalte direkt über eine interaktive Schnittstelle erstellt und verwaltet werden. Da Daten in einem CMS aus der Datenbank abgerufen werden, sind CMS sehr langsam, da der Inhalt abgerufen und als dynamischer Inhalt dient. CMS -Systeme sind auch anfällig für Sicherheitslücken, da sie sich auf externe Plugins verlassen, die von anderen Entwicklern verfasst wurden, um die Funktionalität zu erhöhen.
Andererseits arbeiten statische Site -Generatoren, indem sie Inhalte offline. Da der Inhalt lokal gerendert ist, ohne dass eine Datenbank erforderlich ist, wird die Seite schneller und Lastgeschwindigkeiten sind unglaublich schnell.
Statische Site-Generatoren bestehen aus vorkompiliertem Code, der als Engine für den veröffentlichten Inhalt fungiert.
Wie man einen statischen Blog mit Hexo erstellt
Eine der beliebten Auswahlmöglichkeiten für den Bau eines statischen Standorts ist Hexo.
Hexo ist eine einfache, schnelle und leistungsstarke SSG -Anwendung, die in NodeJS geschrieben wurde. Obwohl es andere Möglichkeiten zum Erstellen einer statischen Website gibt, können Sie mit Hexo Ihre Website anpassen und verschiedene Tools integrieren.
Sehen wir uns an, wie wir eine einfache statische Seite mit Hexo einrichten können.
Hexo installieren
Bevor wir eine Website erstellen können, müssen wir Hexo -Anforderungen einrichten und installieren. Dafür benötigen wir NodeJs und Git.
Beginnen Sie mit der Aktualisierung Ihres Systems:
sudo apt-Get-Update
sudo apt-get upgrade
Sobald Sie Ihr System auf dem neuesten Stand haben, installieren Sie Git
sudo apt-Get Installieren Sie Git
Installieren Sie NodeJs als Nächstes mit dem Befehl von nodesource:
curl -l https: // deb.nodesource.com/setup_14.x | sudo -e Bash -
APT -GET -Installation -y -Nodejs
Sobald Sie NodeJs installiert haben, können wir mit dem Befehl Hexo installieren:
npm install -g hexo -cli
Arbeiten mit Hexo
Sobald Sie Hexo installiert haben, können Sie eine Website erstellen und Inhalte veröffentlichen. Lassen Sie uns sehen, wie man mit Hexo arbeitet. Denken Sie daran, dass dies eine schnelle, einfache Anleitung ist. Siehe Dokumentation, um mehr zu erfahren.
Erstellen einer Website
Verwenden Sie den folgenden Befehl, um eine neue Hexo -Site zu erstellen:
Hexo init hexosite
CD Hexosite
NPM Installation
Verständnis der Hexo -Verzeichnisstruktur
Sobald Sie eine neue Hexo -Site initialisieren, erhalten Sie eine Verzeichnisstruktur wie die folgenden:
-RW-R-R-1 CS CS 0 8. Februar 20:51 _config.Landschaft.YML
-RW-R-R-1 CS CS 2439 8. Februar 20:51 _config.YML DRWXR-XR-X 1 CS CS 4096 8. Februar 20:51 NODE_MODULES
-RW-R-R-1 CS CS 615 8. Februar 20:51 Paket.JSON
-RW-R-R-1 CS CS 56716 8. Februar 20:51 Paketschloss.JSON DRWXR-XR-X 1 CS CS 4096 8. Februar 20:51 Gerüst Drwxr-XR-X 1 CS CS 4096 8. Februar 20:51 Quelle DRWXR-XR-X 1 CS CS 4096 8 20:51 Themen
Die erste Datei ist die _config.YML enthält alle Einstellungen für Ihre Website. Stellen Sie sicher, dass Sie es ändern, bevor Sie Ihre Website bereitstellen, da sie Standardwerte enthalten.
Die nächste Datei ist das Paket.JSON -Datei, die die NodeJS -Anwendungsdaten und Konfigurationen enthält. Hier finden Sie installierte Pakete und ihre Versionen.
Sie können mehr über das Paket erfahren.JSON von der Ressourcenseite unten:
https: // docs.NPMJS.com/cli/v6/configuring-npm/package-json
Erstellen eines Blogs
Verwenden Sie den Befehl, um einen einfachen Blog in Hexo zu erstellen:
Hexo neuer Blog "Hello World Blog"
Nach dem Erstellen können Sie die Markdown -Datei unter /Quelle /_posts -Verzeichnis einreichen. Sie müssen die Markd -Markup -Sprache verwenden, um Inhalte zu schreiben.
Erstellen einer neuen Seite
Das Erstellen einer Seite in Hexo ist einfach; Verwenden Sie den Befehl:
Hexo neuer Seite "Seite-2"
Die Seitenquelle befindet sich unter/Quelle/Seite 2/Index.md
Inhalte generieren und bedienen
Sobald Sie Ihre Inhalte auf Hexo veröffentlichen, müssen Sie die Anwendung ausführen, um den statischen Inhalt zu generieren.
Verwenden Sie die folgenden Befehle:
$ hexo generieren
Info Validating Config
Info starten Sie die Verarbeitung
Info -Dateien in 966 ms geladen
Info generiert: Archive/Index.html
Info generierte: Seite 2/Index.html
Info generierte: archives/2021/index.html
Info generiert: Index.html
Info generierte: Archiv/2021/02/Index.html
Info generierte: js/script.JS
Info generiert: FancyBox/JQuery.Fancybox.Mindest.CSS
Info generiert: 2021/02/08/Hallo-Welt-Post/Index.html
Info generiert: CSS/Stil.CSS
Info generiert: 2021/02/08/Hallo-Welt/Index.html
Generierte Informationen: CSS/Schriftarten/fontAwesome.otf
Generierte Informationen: CSS/Schriftarten/Fontawesome-Webfont.Woff
Generierte Informationen: CSS/Schriftarten/Fontawesome-Webfont.eot
Info generiert: FancyBox/JQuery.Fancybox.Mindest.JS
Generierte Informationen: CSS/Schriftarten/Fontawesome-Webfont.Woff2
Info generiert: JS/JQuery-3.4.1.Mindest.JS
Generierte Informationen: CSS/Schriftarten/Fontawesome-Webfont.ttf
Info generiert: CSS/Bilder/Banner.JPG
Generierte Informationen: CSS/Schriftarten/Fontawesome-Webfont.Svg
Info 19 in 2 generierten Dateien.08 s
Um die Anwendung zu bedienen, führen Sie den Befehl aus:
$ hexo server Info validieren Konfigurationsinformationen Starten Sie die Verarbeitung von Info Hexo unter http: // localhost: 4000 . Drücken Sie Strg+C, um zu stoppen.
Abschluss
Diese schnelle und einfache Einführung hat Ihnen gezeigt, wie Sie die Hexo Static Site verwenden können. Wenn Sie weitere Informationen zur Arbeit mit Hexo benötigen, lesen Sie bitte die unten angegebenen Hauptdokumentationen:
https: // hexo.io/docs