Rövid útmutató a Hexo blog felépítéséhez a nulláról (2024-es kiadás)

#Blogépítés

Eleged van már a blogoldalak ízléstelen felületeiből? Fárasztanak a végeláthatatlan értesítések és ajánlatok? Szeretnél már régóta egy saját blogot, de elrettentettek a bonyolult útmutatók és a fejtörést okozó kódok? Akkor gratulálok, mert ez a cikk a lehető legegyszerűbb módon, lépésről lépésre fog elkalauzolni a saját blogod felépítésében. Csak egy kis türelemre van szükséged, és kövesd az utasításokat.

A Hexo, mint gyors, letisztult és hatékony blogkeretrendszer, valóságos áldás a kezdők számára. A GitHub pedig megkímél minket a szerver bérlésének és telepítésének macerájától. Ezért ebben a cikkben a Hexo és a GitHub segítségével fogunk blogot építeni.

2018-ban már írtam egy Rövid útmutatót a blogépítéshez a nulláról. A bővítmények frissítése miatt azonban néhány részlet módosításra szorult, ezért most újra kiadom a 2024-es, egyszerűsített útmutatót.

Előkészületek

Hexo statikus blog felépítése helyben

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

Igen, a blog fő része ezzel elkészült! Nézzük is meg, hogy fest. Futtasd:

$ hexo server

Most nyisd meg a böngésződet, írd be a localhost:4000 címet, és máris láthatod a blogod jelenlegi állapotát. Egy rövid lelkesedés után nyomj Ctrl + C-t a további lépésekhez.

Személyre szabás (kezdeti)

Téma cseréje

$ 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 #vagy hexo generate
hexo server

Webhely konfigurációja

# Site
title: Ismeretlen világ                // Blog neve
subtitle:
description:  Do something cool // Egy szlogen/aláírás
author: LulalaP                 // Szerző
language: zh-Hans               // Weboldal nyelve
timezone:

Oldalsáv profilképének beállítása

avatar:
    url: /uploads/avatar.jpg

Blogoldalak finomítása

Menü hozzáadása

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

Kategória oldal létrehozása

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

Címkefelhő felület létrehozása

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

”Rólam” oldal létrehozása

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---

Oldalsáv közösségi linkjeinek beállítása

# 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 összekapcsolása a GitHubbal

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

Ekkor nyisd meg a böngésződet, látogasd meg a http://your-name.github.io címet. Gratulálok, a blogod ezzel elkészült!

Domain név hozzárendelése

Eddigre a blog már teljesen elkészült, és a GitHub domainjén keresztül is elérhető. Még tökéletesebb lenne, ha egy rövid domain nevet is hozzárendelnél.

Domain vásárlás

Domain feloldása

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Miután beállítottad a domain feloldást, lépj be a blog könyvtárába, hozz létre egy CNAME nevű fájlt a source mappában (figyelj a nagybetűre, nincs kiterjesztés), nyisd meg Jegyzettömbbel, és írd bele a megvásárolt domainedet, például: www.philoli.com.

hexo g
hexo d

Most nyisd meg a böngésződet, írd be a domain nevedet, nyomj Entert, és gratulálok, már van egy saját, független domain névvel rendelkező blogod!

Új cikk közzététele

title A cikk címe
date Létrehozás dátuma (a fájl létrehozásának dátuma)
updated Módosítás dátuma (a fájl módosításának dátuma)
comments Hozzászólások engedélyezése true
tags Címkék
categories Kategóriák
permalink Név az URL-ben (fájlnév)
hexo g
hexo d

Személyre szabás (haladó)

Az alábbiakban néhány haladóbb, egyedi blogstílus-beállítás található; a kezdők nyugodtan kihagyhatják ezt a részt.

RSS hozzáadása

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

Cikkek csonkolása a kezdőlapon

    <!--more-->

Idézett szöveg középre igazítása a cikkekben

{% centerquote %}
引用正文
{% endcenterquote %}

{% centerquote %} Idézett szöveg {% endcenterquote %}

Kódblokk stílusának módosítása

codeblock:
  # Kód kiemelés téma
  # Elérhető értékek: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # Lásd: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Másoló gomb hozzáadása a kódblokkhoz
  copy_button:
    enable: true
    # Szövegmásolási eredmény megjelenítése.
    show_result: true
    # Elérhető értékek: default | flat | mac
    style:

Webhely létrehozási idejének beállítása

since: 2024

Cikkek linkstílusának javítása

// link stílus
.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;
  }
}

Háttérkép hozzáadása a bloghoz

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Ha a kép nem tölti ki a teljes teret, ismétlődjön-e, és hogyan
    background-attachment:fixed;    // Kövesse-e a kép a görgetést
    background-size: cover;         // Fedés
    background-position:50% 50%;    // Kép pozíciója
}

Blogtartalom háttérének félig átlátszóvá tétele


// Blogtartalom átlátszóvá tétele
// Cikk tartalmának átlátszósági beállításai
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;
  }
}


// Oldalsáv átlátszósági beállításai
.sidebar {
  opacity: 0.9;
}

// Menüsor átlátszósági beállításai
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Keresőmező (local-search) átlátszósági beállításai
.popup {
  opacity: 0.9;
}

Inline kódblokkok stílusának optimalizálása

// Kódtagek szépítése
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Látogatószám hozzáadása a webhely aljára

# Keresd meg a copyright címkét, majd add hozzá a kódot a címke belsejébe

<div class="copyright">
# ......Itt már van néhány beállítás
# Itt add hozzá az új kódot
</div>

# Hozzáadás után így néz ki:
<div class="copyright">
  # ......Itt már van néhány beállítás
  # Itt add hozzá az új kódot
  {%- 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
# Ha minden rendben van, tedd közzé
hexo d

README.md fájl hozzáadása a repository-hoz

Minden projekt általában tartalmaz egy README.md fájlt, de ha Hexo-val telepíted a repository-ba, a projekt README.md fájlja felülíródik. Ezért be kell állítani a konfigurációs fájlt, hogy elkerüljük a felülírást.

A Hexo könyvtár source gyökérkönyvtárában hozz létre egy README.md fájlt, majd módosítsd a webhely konfigurációs fájlját (_config.yml), és állítsd a skip_render paraméter értékét erre:

skip_render: README.md

Mentsd el és lépj ki. Amikor legközelebb a hexo d paranccsal telepíted a blogot, a README.md fájl már nem kerül renderelésre.

Néhány hasznos bővítmény

Forrásfájlok biztonsági mentése

# Add hozzá az előzőleg beállított blog repository címét
git remote add https://github.com/your-name/your-name.github.io.git

# Add hozzá és mentsd el az aktuális módosításokat, és írj hozzá megjegyzést
git add .
git commit -m "Forrásfájlok frissítése"

# Hozz létre és válts új ágra
git checkout -b source

# Told fel a helyi "source" ág teljes tartalmát a távoli repository "source" ágába
git push origin source:source

Blogírás különböző számítógépeken

npm install -g hexo-cli
# Klónozza a repository-t helyben
git clone https://github.com/your-name/your-name.github.io.git

# Ha már klónoztad helyben, minden blogfrissítés előtt le kell húznod a legújabb ág tartalmát.
git pull origin

# Váltás a megfelelő ágra
git checkout source

# Miután telepítetted az összes Hexo konfiguráció alatti bővítményt, elkezdheted a blog tartalmának frissítését és szerkesztését.
npm install

# Tartalom módosítása után ne feledkezz meg az azonnali teljes körű biztonsági mentésről
git add .
git commit -m "Blog frissítése xxx"
git push origin source:source

# A legújabb blogtartalom közzététele a domain webhelyen
hexo clean
hexo g  # Statikus fájlok generálása
hexo s  # Blog előnézete helyben
hexo d  # A legújabb blogtartalom közzététele

Néhány gyakran használt parancs összefoglalása

hexo g
# vagy hexo generate, a statikus weboldal generálása a forrásfájlok alapján
hexo d
# vagy hexo deploy, közzététel a GitHub Pagesre
hexo s
# vagy hexo server, helyi telepítés tesztelése
hexo clean
# Statikus weboldal gyorsítótárának törlése, majd hexo d újra generálás