Hexo+Gitee搭建個人部落格

IT小學生蔡坨坨發表於2021-03-31
HexoGitee
logo2.1.png

Hexo+Gitee搭建個人部落格

文章源地址（點選跳轉）

（一）前言

  • beacuse（事出有因）：

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

  • but（但是）：

    今天開啟部落格園，發現網站進行整改，導致之前的部落格無法檢視，也無法釋出新部落格。

    image.png

  • so（因此）：

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

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

    • Hexo官方網站提供詳細的中文文件，可以幫助我們快速搭建個人部落格。

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

（二）前期準備

2.1 註冊Gitee賬號並建立一個倉庫

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

Hexo+Gitee搭建個人部落格

2.2 開啟Gitee Page服務

image.png

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

image.png

2.3 安裝node.js

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

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

image.png

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

image.png

檢查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
[32mINFO [39m Install dependencies
INFO  Start blogging with Hexo!

目錄結構：

image.png

本地啟動：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，看到如下畫面說明建站成功：

image.png

（三）提交到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'.
[32mINFO [39m Deploy done: [35mgit[39m

開啟Gitee倉庫，可以看到我們推送成功的靜態檔案的目錄結構：

image.png

再次修改根目錄下的_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服務

image.png

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

image-20210319154419416

（四）裝修部落格

4.1 下載主題

這裡使用到了前面安裝的git命令，通過命令來克隆主題檔案。

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

image.png

輸入命令：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預設文章連結生成規則是按照年、月、日、標題來生成的。一旦文章標題或者釋出時間被修改，URL 就會發生變化，之前文章地址也會變成404，而且URL層級很深，不利於分享和搜尋引擎收錄。
image-20210319214115303

  • 安裝外掛：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

相關文章