Hexo | （一）使用Hexo+Pages搭建我的博客

本篇主要介紹使用Hexo+Pages搭建我的博客的流程。使用 Hexo 博客框架搭建，解析markdown文章，生成靜態頁面，將頁面託管到 github / coding 服務器上。github / coding 都有pages 服務，提供免費的靜態網頁託管和演示服務。

搭建步驟：

1. 安裝git，nodejs
2. 安裝hexo
3. 本地搭建站點（線下訪問）
4. 部署到github/coding（線上訪問）
5. 站點配置

1. 安裝hexo

1.安裝Git 。安裝完畢後，在任意文件夾下鼠標右擊便可打開 Git Bash，輸入命令，進行Git操做。

$ git version  # 查看Git版本，驗證是否安裝成功

2.安裝Node.js。Hexo是基於nodejs的博客框架，並且nodejs還集成了npm包管理工具。

$ node -v    # 查看nodejs版本，驗證是否安裝成功

3.安裝hexo：

$ npm install hexo --save   # 安裝hexo
$ npm install hexo-cli -g   # 安裝hexo命令行模式
$ hexo -v  # 查看hexo版本，驗證是否安裝成功

2. hexo建站

1.新建一個blog文件夾，打開blog文件夾，Git Bash。

2.hexo初始化：hexo init

3.安裝依賴包：npm install

4.初始化完成，在blog下就會生成如下文件目錄：

.
├── node_modules # 依賴模塊
├── scaffolds    # 文章模板
├── source       # 用戶源文件：頁面，文章markdown文件
|   └── _posts   # 建立的文章
└── themes       # 主題
├── .gitignore   # git忽略文件信息
├── _config.yml  # 站點配置文件
├── package.json # 已安裝插件映射表，下次只需npm install即直接安裝表插件

5.hexo本地生成靜態頁面

$ hexo clean     # 清理本地靜態文件；
$ hexo generate  # 生成靜態頁面，即public文件夾；
$ hexo server    # 啓用hexo本地服務器；
# 注：Hexo 3.0 把服務器獨立成了個別模塊，您必須先安裝 hexo-server 才能使用。
# hexo-server安裝命令：npm install hexo-server --save

這時，打開瀏覽器在地址欄輸入http://localhost:4000便可本地訪問靜態博客頁面。

3. 配置github/coding pages

github和coding能夠雙線配置，也能夠選擇其中一個配置。推薦雙線配置，coding用於國內訪問速度較快，github用於境外訪問。

1.登陸github，New repository：yourname.github.io。其中yourname是你的github用戶名，github強制後綴爲github.io才能啓用github pages服務。

2.登陸coding，新建倉庫：yourname.coding.me，打開靜態pages服務。其中yourname是你的coding用戶名，coding不強制後綴爲coding.me。
 其中yourname是你的coding用戶名，coding不強制後綴爲coding.me。

3.Git Bash配置git用戶信息：

$ git config --global user.name "YourName"
$ git config --global user.email "YourEmail"

4.配置網絡傳輸協議

在管理Git項目時，通常使用ssh或https做爲安全傳輸協議，任選其一便可。

(1) SSH協議

①SSH祕鑰：

$ ssh-keygen -t rsa -C "youremail@example.com"  # 生成rsa祕鑰
$ cd ~/.ssh         # 進入虛擬目錄ssh文件中
$ cat id_rsa.pub    # 顯示id_rsa.pub文件內容

②複製祕鑰至github/coding->用戶setting->SSH keys，New SSH Key；

③驗證是否添加成功

$ ssh -T git@github.com  # 驗證github是否添加成功
$ ssh -T git@coding.net  # 驗證coding是否添加成功

④編輯站點配置文件_config.yml：

deploy:
    type: git
    repo: 
        github: git@github.com:yourname/yourname.github.io.git 
        coding: git@git.coding.net:yourname/yourname.coding.me.git 
    branch: master

(2) HTTPS協議

①直接編輯站點配置文件_config.yml：

deploy:
    type: git
    repo: 
        github: https://github.com/liziczh/liziczh.github.io.git
        coding: https://git.coding.net/liziczh/liziczh.coding.me.git
    branch: master

②驗證github/coding用戶名和密碼。

4. 部署到github/coding

1.安裝Git部署插件：

$ npm install hexo-deployer-git --save

2.部署：

$ hexo clean     # 清理本地靜態文件；
$ hexo generate  # 生成靜態頁面，即public文件夾；
$ hexo deploy    # 部署到github/coding；

3.部署完畢，站點文件目錄以下：

.
├── .deploy_git  # （新增）hexo deploy 生成的git部署文件
├── public       # （新增）hexo generate 生成的靜態文件
├── db.json      # （新增）hexo generate 生成的數據
├── node_modules # 依賴模塊
├── scaffolds    # 文章模板
├── source       # 用戶源文件：頁面&文章的markdown文件
|   └── _posts   # 文章
└── themes       # 主題
├── .gitignore   # git時需忽略文件
├── _config.yml  # 站點配置文件
├── package.json # 已安裝插件映射表，下次只需npm install即直接安裝表插件

站點搭建完畢，打開瀏覽器在地址欄輸入如下連接可隨時訪問本身的博客了。

• github pages：http://yourname.github.io
• coding pages：http://yourname.coding.me

5. 站點配置

區分配置文件：

配置文件	路徑
站點配置文件	D:/blog/_config.yml
主題配置文件	D:/blog/themes/你的主題/_config.yml

打開站點配置文件blog/_config.yml，自行發揮，配置完畢，從新部署 hexo g -d；

# 注意：yaml語言使用縮進表示層級關係。
# 注意：鍵值對中的冒號（:）後面有一個半角空格。

# 網站
title: #網站標題
subtitle: #網站副標題
description: #網站描述
keywords: #關鍵字
author: #你的名字,文檔做者
language: #網站的語言
timezone: #時區，中國：Asia/Shanghai
# 網址
url: https://yoursite.com  #你的網址url
root: /
permalink: :year/:month/:day/:title.html #文章永久連接
permalink_defaults:
# 主題
theme: landscape  # 主題文件的名稱
# 部署
deploy:
  type: git
  repo: 
    github: git@github.com:yourname/yourname.github.io.git  
    coding: git@git.coding.net:yourname/yourname.coding.me.git 
  branch: master

詳細配置請參考hexo配置，此處再也不贅述。

6. 主題變動

1.hexo默認主題爲landscape，能夠到Themes|Hexo選擇本身喜歡的主題，複製主題在github倉庫的url。

2.在themes文件夾下，打開GitBash，克隆主題至themes文件夾中。

$ git clone https://github.com/theme-next/hexo-theme-next.git

克隆以後，記住刪除themes\你的主題名中的.git，.github，.gitignore等Git倉庫文件。

3.更改站點配置文件_config.yml：

theme: 主題文件名

4.編輯結束，從新部署：

$ hexo clean  # 清理緩存文件；（不清理也能夠部署，推薦先清理）
$ hexo g -d   # 生成靜態頁面後直接部署；

部署完畢以後，進入如下連接刷新就能夠看到你的新主題了。

• github pages：http://yourname.github.io
• coding pages：http://yourname.coding.me

7. 寫做

1.新建：在blog文件夾下，打開Git Bash，新建文章：

$ hexo new post "title"

2.編輯：在source/_post下能夠編輯你新建的文章。

3.編輯完畢，從新部署：

$ hexo clean  # 清理緩存文件；（不清理也能夠部署，推薦先清理）
$ hexo g -d   # 生成靜態頁面後直接部署；

8. 文檔的Front-matter

Front-matter 是文檔最上方以 --- 分隔的區域，用於指定文檔一些的參數。

---
title: 文章標題
date: yyyy-MM-dd hh:mm:ss
tags: 
categories: 
comments: true
---
# 注意：鍵值對中的冒號（:）後面有一個半角空格。

參數	值	描述
layout	post page draft false	文章【默認值】 頁面 草稿 不處理
title	文本	標題
date	yyyy-MM-dd hh:mm:ss	文件創建日期
update	yyyy-MM-dd hh:mm:ss	文件更新日期
comments	true false	開啓文章評論功能，默認true
tags		標籤（只適用於post）
categories		分類（只適用於post）
permalink	url	永久連接

不要處理個人文章：將文章Front-Matter中的layout: false；

9. 文章的[標籤]與[分類]

只有文章（post）支持[標籤]和[分類]。

1.添加[tags]、[categoies]、[about]頁面：

$ hexo new page "tags"
$ hexo new page "categories"
$ hexo new page "about"

2.在source文件夾中找到新建頁面：
①編輯tags.md：添加layout:"tags"；
②編輯categories.md：添加layout:"categories"；
③編輯about.md，自行發揮。

3.匹配站點配置文件：

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories

4.匹配主題配置文件中menu：

menu:
  home: /
  tags: /tags
  categories: /categories
  archives: /archives
  about: /about

5.Front-matter中的[tags]寫法：

tags:
- tag_1
- tag_2
# 標籤之間相互獨立

6.Front-matter中的[categories]寫法：

categories: 
- 運動
- [運動, 球類運動]
- [運動, 球類運動, 網球]
# 類別存在層級關係

從新部署以後，我的博客的基本功能，寫做，標籤，分類，歸檔就所有實現了。

10. 綁定本身的域名

若不喜歡域名後綴爲github.io或coding.me，能夠本身註冊一個域名進行綁定。

1.域名註冊：在阿里雲/騰訊雲等註冊一個域名。

2.添加CNAME文件：在blog\source下，添加一個CNAME文件 (無文件後綴)，內容爲你的域名example.com。

3.Github Pages域名解析：
①添加四個A記錄：主機記錄爲@，記錄值爲185.199.108.153、185.199.109.153、185.199.110.153、185.199.111.153。
②添加一個CNAME記錄：主機記錄爲www，記錄值爲yourname.github.io。

4.Coding Pages域名解析：
①打開控制檯ping pages.coding.me，獲取IP。
②添加一個A記錄：主機記錄爲@，記錄值爲ping得的IP。
③添加一個CNAME記錄：主機記錄爲www，記錄值爲pages.coding.me。

因爲國內訪問Github Pages速度較慢，因此我將Coding Pages解析線路設爲默認，供國內訪問；將Github Pages解析線路設爲境外，供國外訪問。

Chrome沒法訪問連接問題

問題描述：部署頁面以後，Chrome沒法訪問連接，提示你的鏈接不是私密鏈接......
解決方案：前往chrome://net-internals/#hsts，在Delete domain中輸入沒法訪問的網頁地址。

附：hexo經常使用命令

命令	描述
hexo version	顯示 Hexo 版本
hexo init [folder]	新建一個網站 若未設置folder，默認爲當前文件夾；
hexo new [layout] "title"	新建一篇文檔，文檔佈局由layout決定
hexo clean	清理緩存文件
hexo generate hexo g	生成靜態頁面
hexo server hexo s	啓用服務器，http://localhost:4000
hexo deploy hexo d	部署文件
hexo g -d hexo d -g	生成靜態文件後直接部署 部署以前先生成靜態文件

若想了解更多關於hexo命令的介紹，請參考指令 | hexo