花費(fèi)了 一天半 的時間，終于把我的 個人博客 搭建完成，下面我寫下搭建博客的過程，其實挺簡單的 ??
詳情，可查閱我的博客 lishaoy.net
博客所用技術(shù) （Hexo + Next + GitHubPages）
在文章的末尾我會 貼出 我基于 Hexo + Next + GitHubPages 搭建博客，所參考的文章鏈接。
如果，你也想用這些技術(shù)搭建漂亮的博客，你就需要了解下 Hexo 、 Next 、 GitHubPages 這三個單詞，下面會逐個解釋。
什么是 Hexo
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。 -- Hexo
什么是 Next
NexT 是 Hexo的一個主題（theme），擁有豐富而簡單的配置，結(jié)合第三方服務(wù)，可以打造屬于您自己的博客。 -- 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頁面是一個靜態(tài)的站點托管服務(wù)，旨在從GitHub存儲庫中直接托管您的個人、組織或項目頁面。
所以，Hexo 、 Next 、 GitHubPages 配合起來就可以免費(fèi)搭建漂亮的 個人博客 , 是不是很爽 ??
如何基于 Hexo 搭建博客
基于 Hexo 搭建博客，只需簡單的幾步，就能完成 個人博客 的搭建。
準(zhǔn)備工作
下載安裝 nodejs
node 會自帶 npm 包管理工具，建議安裝 yarn 來管理依賴 （因為 hexo 貌似是用 yarn 管理 依賴 的，否則可以回出現(xiàn) 依賴 問題）。
Mac 用戶可以用 brew 安裝，Windows 可以用 cmder 或去官網(wǎng)下安裝包程序。
brew install node
然后用 npm 安裝 yarn
npm install yarn
安裝 git
Mac 用戶可用剛安裝的 yarn 包管理工具安裝 git，Windows 可以 cmder 或去官網(wǎng)下安裝包程序。
yarn add git -g
安裝 hexo
進(jìn)入你的項目目錄，比如我的是 myblog ，
cd myblog
然后用 yarn 安裝 hexo。
yarn add hexo -S
此時，環(huán)境都準(zhǔn)備好了，就可以開始搭建 hexo 博客了 ??
搭建本地博客
進(jìn)入你的項目目錄
比如：我的是 myblog。
cd myblog
項目初始化
項目初始化，會自動生成博客模板，以后寫博客只需用 markdown 語法編寫對應(yīng)的 .md 文件即可 ?? 。
hexo init
安裝所有的依賴
建議使用用 yarn ，否則會出現(xiàn)依賴問題（在本文之后有相關(guān)介紹）。
yarn install
最后，啟動本地服務(wù)
在瀏覽器輸入 localhost:4000 即可預(yù)覽博客
hexo server
如圖: ?? </br>
關(guān)聯(lián) GitHub
通過 GitHub 的 pages 功能，我們可以把我們的博客托管到 GitHub ，而無需去購買云服務(wù)器 ?? ,輕松愉快的構(gòu)建免費(fèi)博客。
創(chuàng)建 GitHub 賬戶
我相信 ?? 大家應(yīng)該都有 GitHub 賬號了，如果沒有可去 GitHub 官網(wǎng)按照步驟創(chuàng)建賬戶即可。
配置關(guān)聯(lián) GitHub
- 有了 GitHub 賬號之后，登錄 GitHub ，創(chuàng)建一個項目，項目名稱最好和你本地的項目一致，比如：
myblog
項目建好之后，一定要開啟 GitHub Pages 功能 ??
- 點擊如圖
Settings開啟，GitHub Pages 功能
- 選擇
master branch, 然后 Save
- 復(fù)制你的項目連接，如圖
- 然后在你本地項目根目錄找到
_config.yml文件，粘貼到以下位置
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/persilee/MyBlog.git
branch: master
完成關(guān)聯(lián)
完成以上步驟之后，就可以把自己本地項目推送到 GitHub 托管，只剩下3步 ??
- 安裝
hexo-deployer-git插件（可以通過簡單的命令,完成文件生成及推送功能）
yarn add hexo-deployer-git -S
- 運(yùn)行
hexo g（生成本地文件）
hexo g
- 運(yùn)行
hexo d（將本地文件推送到 GitHub ，和git push功能相同）
hexo d
此時，GitHub 應(yīng)該已給你生成了訪問連接，連接格式是: 你的賬號名稱 + .github.io + \項目名稱,也可以去剛才 GitHubPages 設(shè)置頁面查看
例如我的：https:\persilee.github.io\MyBlog
這時，你就可以把連接發(fā)給小伙伴們，他們通過連接都可以訪問你的 博客 ??。
這里需要注意的地方是：在執(zhí)行
hexo g命令時候，可能會出現(xiàn)以下error,應(yīng)該是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
在執(zhí)行 hexo g ,順利執(zhí)行 ??
綁定域名
我們已經(jīng)可以通過 GitHub 分發(fā)給我的地址訪問 博客 ，但是，這對于我們這些愛 折騰 的 程序猿?????? 來說，還不夠，弄個自己的 域名 才夠拉風(fēng)??。
于是。。。
開始綁定自己的 域名 lishaoy.net
然而，我們綁定 域名 之后，只支持 http 協(xié)議，這樣我們在 Google 瀏覽器訪問時，會有不安全標(biāo)準(zhǔn)，而且，很容易被插入廣告，于是。。。折騰 走起??：搞個 https
轉(zhuǎn)入正題，經(jīng)過一番 折騰 ，采用第三方服務(wù) Netlify 來提供免費(fèi)的SSL/TLS證書。
當(dāng)然，這里我提供2種方式綁定域名，一種是 HTTP (不安全的網(wǎng)絡(luò)協(xié)議)、一種是 HTTPS （安全的網(wǎng)絡(luò)協(xié)議，在 Google 瀏覽器上回有一把小鎖，如圖）
HTTP 綁定域名
設(shè)置域名解析規(guī)則
首先，我們需要去運(yùn)行商，新增域名解析規(guī)則，如圖
新增 CNAME 文件
配置好域名解析規(guī)則之后，還需要在項目的 .\source\ 路徑下新增 CNAME 文件，輸入內(nèi)容 你的域名 ,如：lishaoy.net
重新新生成文件，推送到GitHub
重新生成文件，運(yùn)行 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修改短名稱，方便記憶在自己的域名管理中設(shè)置 DNS ，我使用的是 阿里云 ，在管理界面添加如圖規(guī)則
- 在點擊
Domain management下的HTTPS，按照步驟完成操作，稍等片刻，即可看到我們的 域名 已經(jīng)上鎖 ??
?? ?? ?? ?? ?? ?? ...
更換 next 主題
hexo 的主題很多，你可以選擇其他喜歡 ?? 的主題，我使用的是 next 主題。
安裝 next 主題
執(zhí)行以下命令，安裝 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
重新生成文件，運(yùn)行 hexo g
hexo g
推送 GitHub
hexo d
也可以運(yùn)行以下命令，啟動一個本地服務(wù)，調(diào)試確定無問題之后再 推送到 GitHub
hexo s --debug
本地服務(wù)啟動后，可以在瀏覽器輸入 http://localhost:4000 預(yù)覽，如圖
本文到此告一段落，關(guān)于 next 主題美化的問題，可以參考以下鏈接文章 ??
以下是我搭建 博客 參考的文章鏈接 ??
