Hexo 是一個快速、簡單且功能強大的博客框架。使用 Markdown 解析文檔，Hexo 能在幾秒內生成帶有自定義主題並集成各項功能的網站頁面。
本文采用 Github Pages + Hexo 的方式，搭建個人博客。
零、準備工作
1. 使用個人 GitHub 創建倉庫，並配置 GitHub Pages
注意: 此倉庫用於存放個人博客頁面，倉庫名必須使用 <GitHub用户名>.github.io 格式。
倉庫創建完成後，可以在倉庫根路徑下創建一個名為 index.html 的靜態 HTML 文件來驗證個人博客搭建是否成功。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Someone's Blog</title>
</head>
<body>
<h1>Hello, Blog World ~</h1>
</body>
</html>在 <GitHub用户名>.github.io 倉庫對應的 GitHub Pages 設置頁面 (訪問路徑為Settings -> Pages) 可以找到個人博客的主頁訪問地址：https://<GitHub用户名>.github.io。
若能在瀏覽器中正常訪問該地址，即代表個人 GitHub Pages 搭建成功。
2. 安裝 Git 和 NodeJS
Hexo 基於 NodeJS 運行，因此在開始前，需要安裝NodeJS 和 npm 工具。安裝教程可參考如下步驟。
筆者的本地環境為 Windows 11 + PowerShell，包管理工具使用 Scoop，NodeJS 通過 nvm 管理，下述安裝步驟需要在 PowerShell 裏執行。
scoop install git # 安裝Git
scoop install nvm # 安裝 nvm
nvm list available # 查看可用的 NodeJS 版本，這裏建議使用 LTS 版本
nvm install 16.18.0 # 安裝 NodeJS，我這裏安裝的是最新 LTS 版本 16.18.0
sudo nvm use 16.18.0 # NodeJS 版本使用 16.18.0，注意這裏需要管理員權限，可以先使用 scoop 安裝 sudo 這個工具一、安裝 Hexo
此處只列出本次所需的關鍵步驟，更多説明詳見官方文檔：https://hexo.io/zh-cn/
1. 全局安裝 hexo-cli 工具
npm install -g hexo-cli
hexo -v # 查看版本，目前最新版本為 4.3.02. 創建一個項目 my-blog 並初始化
hexo init my-blog
cd my-blog
npm install3. 生成網頁文件&本地啓動
hexo generate # 生成頁面，此命令可以簡寫為 `hexo g`
hexo server # 本地啓動，可簡寫為 `hexo s`通過 hexo g 生成的頁面文件在項目 public 目錄下;
使用 hexo clean 命令可以清理生成的頁面文件。當配置未生效時，建議執行清理命令。
4. 本地訪問
瀏覽器訪問：http://localhost:4000/ 會看到一個比較簡陋的頁面。沒關係，接下來介紹如何更換主題。
二、安裝&配置主題
按照前兩個小節所介紹的步驟，我們已經能夠通過本地訪問博客頁面了，但 Hexo 默認的主題不太好看。
好在官方提供了數百種主題任君選擇，可以根據個人喜好更換，具體可以點擊(https://hexo.io/themes/)查看。
本文將主要介紹 Fluid 主題的安裝與配置。
1. 安裝 Fluid 主題
官方提供了兩種安裝方式，這裏使用官方推薦的 npm 方式。
npm install --save hexo-theme-fluid在博客根路徑下創建 _config.fluid.yml 文件，並將主題的 ./node_modules/hexo-theme-fluid/_config.yml 文件內容複製過去。
2. 指定主題
將如下修改應用到 Hexo 博客目錄中的 _config.yml:
theme: fluid # 指定主題
language: zh-CN # 指定語言，會影響主題顯示的語言，按需修改3. 創建「關於頁」
首次使用主題的「關於頁」需要手動創建。
hexo new page about創建成功後修改 /source/about/index.md，添加 layout 屬性。修改後的文件示例如下：
---
title: 標題
layout: about
---
這裏寫關於頁的正文，支持 Markdown, HTML需要注意的是， layout: about 必須存在，並且不能修改成其他值，否則不會顯示頭像等樣式。
4. 更新 Fluid 主題
通過 npm 安裝主題的情況，可在博客目錄下執行命令：
npm update --save hexo-theme-fluid5. 本地啓動
執行如下命令重新生成頁面，並啓動 Hexo 服務。
hexo clean
hexo g
hexo s再次通過瀏覽器訪問 http://localhost:4000 , 便可以看到頁面變得美觀多了。
三、創建文章
修改 _config.yml 文件。這項配置是為了在生成文章的同時，生成一個同名的資源目錄用於存放圖片等資源文件。
post_asset_folder: true創建文件名為 my-blog-build-remark 文章。
hexo new post my-blog-build-remark設置文章的標題及其他元數據信息。
---
title: 基於 GitHub Pages + Hexo 搭建個人博客
date: 2022-10-16 19:42:53
tags: ['hexo','fluid']
---如上命令執行成功後，在 source/_posts/ 目錄下生成了一個 Markdown 文件和一個同名的資源目錄。
在 source/_posts/my-blog-build-remark 目錄中放置一個圖片文件 posts-file-tree.png，整體目錄結構如下：
$ source/_posts (main)> tree
.
├── hello-world.md
├── my-blog-build-remark
│ └── posts-file-tree.png
└── my-blog-build-remark.md然後在文章的 Markdown 文件裏，通過以下方式即可引用對應的圖片。
{% asset_img posts-file-tree.png 目錄結構 %}圖片的引用方式也不只一種，更多詳細介紹可參考官方文檔 (https://hexo.io/zh-cn/docs/as...)。
文章創建並編輯好之後，就可以通過 hexo g && hexo s 命令啓動服務，並在本地預覽文章。
四、配置指南
如無特殊説明，如下配置文件一律默認為主題配置文件_config.fluid.yml。
1. 頁面 title 修改
修改 _config.yml 文件。
title: "請填寫你自己的博客標題"
subtitle: ''
description: ''
keywords:
author: 請填寫你自己的署名
language: zh-CN
timezone: ''2. 博客標題
頁面左上角的博客標題，默認使用站點配置_config.yml中的 title。此配置同時控制着網頁在瀏覽器標籤中的標題，如需單獨區別設置，可在主題配置中進行設置。
navbar:
blog_title: "請填寫你自己的博客標題"3. 首頁 - Slogan（打字機）
首頁大圖中的標題文字，可在主題配置中設定是否開啓。這裏支持配置固定的 text 或者從遠程 api 實時獲取，優先級 api > text。
index:
slogan:
enable: true
text: "Please type your slogan here."
api:
enable: true
url: "https://v1.hitokoto.cn/"
method: "GET"
headers: {}
keys: ["hitokoto"]五、網頁訪問統計
目前 Fluid 支持多種統計網站，本文僅介紹 LeanCloud 的配置。
使用 LeanCloud 之前，需要先註冊賬户並新建應用（需實名認證），可自行前往官網完成。
在 【控制枱 -> 應用 -> 設置 -> 應用憑證】頁面中找到對應的 AppID、AppKey、REST API 服務器地址等信息填入主題配置中。
web_analytics: # 網頁訪問統計
leancloud:
app_id: # AppID
app_key: # AppKey
# REST API 服務器地址，國際版不填
# Only the Chinese mainland users need to set
server_url: # REST API 服務器地址
# 開啓後不統計本地路徑( localhost 與 127.0.0.1 )
# If true, ignore localhost & 127.0.0.1
ignore_local: true如無特殊需要，記得配置 ignore_local: true，這樣 LeanCloud 在 localhost 域名下訪問不會增加數據。
1. 展示 PV 與 UV 統計
頁腳可以展示 PV 與 UV 統計數據，目前支持兩種數據來源：LeanCloud 與 不蒜子。
footer:
statistics:
enable: true
source: "leancloud"
pv_format: "總訪問量 {} 次"
uv_format: "總訪客數 {} 人"2. 展示文章日期/字數/閲讀時長/閲讀數
post:
meta:
author: # 作者，優先根據 front-matter 裏 author 字段，其次是 hexo 配置中 author 值
enable: false
date: # 文章日期，優先根據 front-matter 裏 date 字段，其次是 md 文件日期
enable: true
format: "LL a" # 格式參照 ISO-8601 日期格式化 See: http://momentjs.cn/docs/#/parsing/string-format/
wordcount: # 字數統計
enable: true
format: "{} 字"
min2read: # 估計閲讀全文需要的時長
enable: true
awl: 2
wpm: 60
format: "{} 分鐘"
views: # 瀏覽量計數
enable: true
source: "leancloud"
format: "{} 次"3. 文章評論功能
評論功能需要在主題配置中開啓並指定評論插件，這裏使用基於 LeanCloud 的 Valine。
post:
comments:
enable: true
# 指定的插件，需要同時設置對應插件的必要參數
# Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
type: valine
# Valine
# 基於 LeanCloud
# See: https://valine.js.org/
valine:
appId: # LeanCloud AppID
appKey: # LeanCloud AppKey六、發佈 GitHub Pages
1. 安裝 hexo-deployer-git。
npm install hexo-deployer-git --save2. 修改站點配置 _config.yml。
deploy:
type: git
repo: <repository url> # https://github.com/<GitHub用户名>/<GitHub用户名>.github.io.git
branch: [branch]
token: [token]3. 生成站點文件並推送至遠程 GitHub 倉庫。
hexo clean
hexo deploy登入 Github，在庫設置（Repository Settings）中將默認分支設置為 _config.yml 配置中的分支名稱。
只需稍等片刻，個人博客站點就會顯示在 Github Pages 中。
七、參考資料
- Hexo Docs：https://hexo.io/zh-cn/docs/
- Hexo Fluid 用户手冊：https://fluid-dev.github.io/h...
瞭解更多敏捷開發、項目管理、行業動態等消息，關注我們的sf賬號-LigaAI~ 或者點擊LigaAI-新一代智能研發協作平台，在線申請體驗我們的產品。
