天天看點
傳回

如何基于GitHub Pages+Hexo，搭建個人部落格？

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

1. 全局安裝hexo-cli工具

npm install -g hexo-cli

hexo -v # 檢視版本，目前最新版本為 4.3.0

2. 建立一個項目my-blog并初始化

hexo init my-blog
cd my-blog
npm install

3. 生成網頁檔案&本地啟動

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-fluidAML

5. 本地啟動

執行如下指令重新生成頁面，并啟動 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，整體目錄結構如下（下為Shell語言）：

$ 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/asset-folders.html)。文章建立并編輯好之後，就可以通過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 --save

2. 修改站點配置_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/hexo-fluid-docs/

了解更多靈活開發、項目管理、行業動态等消息，關注我們LigaAI .

或前往 LigaAI- 智能研發協作平台（https://ligai.cn），線上申請體驗我們的産品，期待與關注開發者生态的您一起交流！

搭建個人部落格 個人部落格
上一篇: Python基礎-建立簡單的TCP Socket服務端和用戶端
下一篇: 三角形内動态線段比最值的求解技巧“三例說”

繼續閱讀