Phenquestions
Dieses Tutorial zeigt Ihnen, wie Sie mit einem statischen Site-Generator, der sehr schnell und einfach zu bedienen ist, einen einfachen Blog einrichten können.
Was ist ein SSG?
SSG oder Static Site Generator ist eine Webanwendung, die den dynamischen Inhalt einer Webseite in statischen Inhalt umwandelt, der normalerweise lokal gespeichert wird stored. Statische Site-Generatoren benötigen keine Datenbanken und Back-Ends, wodurch das Erlernen des Programmierens entfällt. Es konzentriert sich hauptsächlich auf das Schreiben und Präsentieren der Inhalte.
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 arbeiten, indem sie Inhalte direkt über eine interaktive Schnittstelle erstellen und verwalten. Da Daten in einem CMS aus der Datenbank abgerufen werden, sind CMS sehr langsam, da der Inhalt abgerufen und als dynamischer Inhalt bereitgestellt wird. CMS-Systeme sind auch anfällig für Sicherheitslücken, da sie auf externe Plugins angewiesen sind, die von anderen Entwicklern geschrieben wurden, um die Funktionalität zu erhöhen.
Auf der anderen Seite arbeiten statische Site-Generatoren, indem sie Inhalte offline-Medien wie Texteditoren erstellen und die endgültige Seitenansicht bei der Veröffentlichung rendern render. Da der Inhalt lokal gerendert wird und keine Datenbank erforderlich ist, wird die Seite schneller gerendert und die Ladegeschwindigkeit ist unglaublich hoch incredibly.
Statische Site-Generatoren bestehen aus vorkompiliertem Code, der als Engine zum Rendern der veröffentlichten Inhalte fungiert.
So erstellen Sie einen statischen Blog mit Hexo
Eine der beliebtesten Optionen zum Erstellen einer statischen Site 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 Site gibt, können Sie mit Hexo Ihre Site anpassen und verschiedene Tools integrieren.
Schauen wir uns an, wie wir mit Hexo . eine einfache statische Site einrichten können.
Installation von Hexo
Bevor wir eine Site 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 updatesudo apt-get upgrade
Sobald Sie Ihr System auf dem neuesten Stand haben, installieren Sie git
sudo apt-get install gitAls nächstes installieren Sie nodejs von nodesource mit dem Befehl:
curl -sL https://deb.Knotenquelle.com/setup_14.x | sudo -E bash -apt-get install -y nodejs
Sobald Sie Nodejs installiert haben, können wir mit der Installation von Hexo mit dem folgenden Befehl fortfahren:
npm install -g hexo-cliArbeiten mit Hexo
Sobald Sie hexo installiert haben, können Sie eine Site erstellen und Inhalte veröffentlichen. Sehen wir uns an, wie man mit Hexo . arbeitet. Denken Sie daran, dass dies eine schnelle, einfache Anleitung ist. Weitere Informationen finden Sie in der Dokumentation.
Erstellen einer Website
Um eine neue Hexo-Site zu erstellen, verwenden Sie den folgenden Befehl:
hexo init HexoSitecd HexoSite
npm installieren
Verstehen der Hexo-Verzeichnisstruktur
Sobald Sie eine neue Hexo-Site initialisieren, erhalten Sie eine Verzeichnisstruktur wie die folgende:
-rw-r--r-- 1 cs cs 0 Feb 8 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 Paketsperre.json drwxr-xr-x 1 cs cs 4096 8. Februar 20:51 Gerüste drwxr-xr-x 1 cs cs 4096 8. Februar 20:51 Quelle drwxr-xr-x 1 cs cs 4096 8. Februar 20:51 Themen the
Die erste Datei ist die _config.yml enthält alle Einstellungen für Ihre Site. Stellen Sie sicher, dass Sie es ändern, bevor Sie Ihre Site bereitstellen, da es Standardwerte enthält.
Die nächste Datei ist das Paket.json-Datei, die die NodeJS-Anwendungsdaten und -konfigurationen enthält. Hier finden Sie installierte Pakete und deren 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
Um ein einfaches Blog in Hexo zu erstellen, verwenden Sie den Befehl:
hexo neuer Blog „Hello World Blog“Nach der Erstellung können Sie die Markdown-Datei im Verzeichnis /source/_posts ablegen. Sie müssen die Markdown-Markup-Sprache verwenden, um Inhalte zu schreiben.
Erstellen einer neuen Seite
Das Erstellen einer Seite in Hexo ist einfach; benutze den Befehl:
hexo neue Seite „Seite-2“Die Seitenquelle befindet sich unter /source/Page-2/index.md
Inhalte generieren und bereitstellen
Sobald Sie Ihren Inhalt auf Hexo veröffentlichen, müssen Sie die Anwendung ausführen, um den statischen Inhalt zu generieren.
Verwenden Sie die folgenden Befehle:
$ Hexo generierenINFO Validierung der Konfiguration
INFO Verarbeitung starten
INFO Dateien geladen in 966 ms
INFO Generiert: Archive/Index.html
INFO Erzeugt: Seite-2/Index.html
INFO Erzeugt: Archive/2021/index.html
INFO Generiert: index.html
INFO Erzeugt: Archive/2021/02/index.html
INFO Generiert: js/script.js
INFO Generiert: fancybox/jquery.ausgefallene Schachtel.Mindest.CSS
INFO Generiert: 08.02.2021/Hello-World-Post/index.html
INFO Generiert: css/style.CSS
INFO Generiert: 2021/02/08/hello-world/index.html
INFO Generiert: css/fonts/FontAwesome.otf
INFO Generiert: css/fonts/fontawesome-webfont.wuff
INFO Generiert: css/fonts/fontawesome-webfont.eot
INFO Generiert: fancybox/jquery.ausgefallene Schachtel.Mindest.js
INFO Generiert: css/fonts/fontawesome-webfont.woff2
INFO Generiert: js/jquery-3.4.1.Mindest.js
INFO Generiert: css/fonts/fontawesome-webfont.ttf
INFO Generiert: css/images/banner.jpg
INFO Generiert: css/fonts/fontawesome-webfont.svg
INFO 19 Dateien generiert in 2.08 s
Führen Sie den Befehl aus, um die Anwendung bereitzustellen:
$ hexo server INFO Validating config INFO Verarbeitung starten INFO Hexo läuft unter http://localhost:4000 . Drücken Sie Strg+C, um zu stoppen.Fazit
Diese schnelle und einfache Einführung hat Ihnen gezeigt, wie Sie die statische Hexo-Site verwenden. Weitere Informationen zur Arbeit mit Hexo finden Sie in der folgenden Hauptdokumentation:
https://hexo.io/docs
