Erstellen Sie schnell, einfach und effizient ein Hexo-Blog. Erstellen Sie kostenlos ein persönliches Blog: Hexo + GitHub Pages + Cloudflare Pages – vollständige Anleitung

In diesem Artikel erfahren Sie, wie Sie mit dem Hexo-Framework ein persönliches Blog erstellen und bereitstellen aufGitHub Seiten undCloudflare Seiten. Die Hauptinhalte umfassen:

Umgebungsvorbereitung: Installieren Sie Node.js und Git
Git und GitHub konfigurieren: SSH-Schlüssel einrichten und ein GitHub-Repository erstellen
Hexo-Projekt initialisieren: Hexo installieren und ein neues Blog erstellen
Auf GitHub Pages bereitstellen: Bereitstellungseinstellungen konfigurieren und statische Dateien pushen
Bereitstellen inCloudflare-Seiten: Mit GitHub-Repository verbinden und automatisch bereitstellen
Grundlegende Verwendung: Neue Artikel erstellen, lokale Vorschau anzeigen, Updates veröffentlichen

Dieses Tutorial eignet sich für alle, die schnell einen persönlichen Blog erstellen möchten, aber nicht zu viel Geld ausgeben möchten. Mit den kostenlosen Diensten von Hexo, GitHub und Cloudflare können Sie ganz einfach eine effiziente und übersichtliche Blog-Website erstellen.

1. Vorbereitung

Domänenname(Nicht erforderlich, können Sie auch einen kostenlosen Domänennamen verwenden, oderGitHub.iooderSeiten.devZugewiesener Domänenname ist auch OK)
GitHub(muss, Sie müssen ein GitHub-Konto registrieren)
Cloudflare(Nicht erforderlichSie müssen ein Cloudflare-Konto registrieren, damit Sie Ihr Blog im CDN von CF bereitstellen können, um es zu beschleunigen. Sie können aber auchGitHub.ioZugewiesener Domänenname)

2. Software-Support

Knoten(muss）
Gitmuss）
VSCode(Nicht erforderlich, dies ist ein leichtgewichtiger Code-Editor, der Ihnen dabei helfen kann, gute Programmiergewohnheiten zu entwickeln)

2.1. Knoten installieren

Öffnen Sie die offizielle Node-Website und laden Sie das Node-Installationsprogramm herunter, das zu Ihrem System passt. Andernfalls treten Installationsprobleme auf. Download-Adresse:https://nodejs.org/en
Nach dem Download installieren Sie es. Für die Installation kann das Standardverzeichnis verwendet werden.C:/Programme/nodejs/
Überprüfen Sie nach Abschluss der Installation, ob die Installation erfolgreich war. Drücken Sie Win + R auf der Tastatur, geben Sie CMD ein und drücken Sie dann die Eingabetaste, um das CMD-Fenster zu öffnen und auszuführenKnoten -vBefehl, und wenn Sie die Versionsinformationen sehen, bedeutet dies, dass die Installation erfolgreich war.
Ändern Sie die npm-Quelle. npm lädt verschiedene Module herunter. Standardmäßig erfolgt der Download vom nationalen Server, was langsam ist. Es wird empfohlen, die Huawei Cloud-Mirror-Quelle zu konfigurieren. Öffnen Sie das CMD-Fenster und führen Sie den folgenden Befehl aus: npm-Konfigurationssatzregistrierung https://mirrors.huaweicloud.com/repository/npm/

2.2. Git installieren

Gehen Sie auf die offizielle Website, um Git herunterzuladen, das für Ihr aktuelles System geeignet ist:https://git-scm.com/downloads
Nach dem Download können Sie Git kinderleicht installieren. Nutzen Sie für die Installation am besten das Standardverzeichnis.C:/Programme/Git
Klicken Sie auf Start in der unteren linken Ecke Ihres Computers, umGit CMD,Git Bash,Git-GUI.
- Git CMD Es handelt sich um den Befehlsstil der Windows-Befehlszeile
- Git Bash Es handelt sich um den Befehlsstil des Linux-Systems (empfohlen)
- Git-GUIEs handelt sich um eine grafische Benutzeroberfläche (nicht für Anfänger empfohlen)

3. Git-Schlüssel konfigurieren und mit Github verbinden

Gängige Git-Befehle

git config -l //Alle Konfigurationen anzeigen git config --system --list //Systemkonfiguration anzeigen git config --global --list //Benutzerkonfiguration (global) anzeigen

3.1. Benutzernamen und E-Mail-Adresse konfigurieren

git config --global user.name "Ihr Benutzername" git config --global user.email "Ihre E-Mail"

passierengit config -l Prüfen Sie, ob die Konfiguration erfolgreich war.

3.2. Konfigurieren Sie den öffentlichen Schlüssel für die Verbindung mit Github

Führen Sie den folgenden Befehl aus, um einen öffentlichen SSH-Schlüssel zu generieren, der verwendet wird, um Ihren Computer mit Github zu verbinden ssh-keygen -t rsa -C "Ihre E-Mail"

HinweisGeben Sie die Datei ein, in der der Schlüssel gespeichert werden solldirektWeitermachenFür Anfänger ist das Einstellen der Tonart nicht zu empfehlen.

Öffnen Sie dann den Ordner .ssh im Benutzerordner unter Laufwerk C. Dort sehen Sie die folgenden Dateien

id_rsaPrivater Schlüssel
id_rsa.pubÖffentlicher Schlüssel

Verwenden Sie Notepad, um den öffentlichen Schlüssel im obigen Bild zu öffnenid_rsa.pub, kopieren Sie den Inhalt und beginnen Sie dann mit der Konfiguration der SSH-Schlüssel in GitHub>.
SSH-Schlüssel für GitHub konfigurieren
Geben Sie GitHub ein und klicken Sie auf den Avatar in der oberen rechten Ecke, um auszuwählenEinstellungen, rufen Sie die Einstellungsseite auf und wählen Sie SSH- und GPG-Schlüssel, nennen Sie es, wie Sie wollen, geben Sie den öffentlichen Schlüssel einSchlüsselDiese Spalte.
Um die Verbindung zu testen, geben Sie den folgenden Befehl ein
```
ssh -T git@github.com
```
Die erste Verbindung wirdMöchten Sie die Verbindung wirklich fortsetzen (Ja/Nein/[Fingerabdruck])?,eingebenJaDu kannst

Die Informationen zur Verbindung mit dem Konto werden angezeigt und geben an, dass alles erledigt ist und die Umgebungsvorbereitung abgeschlossen ist.

3.3. Erstellen Sie ein GitHub.io-Repository

Klicken+Schaltfläche, wählen SieNeues Repository, erstellen Sie eine<Benutzername>.github.ioLager.
Das Format des Repository-Namens muss sein:<Benutzername>.github.io (Hinweis: Das Präfix muss der Benutzername sein, der für die Vorschau des Blogs erforderlich ist. Der Lagername kann später geändert werden.)
Sichtbarkeit muss ausgewählt werden Öffentlich Um das Problem der ersten Bereitstellungsprüfung zu erleichtern, klicken Sie auf Repository erstellen Erstellen Sie es einfach

4. Initialisieren Sie den Hexo-Blog

Erstellen Sie einen Ordner, um den Blog-Quellcode zu speichern (der Pfad, den ich hier gewählt habe, istD:/Hexo-Blog), klicken Sie mit der rechten Maustaste in den Ordner und wählen SieÖffnen Sie Git Bash hier
existierenGit BASHGeben Sie den folgenden Befehl ein, um Hexo zu installieren
```
npm install -g hexo-cli && hexo -v
```
Nach der Installation geben Siehexo -vÜberprüfen Sie, ob die Installation erfolgreich war.
Initialisieren Sie das Hexo-Projekt und installieren Sie die zugehörigen Abhängigkeiten.
```
hexo init blog-demo cd blog-demo npm i
```
Nach der Initialisierung des ProjektsBlog-DemoDer Aufbau ist wie folgt:

Knotenmodule: Abhängigkeitspakete
Gerüste: Einige Vorlagen zum Erstellen von Artikeln
Quelle: Wird zum Speichern Ihrer Artikel verwendet
Themen:Thema
.npmignore: Dateien, die beim Veröffentlichen ignoriert werden sollen (können ignoriert werden)
_config.landscape.yml: Theme-Konfigurationsdatei
config.yml: Blog-Konfigurationsdatei
Paket.json: Projektname, Beschreibung, Version, Ausführungs- und Entwicklungsinformationen

eingebenhexo cl && hexo sStarten Sie ein Projekt
Öffnen Sie den Browser und geben Sie die Adresse ein: http://localhost:4000/. Wenn Sie den folgenden Effekt sehen, bedeutet dies, dass Ihr Blog erfolgreich erstellt wurde.

5. Hängen Sie Ihr statisches Blog an GitHub Pages an

Installieren Sie hexo-deployer-git

npm installiere hexo-deployer-git --save

Überarbeiten _config.yml dokumentieren
Die Datei _config.yml im Verzeichnis blog-demo ist die Konfigurationsdatei des gesamten Hexo-Frameworks. Sie können die meisten Konfigurationen darin ändern. Weitere Informationen finden Sie in der offiziellen Konfigurationsbeschreibung.
Ändern Sie die Konfiguration der letzten Zeile, ändern Sie das Repository in Ihre eigene GitHub-Projektadresse und ändern Sie den Zweig inhauptsächlichStellt den Hauptzweig dar (beachten Sie die Einrückung).
YAML
```
Bereitstellen: Typ: Git-Repository: git@github.com:cmliussss2024/cmliussss2024.github.io.git Zweig: Haupt
```
Führen Sie nach der Änderung der Konfiguration den folgenden Befehl aus, um den Code auf GitHub bereitzustellen (Hexo-Triple-Complex).
```
// Git BASH-Terminal hexo clean && hexo generate && hexo deploy // oder // VSCODE-Terminal hexo cl; hexo g; hexo d
```

Hexo Clean: Löschen Sie die zuvor erstellten Dateien. Sie könnenHexo clAbkürzung.
Hexo generieren: Generieren Sie statische Artikel, die Sie verwenden könnenhexo gAbkürzung
Hexo-Bereitstellung： Um einen Artikel bereitzustellen, können Sie verwendenHexo DAbkürzung

Hinweis: Beim Bereitstellen werden Sie möglicherweise aufgefordert, Ihren Benutzernamen und Ihr Kennwort einzugeben.

Wenn es erscheint Bereitstellung abgeschlossen, bedeutet dies, dass die Bereitstellung erfolgreich war.

Warten Sie zwei Minuten und öffnen Sie den Browser, um den Blog-Inhalt anzuzeigen.

6. Hängen Sie Ihr statisches Blog an Cloudflare Pages an

existieren Arbeiter und Seiten Wählen Seiten von Herstellen einer Verbindung mit Git
Melden Sie sich dann bei dem GitHub-Konto an, das Ihrem Blog-Repository entspricht
KlickenSpeichern und bereitstellenWarten Sie dann, bis die Bereitstellung abgeschlossen ist.
HinweisErfolg! Ihr Projekt wurde in den folgenden Regionen bereitgestellt: GlobalBesuchen Sie danach den Browser: cmliussss2024-github-io.pages.dev, dann können wir den Bloginhalt sehen.

Sie können auch Ihre<Benutzername>.github.ioDas Lager ist aufPrivatPrivate Bibliothek
Wenn Sie über einen eigenen Domänennamen verfügen, können Sie hier Ihre eigene benutzerdefinierte Domäne binden.

Anwendung

Einen neuen Blogbeitrag erstellen

hexo neu Dies ist ein neuer Blogbeitrag

Bearbeiten Sie es dann mit einem Texteditor_posts/Dies ist ein neuer Blogbeitrag.mdDer Inhalt ist in Ordnung, bitte beachten Sie, dass Sie verwenden solltenMarkdownFormatieren Sie das Schreiben.
Für detaillierte Informationen zur Verwendung siehe https://hexo.io/zh-cn/docs/writing

Nach dem Bearbeiten und Speichern des Artikels können Sie mit dem folgenden Befehl eine lokale Seite http://localhost:4000/ zur Vorschau generieren

// Git BASH terminal hexo cl && hexo s // or // VSCODE terminal hexo cl; hexo s

Verwenden Sie nach der Bestätigung den folgenden Befehl, um den lokalen Artikel in das GitHub-Repository zu übertragen.

// Git BASH terminal hexo cl && hexo g && hexo d // oder // VSCODE terminal hexo cl; hexo g; hexo d

Das VSCODE-Terminal meldet bei der ersten Ausführung einen Fehler

Öffnen Sie PowerShell als Administrator und geben Sie den folgenden Befehl ein

POWERSHELL

Set-ExecutionPolicy RemoteSigned

Verweise

https://hexo.io/zh-cn/
https://www.fomal.cc/posts/e593433d.html
https://docs.anheyu.com/

Danksagung

https://github.com/hexojs/hexo

5/5 - (1 Stimme)

Kostenloses Hexo-Blog, schnell, einfach und effizient, keine Kosten für die Erstellung eines persönlichen Blogs