基於 Hexo 快速構建我的靜態博客系統

Hexo 是一個快速、簡潔且高效的博客框架。

基於 Markdown 解析出文章內容，快速生成靜態頁面文件。

本文以當前博客爲例，介紹 Hexo 如何快速創建一個靜態博客，並部署在 Github Pages 上（若是是部署在 Gitee 或 Coding 上，可自行修改本文中不同的地方）。

關於 Hexo 的更多信息，詳見官網：https://hexo.io/zh-cn

<!-- more -->

1. Hexo

1.1. 安裝

依賴：

• NodeJs v10.0+
  • 這是官方建議，最小不低於 v8.10
  • 沒有安裝 NodeJs 環境，能夠參見藉助 nvm 安裝、管理多個 NodeJS 版本
• Git

安裝：

# 全局安裝
$ npm install hexo-cli -g

1.2. 初始化

新建一個目錄，用於存放 Hexo 初始化以後的全部文件，以後安裝主題、寫文章、網站配置等都在這個目錄下。

目錄名稱建議取博客地址，好比：xxxxx.github.io（由於個人博客是部署在 Github Pages 上的，xxxxx 對應 Github 用戶名，詳見 3.1. 建立 Github 倉庫）。

$ hexo init xxxxx.github.io

1.3. 個性配置

# 進入上一步初始化好的主目錄
$ cd xxxxx.github.io

# 打開配置文件
$ vim _config.yml

文件 _config.yml 對應整個站點的配置，Hexo 的詳細配置參數說明見官網。

下面是部分主要配置的說明：

# Site
title: whoru
subtitle: '學習、分享、交流、沉澱'
description: 'Talk is cheap, just do IT.'
keywords:
author: whoru.S.Q
language: zh-CN
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.sqiang.net
root: /
permalink: :year/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# 代碼高亮設置
highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# 首頁分頁設置
index_generator:
  path: ''
  per_page: 5
  order_by: -date

# 歸檔頁分頁設置
per_page: 20
pagination_dir: page

# 主題
theme: landscape

# 博客發佈地址（對應 Github 上建立的 Pages 倉庫）
deploy:
  type: git
  repo: https://github.com/whorusq/xxxxx.github.io.git

1.4. 啓動本地預覽

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

1.5. 瀏覽器訪問

地址欄輸入 http://localhost:4000 訪問，以下圖：

2. 主題 NexT

NexT 是 Hexo 下一個優雅且強大的主題，詳見官網：https://theme-next.org/docs/

2.1. 安裝

方式一：Git

# 1. 進入初始化好的 Hexo 根目錄
$ cd whorusq.github.io

# 2. 拉取 NexT 最新代碼（默認分支 master）
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

# 查看全部分支
$ cd themes/next
$ git tag -l
...
v7.5.0
v7.6.0
v7.7.0
v7.7.1

# 切換主題到不一樣版本
$ git checkout tags/v7.5.0

# 切回最新的 master
$ git checkout master

方式二：直接下載

# 1. 進入初始化好的 Hexo 根目錄
$ cd whorusq.github.io

# 2. 手動建立主題目錄
$ mkdir themes/next

# 3. 下載主題源碼並解壓
$ curl -L https://api.github.com/repos/theme-next/hexo-theme-next/tarball | tar -zxv -C themes/next --strip-components=1

2.2. 個性配置

# 進入主題目錄
$ cd themes/next

# 打開配置文件
$ vim _config.yml

⚠️ 注意：主題下的 _config.yml 文件是當前主題定製的配置項，涉及頁面樣式、單頁面、菜單等具體展現層的東西，與 Hexo 根目錄下的 _config.yml 功能和適用範圍不一樣，要區別開。

詳細的主題配置說明見官網，下面是當前博客的一份示例配置，一樣只摘取了部分配置，只用於舉例說明各主要配置項。

# 頁面底部設置
footer:

# 文章版權展現設置
creative_commons:

# 主題的四種風格
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

# 菜單設置
# 對應的單頁需使用 hexo new page "about" 建立
menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  # commonweal: /404/ || heartbeat

# 側邊欄設置
sidebar:

# 側邊欄頭像
avatar:

# 側邊欄底部社交連接
social:

# 友情鏈接
links:

# 文章索引設置
toc:

# 首頁展現「閱讀全文」連接
read_more_btn: true

# 文章尾部讚揚設置
reward_settings:

# 展現相關文章
related_posts:

# 標籤雲樣式
tagcloud:

# Multiple Comment System Support
# 是否開啓多評論切換
comments:

# 開啓本地搜索
local_search:

2.3. 本地預覽

# 返回根目錄
$ cd xxxxx.github.io

# 啓動服務
$ hexo s

啓動後，地址欄再次輸入 http://localhost:4000 訪問。

3. 發佈

3.1. 建立 Github 倉庫

在 Github 建立一個新倉庫，名稱爲 xxxxx.github.io，其中 xxxxx 是你的 Github 用戶名。若是要開啓 Pages 服務，則必須遵照這個規則。

建立好以後，瀏覽器直接輸入 xxxxx.github.io 訪問。

進入倉庫設置，找到 GitHub Pages 部分，可自定義域名和開啓 HTTPS 支持。

3.2. 安裝插件

$ npm install hexo-deployer-git --save

3.3. 修改配置

# 進入根目錄，打開 Hexo 全局配置文件
$ cd xxxxx.github.io
$ vim _config.yml

修改以下配置：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/xxxxx/xxxxx.github.io.git

關於該該插件的更多詳細配置，參見 https://github.com/hexojs/hexo-deployer-git

3.4. 執行命令

$ hexo clean && hexo deploy

# 或者直接執行這條命令（經常使用）
# 至關於爲文章生成靜態文件，而後部署到指定的倉庫
# g ---> generate
# d ---> deploy
$ hexo g -d

3.5. 瀏覽器訪問

輸入地址：https://xxxxx.github.io

4. 附錄

4.1. Hexo 經常使用命令

完整的命令列表及說明參見官網指令部分。

# 以指定目錄初始化 Hexo，不指定到話則使用當前目錄
$ hexo init xxxxx.github.io

# 建立單頁
$ hexo new page "about"

# 建立文章
$ hexo new post "一篇新文章的標題"

# 啓動本地服務
$ hexo s

# 清除緩存文件 (db.json) 和已生成的靜態文件 (public)。
# 在某些狀況（尤爲是更換主題後），若是發現您對站點的更改不管如何也不生效，可能須要運行該命令。
$ hexo clean

# 爲文章生成靜態文件
$ hexo g

# 爲文章生成靜態文件，而後部署到指定倉庫
$ hexo g -d

4.2. 推薦插件

hexo-abbrlink

爲每篇文章生成一個惟一 ID，詳見https://github.com/Rozbo/hexo-abbrlink#readme

# 1. 安裝
$ npm install hexo-abbrlink --save

# 2. 添加 Hexo 配置
$ cd xxxxx.github.io
$ vim _config.yml

# 註釋掉默認配置
# permalink: :year/:title/

# 修改、添加如下內容
permalink: post/:abbrlink.html
abbrlink:
  alg: crc32   # 算法： crc16(default) and crc32
  rep: dec     # 進制： dec(default) and hex

hexo-filter-nofollow

爲外鏈添加 rel="external nofollow noreferrer"，詳見https://github.com/hexojs/hexo-filter-nofollow

# 1. 安裝
$ npm install hexo-filter-nofollow --save

# 2. 添加 Hexo 配置
$ cd xxxxx.github.io
$ vim _config.yml

# 添加如下配置
nofollow:
  enable: true
  field: site
  exclude:
    # - 'exclude1.com'

hexo-generator-searchdb

開啓 NexT 主題的本地搜索須要此插件，詳見https://github.com/theme-next/hexo-generator-searchdb

# 1. 安裝
$ npm install hexo-generator-searchdb --save

# 2. 修改 NexT 主題配置
$ cd xxxxx.github.io/themes/next/
$ vim _config.yml

# 修改以下部分
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

hexo-generator-sitemap

部署的時候自動生成 sitemap.xml 文件，便於爬蟲抓取或手手動提交，插件的使用詳見：

• https://github.com/hexojs/hexo-generator-sitemap
• https://github.com/coneycode/hexo-generator-baidu-sitemap

# 1. 安裝
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save

# 2. 添加 NexT 主題配置
$ cd xxxxx.github.io/themes/next/
$ vim _config.yml

# 添加以下部分
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

⚠️ 注意：百度爬蟲因爲操做生猛，已經被 Github 屏蔽，因此部署在 Github Pages 上的網站沒法被收錄，須要藉助其它平臺的 Pages 服務，可自行搜索。

---

原文連接：https://blog.sqiang.net/post/525717070.html