【效率為王】超詳細(xì) Hexo + Github Pages 博客搭建教程

前言

現(xiàn)在市面上已經(jīng)有許多博客了，比如 CSDN、掘金、博客園、簡(jiǎn)書等等。我們可以直接在上面發(fā)表內(nèi)容，而且交互比較人性化，而且也能被搜索引擎檢索到。但是總歸是別人的平臺(tái)，經(jīng)常會(huì)受限，因此我們就希望能有自己的博客。之前也嘗試過搭建過不同的博客類型，折騰了不少工作，最終決定定型，采用 Hexo + Github Pages 的方式。今天就帶大家一起來搭建自己的博客。由于是采用 Hexo + Github Pages 的方式，所以都是免費(fèi)的，只是需要有一定的動(dòng)手能力！

Hexo 簡(jiǎn)介

Hexo^[1] 是一個(gè)快速、簡(jiǎn)潔且高效的靜態(tài)博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。我們只需要通過 Markdown 語法寫好自己的博客內(nèi)容，然后通過簡(jiǎn)單的命令就能夠?qū)⑸傻木W(wǎng)頁上傳到 Github，然后大家都可以來訪問你的網(wǎng)頁了。既方便了自己，也給了自己一個(gè)展示自己成果的平臺(tái)，是不是一舉兩得。

搭建步驟

搭建之前，需要做一些準(zhǔn)備工作，首先需要確保你的電腦上已經(jīng)上安裝好了 Git 和 Node.Js，然后才能開始安裝 Hexo，那么首先我們先來看看如何準(zhǔn)備這這些環(huán)境。

Git

安裝

1. Window：下載并安裝^[2]
2. macOS：下載并安裝^[3]
3. Linux（Debian，Ubuntu）：sudo apt-get install git-core
4. Linux（Fedora、RedHat、CentOS）：sudo yum install git-core

設(shè)置

安裝成功后，將 git 與 GitHub 賬號(hào)綁定，右鍵打開 Git Bash，然后設(shè)置配置信息：

# 配置用戶名和郵箱
git config --global user.name "github 用戶名"
git config --global user.email "github 注冊(cè)郵箱"

比如我的配置就是：

git config --global user.name "cunyu1943"
git config --global user.email "[email protected]"

接著生成 ssh 密鑰文件，輸入如下命令后直接三次回車即可，一般不需要設(shè)置密碼；

# 生成 ssh 密鑰
ssh-keygen -t rsa -C "github 注冊(cè)郵箱"

我生成秘鑰的命令：

ssh-keygen -t rsa -C "[email protected]"

一般執(zhí)行上述命令之后，會(huì)生成 id_rsa 和 id_rsa.pub 兩個(gè)文件，前者是我們私有的，而后者則是對(duì)外開放的。接著找到生成的 .ssh 的文件夾中的 id_rsa.pub 密鑰，將內(nèi)容復(fù)制；

然后打開 GitHub-Settings-Keys^[4] 頁面，創(chuàng)建一個(gè)新的 SSH key，填寫 Title 和 Key，Title 可以隨意，而 Key 的內(nèi)容則是我們剛才復(fù)制的 id_rsa.pub 中的內(nèi)容，最后點(diǎn)擊 Add SSH key 即可；

Node.Js 安裝

安裝

去官網(wǎng)下載最新的穩(wěn)定版 Node.JS^[5] ，一般推薦 64 位（大家應(yīng)該現(xiàn)在用的電腦基本都是 64 位的吧），安裝的話很簡(jiǎn)單，基本就是下一步下一步點(diǎn)擊就好了。如果還是不知道如何安裝，可以參考我的另一篇博客：Windows 下 Node.js 的安裝（多圖版）^[6]

驗(yàn)證

安裝完成后，要查看我們是否安裝成功，可以打開命令提示符（Win + R），輸入 cmd 打開控制臺(tái)，輸入如下命令，如果出現(xiàn)對(duì)應(yīng)版本號(hào)，說明安裝成功了；

node -v
npm -v

設(shè)置

由于下載包是從國(guó)外服務(wù)器，所以速度較慢，因此我們推薦用阿里的國(guó)內(nèi)鏡像進(jìn)行設(shè)置；

npm config set registry https://registry.npm.taobao.org

Hexo 安裝

在你的硬盤上找個(gè)地兒，用來存放你的博客文件，比如我的就在 D:personalFiles/github/blog，這個(gè)文件夾你可以根據(jù)自己的喜好來設(shè)置。然后從命令臺(tái)進(jìn)入當(dāng)前文件夾，接下來就是安裝過程了；

1. 首先安裝 Hexo

npm i hexo-cli -g

2. 新建一個(gè)文件夾用于存放你的博客，比如我的是 blog，然后進(jìn)入該文件夾，并用如下命令進(jìn)行初始化并安裝必備組件；

hexo init .
npm install

3. 初始化后，目錄結(jié)構(gòu)如下；

.
├── _config.yml # 網(wǎng)站配置信息
├── package.json # 應(yīng)用程序信息
├── scaffolds # 模板文件夾
├── source # 存放用戶資源
|   ├── _drafts
|   └── _posts
└── themes # 主題文件夾

4. 然后輸入如下命令，然后在瀏覽器中打開 http://localhost:4000；

# 新建博客
hexo new "博客名"
# 生成靜態(tài)網(wǎng)頁
hexo g
# 打開本地服務(wù)器
hexo s

然后就可以看到如下的界面，不過我的是經(jīng)過修改過的，所以和你的會(huì)不一樣。

Github 個(gè)人倉(cāng)庫(kù)

完成上面的步驟之后，我們就能在本地進(jìn)行預(yù)覽了，不過我們?nèi)绻胍l(fā)布到網(wǎng)上供別人看的話，那就得利用 Github Pages 的功能了，下邊就來介紹如何結(jié)合 Hexo + Github Pages ，將我們的博客推送到網(wǎng)上去，方便大家在任何地方訪問！

首先你得有個(gè) GitHub 賬號(hào)，如果沒有的，請(qǐng)出門 右轉(zhuǎn)^[7] 先去注冊(cè)個(gè)賬號(hào)；

有了賬號(hào)之后，新建一個(gè)倉(cāng)庫(kù)，而且得確保你的倉(cāng)庫(kù)是 public，你要搞個(gè) private，誰能訪問的了？？？同時(shí)，倉(cāng)庫(kù)名一定要是：

用戶名.github.io

用戶名.github.io

用戶名.github.io

這個(gè)用戶名建議不要太復(fù)雜，但是又要能體現(xiàn)你個(gè)人特點(diǎn)，因?yàn)楹罄m(xù)讓別人訪問你的博客時(shí)，就要通過 https://用戶名.github.io 這個(gè)域名來訪問。比如我的用戶名是 cunyu1943，所以我的倉(cāng)庫(kù)就是 cunyu1943.github.io^[8]：

部署到 Github

完成上面的步驟后，你應(yīng)該能在本地進(jìn)行預(yù)覽了，接下來就是推送網(wǎng)站到 Github Pages 了，然后我們就能被其他人訪問了。

只需要在我們剛才的博客根目錄中的站點(diǎn)配置文件 _config.yml ，設(shè)置為你的個(gè)人倉(cāng)庫(kù)名即可：

完成上述步驟之后，主要使用如下命令，就能將我們本地的內(nèi)容推送到遠(yuǎn)程 GitHub 倉(cāng)庫(kù)了，然后在瀏覽器中訪問：

https://用戶名.github.io

比如我的博客 村雨遙的博客^[9]；

hexo clean
hexo g
hexo d

Gitee 個(gè)人倉(cāng)庫(kù)

上面說完部署到 Github，接下來就說說怎么部署到 Gitee，老規(guī)矩，首先你得需要一個(gè) Gitee 賬號(hào)，如果沒有的，出門 右轉(zhuǎn)^[10] 先去注冊(cè)個(gè)賬號(hào)。

然后新建一個(gè)倉(cāng)庫(kù)，同樣有幾點(diǎn)需要注意的：

1. 保證你的倉(cāng)庫(kù)是 public；
2. 倉(cāng)庫(kù)名是 你的用戶名，這一點(diǎn)和 Github 略有不同，不需要是 用戶名.gitee.io；

比如我的用戶名是 cunyu1943，所以我的倉(cāng)庫(kù)名就是 cunyu1943^[11]。

部署到 Gitee

完成上面的步驟后，你應(yīng)該能在本地進(jìn)行預(yù)覽了，接下來就是推送網(wǎng)站到 Gitee Pages 了，然后我們就能被其他人訪問了。這里需要注意的是，Gitee Pages 不像 Github Pages 會(huì)自動(dòng)更新，它需要你每次推送后，去更新一下，如果想要自動(dòng)更新，就需要開通 Gitee 的會(huì)員。

然后需要在我們剛才的博客根目錄中的站點(diǎn)配置文件 _config.yml ，設(shè)置為你的個(gè)人倉(cāng)庫(kù)名即可：

完成上述步驟之后，主要使用如下命令，就能將我們本地的內(nèi)容推送到遠(yuǎn)程 Gitee 倉(cāng)庫(kù)了，去手動(dòng)更新 Gitee Pages 后，然后在瀏覽器中訪問：

https://用戶名.gitee.io

如何寫新博客并推送到遠(yuǎn)程

通過上面的步驟后，你的博客應(yīng)該就已經(jīng)搭建成功，而且能通過 https://用戶名.github.io 的方式進(jìn)行訪問了。接下來如果我們要發(fā)一篇新的博客內(nèi)容，又應(yīng)該怎么辦呢？接下來就詳細(xì)講一下如何操作。

1. 首先進(jìn)入博客所在文件夾，然后右鍵進(jìn)入控制臺(tái)，用如下命令進(jìn)行創(chuàng)建新的文章；

hexo n "博客標(biāo)題名"

2. 接著在 blog/source/_posts 目錄下應(yīng)該就會(huì)有創(chuàng)建好的以文章標(biāo)題名命名的 Markdown 文件；

3. 接著打開該文件，編寫你自己想要的內(nèi)容即可；

4. 接著在控制臺(tái)使用如下命令，將其推送到遠(yuǎn)程 GitHub 倉(cāng)庫(kù)，等過一會(huì)兒之后，訪問即可看到剛才推送的新文章了！

hexo g
hexo d

如何綁定自定義域名

通過 用戶名.github.io 的方式來訪問總歸是有些不方便，如果我們需要自己的個(gè)性域名，又應(yīng)該如何設(shè)置呢？那么在此之前，你需要有一個(gè)已經(jīng)備案好的域名，如果沒有的話，請(qǐng)到阿里云、騰訊云等商購(gòu)買自己的域名，然后通過該平臺(tái)備案，然后添加兩條解析記錄，以我的騰訊云為例：

備好案并設(shè)置解析之后，在 Github 的博客項(xiàng)目中，依次點(diǎn)擊 Settings->Pages，然后在 Custom domain 添加你的域名即可，最后 Save 即可，此時(shí)你的博客根目錄下應(yīng)該會(huì)多一個(gè) CNAME 的文件，然后你就可以通過自己的域名來訪問你的博客了。

當(dāng)然，有時(shí)候可能經(jīng)過上面的設(shè)置后，博客根目錄下不會(huì)出現(xiàn)名為 CNAME 的文件，如果沒有，我們可以通過在本地博客 /source 目錄下手動(dòng)建立一個(gè) CNAME 文件（無后綴），然后把你的域名填進(jìn)去并保存，最后依次執(zhí)行如下命令將設(shè)置上傳到 Github 即可 ~

hexo g
hexo d

比如我的域名為 cunyu1943.site，通過設(shè)置之后，我們就可以通過 https://cunyu1943.site 來訪問我的博客了。

美化

經(jīng)過上面的設(shè)置之后，我們只是得到了一個(gè)簡(jiǎn)單的博客，如果你也想讓你的博客像我的一樣酷（zhuang）炫（bi），就要用到主題了，我采用的主題是 hexo-theme-matery^[12]，一個(gè)基于材料設(shè)計(jì)和響應(yīng)式設(shè)計(jì)而成的主題，而且關(guān)于如何設(shè)置它也有十分詳細(xì)的文檔，如果存在不懂得問題，還可以及時(shí)提交 issue，作者回復(fù)也十分及時(shí)。

如果你不想過于折騰，那么你完成上面的步驟之后，也可以直接采用我的博客源代碼，然后把里邊的個(gè)人配置改一下就 ok 了，我的博客源碼地址：cunyu1943/hexo-theme-matery-personal^[13]

大家直接下載下來，然后把 node_modules.zip 進(jìn)行解壓，然后修改其中的部分配置（也就是你的 Github、網(wǎng)名啥的呀個(gè)人信息），主要是修改根目錄下的 _config.yml 和 _config.hexo-theme-matery.yml，然后就可以直接寫博客了。當(dāng)然，前提是你把環(huán)境啥的都搭建好了。

PS：我對(duì)于配置文件中的某些關(guān)鍵信息進(jìn)行了隱藏，比如 gitalk、gitment、Valine、baiduAnalytics 等，這些需要你自己去注冊(cè)并獲取自己的信息，請(qǐng)記得修改，否則可能導(dǎo)致失敗。

總結(jié)

至此，我們的博客就搭建完成了，是不是很簡(jiǎn)單，趕緊去試試吧！

對(duì)于文中不清楚的地方，歡迎留言，我會(huì)在看到的第一時(shí)間回復(fù)你！

參考資料