Hexo部落格搭建記錄

一刀一個小西瓜發表於2023-01-12
Hexo

Hexo部落格搭建記錄

參考影片：手把手教你從0開始搭建自己的個人部落格 |無坑版影片教程

以下命令操作建議使用管理員許可權完成

1. nodejs & hexo 安裝

1.首先下載node.js，並安裝（安裝node時，會自動安裝npm），安裝完畢後在控制檯輸入node -v，如果顯示版本則說明安裝成功。

D:\>node -v
v16.18.1

D:\>npm -v
8.19.2

2.安裝cnpm，命令為npm install -g cnpm --registry=https://registry.npm.taobao.org

（因為這裡我已經下過了，所以顯示可能不準確）

D:\>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs

added 4 packages, removed 6 packages, and changed 415 packages in 1m

11 packages are looking for funding
  run `npm fund` for details

輸入cnpm -v，如果出現下面的字樣說明安裝cnpm成功

D:\>cnpm -v
cnpm@9.0.1 (D:\apps\nodejs16.18.1\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@8.19.3 (D:\apps\nodejs16.18.1\node_global\node_modules\cnpm\node_modules\npm\index.js)
node@16.18.1 (D:\apps\nodejs16.18.1\node.exe)
npminstall@7.3.1 (D:\apps\nodejs16.18.1\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\apps\nodejs16.18.1\node_global
win32 x64 10.0.19044
registry=https://registry.npmmirror.com

3.使用cnpm安裝hexo，命令cnpm install -g hexo-cli，安裝完畢後使用命令hexo -v，如果出現以下字樣說明安裝hexo成功。

D:\>hexo -v
hexo-cli: 4.3.0
os: win32 10.0.19044
node: 16.18.1
v8: 9.4.146.26-node.22
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.10
openssl: 1.1.1q+quic
cldr: 41.0
icu: 71.1
tz: 2022b
unicode: 14.0
ngtcp2: 0.8.1
nghttp3: 0.7.0

2.使用hexo搭建部落格

1.首先使用命令hexo init <yourBlogName>：建立你的站點目錄，並使用hexo初始化該資料夾

如果在搭建部落格的過程中有問題，只要把資料夾刪掉重來即可

D:\>hexo init blog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

初始化成功後，站點目錄下生成的檔案：

image-20230112003332202

2.使用命令hexo s，啟動部落格（注意要之前的目錄下執行），部落格在本地的4000埠啟動，訪問http://localhost:4000/ 即可以看到

D:\blog>hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
image-20230112004204737

3.使用命令hexo n "文章名"，建立部落格文章。

D:\blog>hexo n "我的第一篇部落格文章"
INFO  Validating config
INFO  Created: D:\blog\source\_posts\我的第一篇部落格文章.md

進入對應的目錄下，可以看到已經成功生成md檔案，然後就可以在該檔案中寫部落格了

D:\blog>cd D:\blog\source\_posts\
D:\blog\source\_posts>dir
 驅動器 D 中的卷是 Data
 卷的序列號是 8A15-B825

 D:\blog\source\_posts 的目錄

2023/01/12  00:48    <DIR>          .
2023/01/12  00:48    <DIR>          ..
2023/01/12  00:08               876 hello-world.md
2023/01/12  00:48                75 我的第一篇部落格文章.md
               2 個檔案            951 位元組
               2 個目錄 1,724,429,172,736 可用位元組

4.返回部落格目錄，使用命令hexo clean清理一下快取檔案，使用命令hexo g在hexo站點根目錄下生成public資料夾

D:\blog\source\_posts>cd ../..

D:\blog>hexo clean
INFO  Validating config
INFO  Deleted database.

D:\blog>hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 157 ms
INFO  Generated: archives/index.html
INFO  Generated: index.html
INFO  Generated: tags/雜記/index.html
INFO  Generated: archives/2023/01/index.html
INFO  Generated: js/jquery-3.4.1.min.js
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  Generated: archives/2023/index.html
INFO  Generated: js/script.js
INFO  Generated: css/style.css
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: css/fonts/fontawesome-webfont.woff2
INFO  Generated: 2023/01/12/hello-world/index.html
INFO  Generated: 2023/01/12/我的第一篇部落格文章/index.html
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  19 files generated in 360 ms

D:\blog>

5.然後hexo s重新啟動服務，瀏覽器訪問埠，成功生成新的文章。

image-20230112010050731

3.將部落格部署到github

1.登入github，建立新倉庫，倉庫名必須如下：

image-20230112010910756

其他選項預設，然後點選建立倉庫。

2.當前站點目錄下，使用命令npm install hexo-deployer-git --save，安裝git。

注意設定使用者名稱和郵件：(隨意)

git config --global user.name <你的使用者名稱>
git config --global user.email <你的郵箱>

3.在hexo部落格目錄下的 _config.yml 檔案，最後幾行改為如下形式，然後儲存。

注意：每個冒號後面要加空格

image-20230112012113713

4.使用命令hexo d，將部落格部署到github中

D:\blog>hexo d
INFO  Validating config
INFO  Deploying: git
INFO  Setting up Git deployment...
Initialized empty Git repository in D:/blog/.deploy_git/.git/
...
...
Enumerating objects: 39, done.
Counting objects: 100% (39/39), done.
Delta compression using up to 8 threads
Compressing objects: 100% (29/29), done.
Writing objects: 100% (39/39), 886.59 KiB | 1.82 MiB/s, done.
Total 39 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), done.
To github.com:liyuelian/liyuelian.github.io.git
 * [new branch]      HEAD -> master
branch 'master' set up to track 'git@github.com:liyuelian/liyuelian.github.io.git/master'.
INFO  Deploy done: git

這裡沒有設定ssh免密登入的要輸入github賬號密碼

5.在github倉庫重新整理，可以看到所有hexo檔案已經上傳到倉庫中。

image-20230112013058368

6.在位址列中訪問<你的github使用者名稱>.github.io，即可看到個人部落格網站。

image-20230112013505644

4.如何釋出新文章

參考：Hexo部落格教程（二）| 如何寫作新文章併發布

1.首先使用命令hexo new <title>建立新文章，然後到hexo目錄/source/_posts下去編寫文章。

使用該命令建立的md檔案頭會有一個前置資訊Front-matter，用於給hexo渲染md文件。

配置項 意義
title 文章標題
date 文章建立日期
comments 是否啟動文章評論功能
tags 文章標籤
categories 文章分類
keywords 文章關鍵字

2.使用命令hexo clean，清除掉舊的資料

這個命令會清除掉之前生成的網頁，即站點根目錄下的public資料夾。

3.使用命令hexo g

這個命令會將source資料夾下所有的md檔案進行渲染，生成HTML頁面，存放在public資料夾下。

特別提醒！ 每次修改文章後，都要執行這兩條命令，清除掉舊的資料，然後重新生成頁面。

4.使用命令hexo d，將檔案上傳到你的遠端倉庫中即可。

可以先使用hexo s，先在本地預覽一下

5.如何更換部落格主題

以yilia主題為例：litten/hexo-theme-yilia: A simple and elegant theme for hexo. (github.com)

1.在你的hexo目錄下執行：git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

D:\blog>git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
Cloning into 'themes/yilia'...
remote: Enumerating objects: 2037, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 2037 (delta 0), reused 0 (delta 0), pack-reused 2036
Receiving objects: 100% (2037/2037), 10.53 MiB | 398.00 KiB/s, done.

Resolving deltas: 100% (1079/1079), done.
image-20230112020544576

2.在_config.yml檔案中修改主題，儲存。

注意冒號後面有空格

image-20230112020815301 image-20230112020902973

3.在hexo目錄下使用hexo clean，然後使用hexo g重新生成public檔案

D:\blog>hexo clean
INFO  Validating config
INFO  Deleted database.
INFO  Deleted public folder.

D:\blog>hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 285 ms
...
INFO  20 files generated in 64 ms

4.使用hexo s在本地啟動，預覽一下

image-20230112021746933

5.覺得沒問題了，就在hexo目錄下使用hexo d，將新的部落格檔案釋出到你的遠端倉庫中。

D:\blog>hexo d
INFO  Validating config
INFO  Deploying: git
...
INFO  Deploy done: git

然後在你的<github個人使用者名稱>.github.io上就可以看到新的部落格主題了

有時候會延遲一會才能更新

6.nexT主題

！！！注意：如果是舊的6.0以前的next主題：hexo使用next主題，location:4000顯示不對問題。 · Issue #2253 · iissnan/hexo-theme-next (github.com)

Hexo的Next主題詳細配置

相關文章