Hexo的詳細搭建過程——小白的血淚經歷QAQ

2021 年 3 月 3 日
筆記
實用教程

Hexo的詳細搭建過程

環境要求：

node.js
git

這裡提供Centos8.2下的安裝過程：

dnf module list nodejs
dnf module install nodejs:14 -y
# 這裡最新版是14，所以安裝版本號是14，-y是同意安裝
yum -y install curl-devel expat-devel gettext-devel openssl-devel zlib-devel
yum -y install git-core

安裝完成後，輸入以下命令查詢版本

node -v
npm -v
git --version

檢查一下有沒有安裝成功

node.js切換淘寶源

方法一：設置淘寶鏡像源

npm config set registry //registry.npm.taobao.org
npm config get registry

方法二：安裝淘寶鏡像源

npm install -g cnpm --registry=//registry.npm.taobao.org

安裝淘寶源後可以用cnpm代替npm命令，這裡我們選擇方法一。

安裝Hexo

這裡我們只需要輸入以下命令即可

npm install -g hexo-cli
# 這裡把我們的部落格網站叫做myblog
hexo init myblog
# 這裡是從Github克隆的，所以可能會有點慢，參見後面的解決辦法
# 程式會自動創建一個myblog文件夾

有關 Hexo 的官方文檔：//hexo.io/zh-cn/docs/

Github添加倉庫

首先，你先要有一個GitHub賬戶，去註冊一個吧。

註冊完登錄後，在+中看到一個New repository，新建倉庫

創建一個和你用戶名相同的倉庫，後面加.github.io，只有這樣，將來要部署到GitHub page的時候，才會被識別，也就是xxxx.github.io，其中xxx就是你註冊GitHub的用戶名。點擊Create repository。

刷新之後點SSH，記住文本框里的地址，比如我這裡是[email protected]:aqvq/aqvq.github.io.git

生成SSH添加到GitHub

SSH，簡單來講，就是一個密鑰，其中，id_ed25519是你這台電腦的私人密鑰，不能給別人看的，id_ed25519.pub是公共秘鑰，可以隨便給別人看。把這個公鑰放在GitHub上，這樣當你鏈接GitHub自己的賬戶時，它就會根據公鑰匹配你的私鑰，當能夠相互匹配時，才能夠順利的通過git上傳你的文件到GitHub上。

官方教程：Connecting to GitHub with SSH – GitHub Docs

生成SSH密鑰

在終端輸入以下命令，youremail替換成你註冊Github的郵箱。

ssh-keygen -t ed25519 -C "youremail"

注意：如果你用的是不支援Ed25519演算法的舊系統，要換成：

ssh-keygen -t rsa -b 4096 -C "youremail"

接下來會提示輸入保存密鑰的文件，按”Enter”會接受默認文件位置，如下（如果要改名字請輸入絕對路徑，否則不會生成密鑰）：

> Enter a file in which to save the key (/home/you/.ssh/id_ed25519): [Press enter]

接下來會提示輸入安全密碼，默認為空，Enter即可。

> Enter passphrase (empty for no passphrase): [Type a passphrase]
> Enter same passphrase again: [Type passphrase again]

將SSH密鑰添加到SSH代理

在後台啟動SSH代理。
```
eval "$(ssh-agent -s)"
```
把你的SSH私鑰添加到SSH代理。如果你用的是不同的名字創建密鑰，用你自己的私鑰文件的名字替換命令中的id_ed25519。
```
ssh-add ~/.ssh/id_ed25519
```
打開id_ed25519.pub，複製裡面的內容。

向Github倉庫添加SSH密鑰

點倉庫的Settings，找到Deploy keys選項，點擊Add deploy key，把你的id_ed25519.pub裡面的資訊複製到Key文本框中，勾上Allow write access，點擊Add key。

【題外話】頭像點 Settings 再點 SSH and GPG keys 也可以添加密鑰，唯一的區別是SSH keys擁有最高許可權，可以管理所有倉庫，而Deploy keys只擁有部分許可權，只能管理特定的倉庫。你可以隨便選，不影響接下來的操作。

解決提交到Github時每次都要輸入用戶名和密碼的問題

cd myblog
git init
git config --global user.email "[email protected]"
git config --global user.name "Your Name"
git remote add origin [email protected]:aqvq/aqvq.github.io.git

"[email protected]"是你的郵箱，"Your Name"是你的帳號名。

origin可以是你給遠端倉庫起的任意名字，後面的才是真正的遠端倉庫的地址，就是之前創建倉庫時記的地址。

在終端中輸入

ssh -T [email protected]

查看是否成功，如果有詢問，輸入yes（不是y）。然後會顯示You've successfully authenticated等字樣，說明成功了。

【題外話】可以先輸入git remote -v查看已存在的遠程連接，git remote rm origin刪除已存在的遠程連接。

將Hexo部署到Github

進入我們部落格的文件夾myblog，編輯配置文件_config.yml。

翻到最後，找到deploy:，按如下修改，repo:填你自己的地址：

# Deployment
## Docs: //hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: [email protected]:aqvq/aqvq.github.io.git
  branch: master

【題外話】_config.yml中的其他配置選項參見//hexo.io/docs/configuration

這個時候需要先安裝deploy-git ，這樣你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

在myblog文件夾下輸入以下命令：

hexo clean
hexo generate
hexo deploy

hexo clean清除了你之前生成的東西，可以不加。
hexo generate生成靜態文章，可以用 hexo g縮寫
hexo deploy 部署文章，可以用hexo d縮寫

如果看到如下內容

Branch 'master' set up to track remote branch 'master' from '[email protected]:aqvq/aqvq.github.io.git'.
Everything up-to-date
INFO  Deploy done: git

表示部署成功，過一會兒就可以在//aqvq.github.io 這個網站看到你的部落格了！

設置個人域名（可選）

現在你的個人網站的地址是 yourname.github.io，如果覺得這個網址逼格不太夠，這就需要你設置個人域名了。但是需要花錢。

註冊一個騰訊雲或阿里雲賬戶，在上面買一個域名（一般騰訊雲比阿里雲便宜），我買的是 aqvq.top，各個後綴的價格不太一樣，比如最廣泛的.com就比較貴，看個人喜好（一般top首年和續費都比較便宜）。然後你需要實名認證。
在終端輸入以下命令
```
ping aqvq.github.io
```
記住目標（其實就是Github伺服器）的IP地址。（如果ping停不下來按 Ctrl+C 結束）
打開域名控制台，點解析進去添加解析。如果提示需要申請SSL證書，按提示操作即可。
裡面會自動生成一些記錄，不用管。先添加兩條記錄。
主機記錄一條填@一條填www，這樣你不管輸aqvq.top還是www.aqvq.top都能訪問。其餘相同，記錄類型為A，記錄值填寫你ping的地址：

登錄GitHub，進入之前創建的倉庫，點擊Settings，在Options中找到GitHub Pages，設置Custom domain，輸入你的域名aqvq.top並保存。
然後進入myblog文件夾，在source文件夾里新建CNAME文件，在裡面添加你的域名，比如：aqvq.top，注意不要加www前綴什麼的，只有一個域名。保存後退出。

【題外話】一開始我是在 Github 倉庫的根目錄中直接添加 CNAME 文件，但這樣每次更新部落格時，CNAME都會被刪除，需要把文件放在 source 目錄中，這樣每次更新就會自動將 CNAME 加入到倉庫的根目錄里了，其他文件也是同理。比如為你的倉庫添加一個 README.md 文件，不能直接在倉庫里添加，而是放到 source 文件夾中。

最後在終端輸入

hexo clean
hexo g
hexo d

配置網站資訊（~/myblog/_config.yml），將url改為你的域名

# URL
## Set your site url here. 
## For example, if you use GitHub Page, set url as '//username.github.io/project'
url: //aqvq.top

過不了多久，再打開你的瀏覽器，輸入你自己的域名，就可以看到搭建的網站啦！

在Hexo寫文章並發表

接下來你就可以正式開始寫文章了。

hexo new "newpapername"

在~/myblog/source/_post中會自動生成一個.md文件，其中自帶Front-matter。打開markdown文件，在Front-matter後面添加文章內容。

當你寫完的時候，再

hexo clean
hexo g
hexo d

就可以看到更新了。

由於搭建的網站是靜態的。網站的每次改動，比如發表新文章，更改主題等，都需要重新執行上面的三個命令。

更換主題

如果覺得默認主題不好看，可以更換別的主題，這裡選用NexT做示範，非常簡約。

進入項目根目錄（我這裡是~/myblog），輸入：
```
cd ~/myblog
git clone //github.com/theme-next/hexo-theme-next themes/next
```
如果是別的主題，網址需要換成該主題的 Github 倉庫地址，themes/next中的 next 改成該主題的名字。
編輯項目根目錄下的配置文件_config.yml，找到theme: 並修改：
```
## Plugins: //hexo.io/plugins/
## Themes: //hexo.io/themes/
theme: next
```
編輯next主題（在themes目錄下）下的配置文件_config.yml，選擇一個你喜歡的方案取消注釋並注釋掉原來的方案，這裡我選的是Pisces。
```
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
```
別的主題不一定有多種方案，但也可以看看配置里的其他選項

一些配置參數

編寫腳本

如果嫌麻煩，可以寫一個腳本，比如：

Linux下（創建.sh文件）

cd ~/myblog && hexo clean && hexo g && hexo d

創建完記得執行：

chmod 755 filename.sh

Windows下（創建.bat文件）

cd C:\Users\username\Documents\myblog
hexo clean && hexo g && hexo d

Front-matter

Front-matter 是文件最上方以 --- 分隔的區域，用於指定個別文件的變數，舉例來說：

---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是預先定義的參數，你可在模板中使用這些參數值並加以利用。

參數	描述	默認值
`layout`	布局	config.default_layout
`title`	標題	文章的文件名
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`comments`	開啟文章的評論功能	true
`tags`	標籤（不適用於分頁）
`categories`	分類（不適用於分頁）
`permalink`	覆蓋文章網址
`excerpt`	Page excerpt in plain text. Use this plugin to format the text
`disableNunjucks`	Disable rendering of Nunjucks tag `{{ }}`/`{% %}` and tag plugins when enabled

分類和標籤

只有文章支援分類和標籤，您可以在 Front-matter 中設置。在其他系統中，分類和標籤聽起來很接近，但是在 Hexo 中兩者有著明顯的差別：分類具有順序性和層次性，也就是說 Foo, Bar 不等於 Bar, Foo；而標籤沒有順序和層次。

categories:
- Diary
tags:
- PS3
- Games

分類方法的分歧

如果您有過使用 WordPress 的經驗，就很容易誤解 Hexo 的分類方式。WordPress 支援對一篇文章設置多個分類，而且這些分類可以是同級的，也可以是父子分類。但是 Hexo 不支援指定多個同級分類。下面的指定方法：
categories:
  - Diary
  - Life
會使分類Life成為Diary的子分類，而不是並列分類。因此，有必要為您的文章選擇儘可能準確的分類。

如果你需要為文章添加多個分類，可以嘗試以下 list 中的方法。
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]
此時這篇文章同時包括三個分類： PlayStation 和 Games 分別都是父分類 Diary 的子分類，同時 Life 是一個沒有子分類的分類。

永久鏈接（Permalinks）

您可以在 _config.yml 配置中調整網站的永久鏈接或者在每篇文章的 Front-matter 中指定。

變數

除了下列變數外，您還可使用 Front-matter 中的所有屬性。

變數	描述
`:year`	文章的發表年份（4 位數）
`:month`	文章的發表月份（2 位數）
`:i_month`	文章的發表月份（去掉開頭的零）
`:day`	文章的發表日期 (2 位數)
`:i_day`	文章的發表日期（去掉開頭的零）
`:hour`	文章發表時的小時 (2 位數)
`:minute`	文章發表時的分鐘 (2 位數)
`:second`	文章發表時的秒鐘 (2 位數)
`:title`	文件名稱 (relative to 「source/_posts/「 folder)
`:name`	文件名稱
`:post_title`	文章標題
`:id`	文章 ID (not persistent across cache reset)
`:category`	分類。如果文章沒有分類，則是 `default_category` 配置資訊。
`:hash`	SHA1 hash of filename (same as `:title`) and date (12-hexadecimal)

您可在 permalink_defaults 參數下調整永久鏈接中各變數的默認值：

permalink_defaults:
  lang: en

示例

source/_posts/hello-world.mdtitle: Hello World
date: 2013-07-14 17:01:34
categories:
- foo
- bar

參數	結果
`:year/:month/:day/:title/`	2013/07/14/hello-world/
`:year-:month-:day-:title.html`	2013-07-14-hello-world.html
`:category/:title/`	foo/bar/hello-world/
`:title-:hash/`	hello-world-a2c8ac003b43/

source/_posts/lorem/hello-world.mdtitle: Hello World
date: 2013-07-14 17:01:34
categories:
- foo
- bar

參數	結果
`:year/:month/:day/:title/`	2013/07/14/lorem/hello-world/
`:year/:month/:day/:name/`	2013/07/14/hello-world/

多語種支援

若要建立一個多語種的網站，您可修改 new_post_name 和 permalink 參數，如下：

new_post_name: :lang/:title.md
permalink: :lang/:title/

當您建立新文章時，文章會被儲存到：

$ hexo new "Hello World" --lang tw
# => source/_posts/tw/Hello-World.md

而網址會是：

//localhost:4000/tw/hello-world/

常見問題

將SSH密鑰添加到SSH代理提示No such file or directory

生成密鑰時請按默認名稱試試，如果自定義名字需要輸入絕對路徑。

Hexo部署成功後GitHub無更新文章

Hexo只負責調用Git命令，不會偵測執行緒錯誤，就算看到INFO Deploy done: git也不一定意味著Git是運行正確的。

如果是Windows端，請在Git Bash中運行命令。

也可能是未成功添加SSH密鑰，請重新按照上面流程再配置一遍。

Hexo部署成功後新內容在Github倉庫上有而網頁上沒有

涉及：HTTP快取 – Google 搜索

解決辦法：Ctrl + F5強制刷新，或者嘗試其他清除快取或禁用快取（不建議）的方法。

解決克隆Github倉庫過慢的問題

【實測效果一般】使用Github的鏡像網站進行訪問，使用github.com.cnpmjs.org將原本網站中的github.com部分替換掉，例如修改後的上面那條命令為：
```
git clone //github.com.cnpmjs.org/theme-next/hexo-theme-next themes/next
```
【實測效果最好】使用GitClone – GitHub快取加速網站，為開發者服務，將gitclone.com加入到網址開頭，例如修改後的上面那條命令為：
```
git clone //gitclone.com/github.com/theme-next/hexo-theme-next themes/next
```
轉存到碼雲或雲伺服器後下載
開啟代理或更改Hosts文件
Fork後下載

Hexo更換主題或發表文章後網頁全白

原因：這是缺少CNAME解析造成的。Github 倉庫目錄中直接添加的文件，在每次更新部落格時，都會被刪除。

解決辦法：將需要的文件放在 source 目錄中，這樣每次更新就會自動將其加入到倉庫的根目錄中。比如要為你的倉庫添加一個 README.md 文件，不要直接在倉庫里添加，而是放到 source 文件夾中，然後按Ctrl+F5更新部落格。

README.md文件被Hexo翻譯成html文件的問題

在站點配置文件（~/myblog/_config.yml）中，將README.md加入到skip_render中，示例如下：

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: README.md # 被修改的地方

輸入域名出現Github的404頁面怎麼辦

原因：Github未綁定到該域名或CNAME文件缺失

解決辦法：

添加CNAME文件：不要直接將CNAME文件加到倉庫根目錄里，而是將CNAME文件放在Hexo項目的source 目錄中，然後更新部落格。
綁定域名：登錄GitHub，進入之前創建的倉庫，點擊Settings，在Options中找到GitHub Pages，設置Custom domain，輸入你的域名aqvq.top並保存。

如何修改中文

編輯 站點配置文件，將 language 設置成你所需要的語言。可用的語言如下：

العَرَبِيَّة (ar)
Deutsch (de)
English (en)
Español (es)
Français (fr)
日本語 (ja)
Malay (ms)
Portuguese (Brazil) (pt-BR)
簡體中文 (zh-CN)
繁體中文 (zh-TW)

例如：選用簡體中文，則配置為：

language: zh-CN

Markdown中的圖片不能顯示的問題

網上解決辦法很多，這裡我選用：

Typora — a markdown editor, markdown reader.

聽說你也想用PicGo | PicGo

對象存儲數據處理_COS數據處理_數據處理方案 – 騰訊雲 (tencent.com)

在粘貼圖片時，Typora能自動將圖片上傳到騰訊雲並將得到的圖片鏈接修改為Markdown格式插入迴文本中。其中PicGo執行上傳操作。

以Windows10為例，首先下載安裝Typora，如圖配置（是否勾選對網路位置的圖片應用上述規則看實際情況）：

然後下載PicGo。可通過點擊上圖按鈕，也可通過上述鏈接下載。
在騰訊雲添加存儲桶（可能需要實名認證）：

如圖配置PicGo

【注】通過訪問密鑰 – 控制台 (tencent.com)獲取SecretId和SecretKey。設定APPID是存儲桶名稱後面的一串數字，設定存儲空間名就是存儲桶名稱，確認存儲區域就是存儲桶的所屬地域。

選擇v5，點擊確定，再點擊設為默認圖床。

在Typora中驗證圖片上傳選項，如果提示成功，以後就可以直接Ctrl+C、Ctrl+V了！

【題外話】至於圖床，也不一定要用騰訊雲，用 Github、碼雲、微博、簡書等等都是可以的

【題外話】如果手頭有備案的域名，用騰訊雲COS部署 Hexo也未嘗不是一個好主意，網上教程：如何在騰訊雲COS部署HEXO部落格 – 雲+社區 – 騰訊雲 (tencent.com)

首頁總是顯示全文的問題

不推薦自動摘要，因為自動摘要的內容不進行渲染，出來的頁面強迫症可能會抓狂。

推薦手動在文章中加入來手動截斷首頁文章顯示的內容，實際上的文章頁面並不顯示，不影響美觀度。

win10如何自定義時間短語

用來設置文章date資訊

右鍵輸入法或設置搜索：用戶自定義短語

看自己喜好添加短語（秒可加可不加，添加好後不要亂動，不然會失效），短語程式碼為：

%yyyy%-%MM%-%dd% %hh%:%mm%:%ss%

輸入rqsj即可看到效果。

GitHub鏈接打開404

Github打開README中的鏈接aqvq.top出現404，仔細一看地址欄，卻是//github.com/aqvq/aqvq.github.io/blob/master/aqvq.top

其實只要將README文件中的鏈接改為//aqvq.top即可。

Hexo文章鏈接亂碼

修改站點配置文件：

# URL
## Set your site url here. For example, if you use GitHub Page, set url as '//username.github.io/project'
url: //aqvq.top
permalink: :category/:post_title/ # 現在可以直接用中文標題了
permalink_defaults:
  lang: zh-CN # 改成中文

Hexo快速設置

hexo config theme next

實現在Windows端編寫在Linux端發布

第一個想到syncthing，因為這個軟體實在是太好用了，只要是在區域網內，可以實現滿速實時同步，而且免費，不在區域網內可以考慮異地組網。

安裝蒲公英組網

下載好安裝包後執行命令：

rpm -ivh PgyVisitor_CentOS_2.3.0_x86_64.rpm

註冊並登陸帳號（免費賬戶可連3台設備，免費就夠用了）

根據一下資料進行操作

蒲公英智慧組網客戶端 for Linux使用幫助 – 客服中心 – Oray

使用syncthing和蒲公英異地組網零成本實現多設備實時同步 – 橘崽崽啊 – 部落格園 (cnblogs.com)

這裡我們只要保證軟體能正常運行即可，將程式切到後台保持運行。

安裝syncthing

yum install -y syncthing
syncthing 
# 先運行程式生成配置文件
vim .config/syncthing/config.xml
# 找到127.0.0.1:8384改為0.0.0.0:8384，或者使用下面一條命令
sed -i 's/127.0.0.1/0.0.0.0/g' '/root/.config/syncthing/config.xml'
iptables -I INPUT -p tcp --dport 8384 -j ACCEPT
# 允許遠程訪問syncthing控制台
service iptables save
service iptables save
syncthing
# syncthing同樣保持運行
# 最好將這兩個軟體開機自啟
systemctl enable [email protected]
systemctl start [email protected]
chkconfig pgyvpn

在瀏覽器輸入IP:8384訪問伺服器的syncthing控制台。

共享文件夾

注意一個選擇僅發送，一個選擇僅接收即可。

編寫部署腳本

# CentOS8.2不需要安裝
yum install crontabs
systemctl enable crond
systemctl start crond

# 編寫定時執行計劃
vim /etc/crontab

添加如下（每隔一分鐘執行一次，可自行百度修改）：

*/1 * * * * root /root/myblog/yourscript.sh

使配置文件生效：

crontab /etc/crontab
crontab -l
# 查看已有計劃

後續：
現在我在用typecho，感覺終於不用折騰了，簡直小白的福音。
可以來康康我的小站：www.juzaizai.com
這個主題真的炒雞好看有木有QAQ

Tags: 實用教程