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 的值，

（六）參考

• 閃耀之狐
• 基于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
  

標籤：其他

上一篇：建構式及實體化原理+包裝類

下一篇：(辦公)探秘react教程20210331