用 Hexo + Next + GitHubPages 搭建漂亮的免費博客

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

---

博客所用技術 （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步 ?

1. 安裝 hexo-deployer-git 插件（能夠經過簡單的命令,完成文件生成及推送功能）

yarn add hexo-deployer-git -S

1. 運行 hexo g （生成本地文件）

hexo g

1. 運行 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 主題美化的問題，能夠參考如下連接文章 ?

如下是我搭建 博客 參考的文章連接 ?

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