白嫖 GitHub Pages,輕鬆搭建個人部落格

語言: CN / TW / HK

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 執行,因此在開始前,需要安裝NodeJSnpm 工具。安裝教程可參考如下步驟。

筆者的本地環境為 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.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-fluid

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,整體目錄結構如下:

$ 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 之前,需要先註冊賬戶並新建應用(需實名認證),可自行前往官網完成。

在 【控制檯 -> 應用 -> 設定 -> 應用憑證】頁面中找到對應的 AppIDAppKeyREST 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. 文章評論功能

評論功能需要在主題配置中開啟並指定評論外掛,這裡使用基於 LeanCloudValine

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 中。

七、參考資料


瞭解更多敏捷開發、專案管理、行業動態等訊息,關注我們 LigaAI@oschina 或點選LigaAI - 新一代智慧研發協作平臺,線上申請體驗我們的產品。