花費了 一天半 的時間，終於把我的 個人部落格 搭建完成，下面我寫下搭建部落格的過程，其實挺簡單的 ?
部落格所用技術 （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如圖: ?
關聯 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步 ?
- 安裝
hexo-deployer-git外掛（可以通過簡單的命令,完成檔案生成及推送功能）
yarn add hexo-deployer-git -S- 執行
hexo g（生成本地檔案）
hexo g- 執行
hexo d（將本地檔案推送到 GitHub ，和git push功能相同）
hexo d此時，GitHub 應該已給你生成了訪問連線，連線格式是: 你的賬號名稱 + .github.io + 專案名稱,也可以去剛才 GitHubPages 設定頁面檢視
例如我的：https:persilee.github.ioMyBlog
這時，你就可以把連線發給小夥伴們，他們通過連線都可以訪問你的 部落格 ?。
這裡需要注意的地方是：在執行
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 主題美化的問題，可以參考以下連結文章 ?
以下是我搭建 部落格 參考的文章連結 ?