Hexo Blog von Grund auf einrichten: Eine Kurzanleitung (2024)

#Blog erstellen

Hast du die lieblosen Oberflächen vieler Blog-Seiten satt? Nerven dich die unaufhörlichen Benachrichtigungen? Wolltest du schon immer einen eigenen Blog starten, wurdest aber von komplizierten Anleitungen und verwirrendem Code abgeschreckt? Dann bist du hier genau richtig! Dieser Artikel zeigt dir Schritt für Schritt und auf die einfachste Weise, wie du deinen eigenen Blog aufbaust. Alles, was du brauchst, ist ein wenig Geduld, um den Anweisungen zu folgen.

Hexo ist ein schnelles, schlankes und effizientes Blog-Framework – ein wahrer Segen für Einsteiger! Und da GitHub uns das zusätzliche Anmieten und Einrichten eines Servers erspart, nutzen wir in diesem Leitfaden Hexo und GitHub, um deinen Blog zu erstellen.

Bereits 2018 hatte ich eine Kurzanleitung zum Blog-Aufbau von Grund auf verfasst. Da sich jedoch durch Plugin-Updates einige Details geändert haben, präsentiere ich hier die überarbeitete 2024er-Version.

Vorbereitungen

Lokalen Hexo-Statik-Blog einrichten

$ npm install -g hexo-cli
$ hexo init
$ npm install

Ja, der Hauptteil deines Blogs ist damit bereits fertig! Lass uns das Ergebnis ansehen. Führe aus:

$ hexo server

Öffne nun deinen Browser und gib localhost:4000 ein, um zu sehen, wie dein Blog derzeit aussieht. Freue dich einen Moment, drücke dann Strg + C, um mit den nächsten Schritten fortzufahren.

Personalisierung (Erste Schritte)

Theme ändern

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g # oder hexo generate
hexo server

Website-Konfiguration

# Site
title: Unbekannte Welt            // Blog-Name
subtitle:
description:  Do something cool // Eine Signaturzeile
author: LulalaP                 // Autor
language: zh-Hans               // Website-Sprache
timezone:

Avatar in der Seitenleiste einrichten

avatar: 
    url: /uploads/avatar.jpg

Blogseiten vervollständigen

Menü hinzufügen

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

Kategorieseite erstellen

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

Tag-Cloud-Seite erstellen

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

”Über mich”-Seite erstellen

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---
# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

Blog mit GitHub verbinden

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

Öffne nun deinen Browser und besuche http://your-name.github.io. Herzlichen Glückwunsch, dein Blog ist nun fertig eingerichtet!

Domain verknüpfen

Dein Blog ist jetzt vollständig eingerichtet und über die GitHub-Domain erreichbar. Um ihn noch perfekter zu machen, kannst du ihn jetzt mit einer eigenen, kürzeren Domain verbinden.

Domainkauf

Domain-Auflösung

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

hexo g
hexo d

Öffne nun deinen Browser, gib deine Domain ein und drücke Enter. Herzlichen Glückwunsch, du hast jetzt einen eigenen Blog mit einer unabhängigen Domain!

Neue Artikel veröffentlichen

title Titel des Artikels
date Erstellungsdatum (Datum der Dateierstellung)
updated Änderungsdatum (Datum der letzten Dateiänderung)
comments Kommentare aktivieren true
tags Tags
categories Kategorien
permalink Name in der URL (Dateiname)
hexo g
hexo d

Personalisierung (Fortgeschritten)

Hier sind einige erweiterte Einstellungen zur Blog-Gestaltung. Anfänger können diesen Abschnitt zunächst überspringen.

RSS hinzufügen

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

Artikel auf der Startseite kürzen

    <!--more-->

Zitate im Artikel zentrieren

{% centerquote %}
Zitattext
{% endcenterquote %}

{% centerquote %} Zitattext {% endcenterquote %}

Codeblock-Stil ändern

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

Website-Erstellungszeit festlegen

since: 2024
// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

Hintergrundbild für den Blog hinzufügen

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Legt fest, ob und wie das Bild wiederholt wird, wenn es den Bereich nicht ausfüllt
    background-attachment:fixed;    // Legt fest, ob das Bild beim Scrollen mitläuft
    background-size: cover;         // Deckt den gesamten Bereich ab
    background-position:50% 50%;    // Bildposition
}

Hintergrund des Blog-Inhalts halbtransparent machen


// Transparenz des Blog-Inhalts
// Einstellung der Transparenz für den Artikelinhalt
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


// Transparenz der Seitenleiste
.sidebar {
  opacity: 0.9;
}

// Transparenz der Menüleiste
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Transparenz des Suchfelds (local-search)
.popup {
  opacity: 0.9;
}

Stil von Inline-Codeblöcken optimieren

// Verschönerung von Code-Tags
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Besucherzähler am unteren Rand der Website hinzufügen

# Suche den copyright-Tag und füge den Code innerhalb des Tags hinzu

<div class="copyright">
# ...... hier sind bereits einige Konfigurationen
# Füge hier den neuen Code hinzu
</div>

# Nach dem Hinzufügen sieht es so aus:
<div class="copyright">
  # ...... hier sind bereits einige Konfigurationen
  # Füge hier den neuen Code hinzu
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# Wenn alles in Ordnung ist, veröffentlichen
hexo d

README.md-Datei zum Repository hinzufügen

Jedes Projekt enthält normalerweise eine README.md-Datei. Wenn Hexo jedoch in einem Repository bereitgestellt wird, wird die README.md-Datei im Projekt überschrieben. Daher musst du die Konfigurationsdatei so einstellen, dass dies verhindert wird. Füge im source-Stammverzeichnis des Hexo-Ordners eine README.md-Datei hinzu. Bearbeite die Website-Konfigurationsdatei _config.yml und setze den Wert des skip_render-Parameters auf:

skip_render: README.md

Speichere und beende. Wenn du den Blog das nächste Mal mit dem Befehl hexo d bereitstellst, wird die Datei README.md nicht gerendert.

Einige nützliche Plugins

Quelldateien sichern

# Die zuvor eingerichtete Blog-Repository-Adresse hinzufügen
git remote add https://github.com/your-name/your-name.github.io.git

# Aktuelle Änderungen hinzufügen, speichern und mit einer Nachricht versehen
git add .
git commit -m "Quelldateien aktualisiert"

# Neuen Branch erstellen und wechseln
git checkout -b source

# Den gesamten Inhalt des lokalen "source"-Branches in den "source"-Branch des Remote-Repositories pushen
git push origin source:source

Blog von verschiedenen Computern aus schreiben

npm install -g hexo-cli
# Repository lokal klonen
git clone https://github.com/your-name/your-name.github.io.git

# Wenn bereits lokal geklont, musst du vor jeder Blog-Aktualisierung den neuesten Branch-Inhalt ziehen
git pull origin

# Zum entsprechenden Branch wechseln
git checkout source

# Alle Plugins unter der Hexo-Konfiguration installieren, dann kannst du mit der Aktualisierung und Bearbeitung des Blog-Inhalts beginnen
npm install

# Nach Änderungen immer zeitnah sichern (Komplettpaket)
git add .
git commit -m "Blog-Update xxx"
git push origin source:source

# Neuesten Blog-Inhalt auf die Domain-Website veröffentlichen
hexo clean
hexo g  # Statische Dateien generieren
hexo s  # Blog-Vorschau lokal anzeigen
hexo d  # Neuesten Blog-Inhalt veröffentlichen

Zusammenfassung der gängigsten Befehle

hexo g
# oder hexo generate, generiert statische Webseiten aus den Quelldateien
hexo d
# oder hexo deploy, veröffentlicht und pusht auf GitHub Pages
hexo s
# oder hexo server, lokale Bereitstellung zum Testen
hexo clean
# Leert den Cache der statischen Webseiten, danach hexo d zum Neugenerieren