Hexo+Gitee搭建個人博客

---

Hexo+Gitee搭建個人博客

文章源地址（點擊跳轉）

（一）前言

• beacuse（事出有因）：

  很久之前就知道Hexo搭建個人博客，但由於懶，一直沒有行動，在此之前一直用的是博客園。

• but（但是）：

  今天打開博客園，發現網站進行整改，導致之前的博客無法查看，也無法發布新博客。

  

• so（因此）：

  本着自己動手，豐衣足食的原則，廢話不多說，開始搭建自己專屬的個人博客網站。

• why（為什么選擇Hexo+Gitee）：

  • Hexo官方網站提供詳細的中文文檔，可以幫助我們快速搭建個人博客。

  • GitHub的鏡像在國外，訪問速度會受到限制，當然也可以通過CDN加速，這里使用Gitee就不用擔心限速問題了。

（二）前期准備

2.1 注冊Gitee賬號並創建一個倉庫

這里建議倉庫的名稱跟Gitee賬號的用戶名一致，這樣后面生成的網站地址就沒有二級目錄，要短一些。

2.2 開啟Gitee Page服務

開啟后如下圖所示可以看到生成的網站地址：

2.3 安裝node.js

官網：https://nodejs.org/en/

Node.js 的版本不低於 8.10，這里建議使用 Node.js 10.0 及以上版本。

下載完安裝即可（安裝很簡單Next --> Next就可以）：

檢查node.js是否安裝成功，win+r打開cmd命令行界面，分別輸入node -v和npm -v

C:\Users\DELL>node -v
v15.12.0

C:\Users\DELL>npm -v
7.6.3

由於npm默認的鏡像是在國外，速度慢且可能出現異常，所以我們需要更換源鏡像，這里替換成淘寶鏡像：

• 查看鏡像源：npm get registry

  C:\Users\DELL>npm get registry
  https://registry.npm.taobao.org/
  

• 修改鏡像源：npm config set registry https://registry.npm.taobao.org

  C:\Users\DELL>npm config set registry https://registry.npm.taobao.org
  
  C:\Users\DELL>npm get registry
  https://registry.npm.taobao.org/
  

2.4 安裝Git

官網地址：http://git-scm.com/

2.5 安裝Hexo

所有必備的應用程序安裝完成后，即可使用npm命令安裝Hexo：npm install -g hexo-cli。

C:\Users\DELL>npm install -g hexo-cli

added 66 packages in 3s

2.6 建站

在電腦中創建一個文件夾用來存放博客，如：F:\blog 之后的命令行操作都在這個文件夾的目錄下進行。

生成默認博客：hexo init

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

目錄結構：

本地啟動：hexo s

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

打開瀏覽器輸入：http://localhost:4000，看到如下畫面說明建站成功：

（三）提交到Gitee上

打開根目錄/blog下的_config.yml文件

修改以下代碼：

deploy:
  type: git
  repo: https://gitee.com/cai_hesheng/cai_hesheng.git   #將地址換成自己的地址
  branch: master

安裝部署插件：

F:\blog>npm install hexo-deployer-git --save

added 7 packages in 1s

清理緩存：hexo clean

生成靜態文件：hexo g

F:\blog>hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 108 ms
... 
INFO  Generated: js/jquery-3.4.1.min.js
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  17 files generated in 627 ms

推送到Gitee：hexo d Gitee的用戶名/郵箱 密碼

F:\blog>hexo d ********* *************
INFO  Validating config
INFO  Deploying: git
...
Branch 'master' set up to track remote branch 'master' from 'https://gitee.com/cai_hesheng/cai_hesheng.git'.
INFO  Deploy done: git

打開Gitee倉庫，可以看到我們推送成功的靜態文件的目錄結構：

再次修改根目錄下的_config.yml文件：

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://cai_hesheng.gitee.io # 修改成自己的Gitee Page的地址
permalink: :year/:month/:day/: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

更新Gitee Pages，每次修改博客內容后都需要做以下操作：

• hexo clean

• hexo g

• hexo d

• 更新Gitee Pages服務

打開瀏覽器輸入地址：https://cai_hesheng.gitee.io/，看到如下畫面，說明提交成功：

（四）裝修博客

4.1 下載主題

這里使用到了前面安裝的git命令，通過命令來克隆主題文件。

切換到themes目錄，右鍵單擊，選擇Git Bash Here：

輸入命令：git clone https://gitee.com/yafine66/hexo-theme-matery.git

$ git clone https://gitee.com/yafine66/hexo-theme-matery.git
Cloning into 'hexo-theme-matery'...
remote: Enumerating objects: 4860, done.
remote: Counting objects: 100% (4860/4860), done.
remote: Compressing objects: 100% (2021/2021), done.
remote: Total 4860 (delta 3200), reused 4179 (delta 2775), pack-reused 0
Receiving objects: 100% (4860/4860), 14.50 MiB | 1.51 MiB/s, done.
Resolving deltas: 100% (3200/3200), done.

4.2 切換主題

• 修改根目錄下的 _config.yml 的 theme 的值：theme: hexo-theme-matery

• 修改兩個 per_page 的分頁條數值為 6 的倍數，如：12、18 等，這樣文章列表在各個屏幕下都能較好的顯示。

• 中文用戶，建議修改 language 的值為 zh-CN。

4.3 新建菜單頁

分類categories頁、標簽tags頁、關於我about頁（這里演示categories，其他類似創建）：

categories 頁是用來展示所有分類的頁面，如果 source 目錄下還沒有 categories/index.md 文件，那么就需要新建一個，命令如下：

hexo new page "categories"

編輯你剛剛新建的頁面文件 /source/categories/index.md，至少需要以下內容：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

4.4 其他樣式配置

更多樣式的配置在\hexo-theme-matery\_config.yml中修改。

（五）新建文章

輸入命令：hexo new '文章名'

F:\blog>hexo new 'Hexo+Gitee搭建個人博客'
INFO  Validating config
INFO  Created: F:\blog\source\_posts\Hexo-Gitee搭建個人博客.md

Front-matter 選項中的所有內容均為非必填的。但仍然建議至少填寫 title 和 date 的值。

配置選項	默認值	描述
title	Markdown 的文件標題	文章標題
date	文件創建時的日期時間	發布時間，應保證全局唯一
author	根 _config.yml 中的 author	文章作者
img	featureImages 中的某個值	文章特征圖
top	true	文章是否置頂，值為 true，則會作為首頁推薦文章
cover	false	是否需要加入到首頁輪播封面中
coverImg	無	該文章在首頁輪播封面需要顯示的圖片路徑，如果沒有，則默認使用文章的特色圖片
password	無	文章閱讀密碼，該值必須是用 SHA256 加密后的密碼，防止被他人識破。
toc	true	是否開啟 TOC，可以針對某篇文章單獨關閉 TOC 的功能。
mathjax	false	是否開啟數學公式支持
summary	無	文章卡片摘要顯示的文字，如果無值程序會自動截取文章的部分內容作為摘要
categories	無	文章分類，建議一篇文章一個分類
tags	無	文章標簽，一篇文章可以多個標簽

（六）參考

• 閃耀之狐
• 基於Hexo的matery主題搭建博客並深度優化

（七）補充

Hexo默認文章鏈接生成規則是按照年、月、日、標題來生成的。一旦文章標題或者發布時間被修改，URL 就會發生變化，之前文章地址也會變成404，而且URL層級很深，不利於分享和搜索引擎收錄。

• 安裝插件：npm install hexo-abbrlink --save

  F:\blog>npm install hexo-abbrlink --save
  
  added 5 packages in 2s
  

• 修改配置

  修改博客根目錄配置文件 _config.yml 的 permalink：

  permalink: p/:abbrlink.html  
  abbrlink:
      alg: crc32   #算法： crc16(default) and crc32
      rep: hex     #進制： dec(default) and hex