用 Hexo + Next + GitHubPages 搭建漂亮的免費部落格

花費了 一天半 的時間，終於把我的 個人部落格 搭建完成，下面我寫下搭建部落格的過程，其實挺簡單的 ?

詳情，可查閱我的部落格 lishaoy.net

---

部落格所用技術 （Hexo + Next + GitHubPages）

在文章的末尾我會 貼出 我基於 Hexo + Next + GitHubPages 搭建部落格，所參考的文章連結。

如果，你也想用這些技術搭建漂亮的部落格，你就需要了解下 Hexo 、 Next 、 GitHubPages 這三個單詞，下面會逐個解釋。

什麼是 Hexo

Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。 -- Hexo

什麼是 Next

NexT 是 Hexo的一個主題（theme），擁有豐富而簡單的配置，結合第三方服務，可以打造屬於您自己的部落格。 -- Next

什麼是 GitHubPages

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository. -- GitHubPages

翻譯過來大概是： GitHub頁面是一個靜態的站點託管服務，旨在從GitHub儲存庫中直接託管您的個人、組織或專案頁面。

所以，Hexo 、 Next 、 GitHubPages 配合起來就可以免費搭建漂亮的 個人部落格 , 是不是很爽 ?

---

如何基於 Hexo 搭建部落格

基於 Hexo 搭建部落格，只需簡單的幾步，就能完成 個人部落格 的搭建。

準備工作

下載安裝 nodejs

node 會自帶 npm 包管理工具，建議安裝 yarn 來管理依賴 （因為 hexo 貌似是用 yarn 管理 依賴 的，否則可以回出現 依賴 問題）。

Mac 使用者可以用 brew 安裝，Windows 可以用 cmder 或去官網下安裝包程式。

    brew install node

然後用 npm 安裝 yarn

    npm install yarn

安裝 git

Mac 使用者可用剛安裝的 yarn 包管理工具安裝 git，Windows 可以 cmder 或去官網下安裝包程式。

    yarn add git -g

安裝 hexo

進入你的專案目錄，比如我的是 myblog ，

    cd myblog

然後用 yarn 安裝 hexo。

    yarn add hexo -S

此時，環境都準備好了，就可以開始搭建 hexo 部落格了 ?

---

搭建本地部落格

進入你的專案目錄

比如：我的是 myblog。

    cd myblog

專案初始化

專案初始化，會自動生成部落格模板，以後寫部落格只需用 markdown 語法編寫對應的 .md 檔案即可 ✍️ 。

    hexo init

安裝所有的依賴

建議使用用 yarn ，否則會出現依賴問題（在本文之後有相關介紹）。

    yarn install

最後，啟動本地服務

在瀏覽器輸入 localhost:4000 即可預覽部落格

    hexo server

如圖: ? </br>

---

關聯 GitHub

通過 GitHub 的 pages 功能，我們可以把我們的部落格託管到 GitHub ，而無需去購買雲伺服器 ? ,輕鬆愉快的構建免費部落格。

建立 GitHub 賬戶

我相信 ? 大家應該都有 GitHub 賬號了，如果沒有可去 GitHub 官網按照步驟建立賬戶即可。

配置關聯 GitHub

• 有了 GitHub 賬號之後，登入 GitHub ，建立一個專案，專案名稱最好和你本地的專案一致，比如： myblog

專案建好之後，一定要開啟 GitHub Pages 功能 ⚠️

• 點選如圖 Settings 開啟，GitHub Pages 功能

• 選擇 master branch , 然後 Save

• 複製你的專案連線，如圖

• 然後在你本地專案根目錄找到 _config.yml 檔案，貼上到以下位置

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/persilee/MyBlog.git
  branch: master

完成關聯

完成以上步驟之後，就可以把自己本地專案推送到 GitHub 託管，只剩下3步 ?

1. 安裝 hexo-deployer-git 外掛（可以通過簡單的命令,完成檔案生成及推送功能）

    yarn add hexo-deployer-git -S

2. 執行 hexo g （生成本地檔案）

    hexo g

3. 執行 hexo d （將本地檔案推送到 GitHub ，和 git push 功能相同）

    hexo d

此時，GitHub 應該已給你生成了訪問連線，連線格式是: 你的賬號名稱 + .github.io + \專案名稱,也可以去剛才 GitHubPages 設定頁面檢視
例如我的：https:\persilee.github.io\MyBlog

這時，你就可以把連線發給小夥伴們，他們通過連線都可以訪問你的 部落格 ?。

這裡需要注意的地方是：在執行 hexo g 命令時候，可能會出現以下 error,應該是 yarn 和 npm 衝突的依賴的問題，所以前面文章建議使用 yarn 管理包依賴

ERROR Plugin load failed: hexo-renderer-marked
Error: EISDIR: illegal operation on a directory, read
ERROR Plugin load failed: hexo-server
Error: EISDIR: illegal operation on a directory, read
ERROR Plugin load failed: hexo-renderer-stylus
Error: EISDIR: illegal operation on a directory, read

解決辦法，先用 yarn 分別移除，再重新安裝，如下

## 先移除
yarn remove hexo-renderer-marked

yarn remove hexo-renderer-stylus

yarn remove hexo-server

## 再安裝
yarn add hexo-renderer-marked -S 

yarn add hexo-renderer-stylus -S

yarn add hexo-server -S

在執行 hexo g ,順利執行 ?

---

繫結域名

我們已經可以通過 GitHub 分發給我的地址訪問 部落格 ，但是，這對於我們這些愛 折騰 的 程式猿?‍?‍ 來說，還不夠，弄個自己的 域名 才夠拉風?。

於是。。。

開始繫結自己的 域名 lishaoy.net

然而，我們繫結 域名 之後，只支援 http 協議，這樣我們在 Google 瀏覽器訪問時，會有不安全標準，而且，很容易被插入廣告，於是。。。折騰 走起?：搞個 https

轉入正題，經過一番 折騰 ，採用第三方服務 Netlify 來提供免費的SSL/TLS證書。

當然，這裡我提供2種方式繫結域名，一種是 HTTP (不安全的網路協議)、一種是 HTTPS （安全的網路協議，在 Google 瀏覽器上回有一把小鎖，如圖）

HTTP 繫結域名

設定域名解析規則

首先，我們需要去執行商，新增域名解析規則，如圖

新增 CNAME 檔案

配置好域名解析規則之後，還需要在專案的 .\source\ 路徑下新增 CNAME 檔案，輸入內容 你的域名 ,如：lishaoy.net

重新新生成檔案，推送到GitHub

重新生成檔案，執行 hexo g

    hexo g

推送 GitHub

    hexo d

---

HTTPS 繫結域名

註冊 Netlify 賬號

首先，我們需要註冊一個 Netlify 賬號，地址：Netlify ，可以選擇用 GitHub 註冊。

新增站點

• 點選如圖按鈕 New site from Git,來新增 站點

• 然後，點選如圖按鈕 GitHub

• 選擇你的專案，比如我的 MyBlog

• 點選 Deploy site

• 看到如圖頁面，表示成功，再點選 Site settings

• 再點選 Change site name 修改短名稱，方便記憶

• 在自己的域名管理中設定 DNS ，我使用的是 阿里雲 ，在管理介面新增如圖規則

• 在點選 Domain management 下的 HTTPS ，按照步驟完成操作，稍等片刻，即可看到我們的 域名 已經上鎖 ?

? ? ? ? ? ? ...

---

更換 next 主題

hexo 的主題很多，你可以選擇其他喜歡 ❤️ 的主題，我使用的是 next 主題。

安裝 next 主題

執行以下命令，安裝 next 主題

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

更改配置檔案

修改根目錄下的 ./_config.yml 檔案，如下

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

重新新生成檔案，推送到GitHub

重新生成檔案，執行 hexo g

    hexo g

推送 GitHub

    hexo d

也可以執行以下命令，啟動一個本地服務，除錯確定無問題之後再 推送到 GitHub

    hexo s --debug

本地服務啟動後，可以在瀏覽器輸入 http://localhost:4000 預覽，如圖

本文到此告一段落，關於 next 主題美化的問題，可以參考以下連結文章 ?

以下是我搭建 部落格 參考的文章連結 ?

• hexo的next主題個性化教程:打造炫酷網站
• Hexo搭建部落格教程
• Hexo部落格搭建全攻略(二)：NexT主題配置