GitHubPages + Hexo

花費(fèi)了 一天半 的時(shí)間蒂窒，終于把我的 個(gè)人博客 搭建完成躁倒，下面我寫下搭建博客的過程，其實(shí)挺簡單的 ??

詳情洒琢，可查閱我的博客 lishaoy.net

博客所用技術(shù) （Hexo + Next + GitHubPages）

在文章的末尾我會(huì) 貼出 我基于 Hexo + Next + GitHubPages 搭建博客秧秉，所參考的文章鏈接。

如果衰抑，你也想用這些技術(shù)搭建漂亮的博客象迎，你就需要了解下 Hexo 、 Next 呛踊、 GitHubPages 這三個(gè)單詞砾淌，下面會(huì)逐個(gè)解釋。

什么是 Hexo

Hexo 是一個(gè)快速谭网、簡潔且高效的博客框架汪厨。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)愉择，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁劫乱。 -- Hexo

什么是 Next

NexT 是 Hexo的一個(gè)主題（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頁面是一個(gè)靜態(tài)的站點(diǎn)托管服務(wù)层坠，旨在從GitHub存儲(chǔ)庫中直接托管您的個(gè)人脱惰、組織或項(xiàng)目頁面。

所以窿春，Hexo 拉一、 Next 、 GitHubPages 配合起來就可以免費(fèi)搭建漂亮的 個(gè)人博客 , 是不是很爽 ??

如何基于 Hexo 搭建博客

基于 Hexo 搭建博客旧乞，只需簡單的幾步蔚润，就能完成 個(gè)人博客 的搭建。

準(zhǔn)備工作

下載安裝 nodejs

node 會(huì)自帶 npm 包管理工具尺栖，建議安裝 yarn 來管理依賴 （因?yàn)?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)入你的項(xiàng)目目錄者蠕，比如我的是 myblog 窃祝，

    cd myblog

然后用 yarn 安裝 hexo。

    yarn add hexo -S

此時(shí)踱侣，環(huán)境都準(zhǔn)備好了粪小，就可以開始搭建 hexo 博客了 ??

搭建本地博客

進(jìn)入你的項(xiàng)目目錄

比如：我的是 myblog。

    cd myblog

項(xiàng)目初始化

項(xiàng)目初始化抡句，會(huì)自動(dòng)生成博客模板探膊，以后寫博客只需用 markdown 語法編寫對(duì)應(yīng)的 .md 文件即可 ?? 。

    hexo init

安裝所有的依賴

建議使用用 yarn 待榔，否則會(huì)出現(xiàn)依賴問題（在本文之后有相關(guān)介紹）逞壁。

    yarn install

最后，啟動(dòng)本地服務(wù)

在瀏覽器輸入 localhost:4000 即可預(yù)覽博客

    hexo server

如圖: ?? </br>

hexo最初的樣子 ??

關(guān)聯(lián) GitHub

通過 GitHub 的 pages 功能锐锣，我們可以把我們的博客托管到 GitHub 腌闯，而無需去購買云服務(wù)器 ?? ,輕松愉快的構(gòu)建免費(fèi)博客。

創(chuàng)建 GitHub 賬戶

我相信 ?? 大家應(yīng)該都有 GitHub 賬號(hào)了刺下，如果沒有可去 GitHub 官網(wǎng)按照步驟創(chuàng)建賬戶即可。

配置關(guān)聯(lián) GitHub

• 有了 GitHub 賬號(hào)之后稽荧，登錄 GitHub 橘茉，創(chuàng)建一個(gè)項(xiàng)目，項(xiàng)目名稱最好和你本地的項(xiàng)目一致姨丈，比如： myblog

項(xiàng)目建好之后畅卓，一定要開啟 GitHub Pages 功能 ??

• 點(diǎn)擊如圖 Settings 開啟，GitHub Pages 功能

GitHubPages Settings

• 選擇 master branch , 然后 Save

GitHubPages Source

• 復(fù)制你的項(xiàng)目連接蟋恬，如圖

GitHubPages URL

• 然后在你本地項(xiàng)目根目錄找到 _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)

完成以上步驟之后，就可以把自己本地項(xiàng)目推送到 GitHub 托管歼争，只剩下3步 ??

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

    yarn add hexo-deployer-git -S

2. 運(yùn)行 hexo g （生成本地文件）

    hexo g

3. 運(yùn)行 hexo d （將本地文件推送到 GitHub 拜马，和 git push 功能相同）

    hexo d

此時(shí)，GitHub 應(yīng)該已給你生成了訪問連接沐绒，連接格式是: 你的賬號(hào)名稱 + .github.io + \項(xiàng)目名稱,也可以去剛才 GitHubPages 設(shè)置頁面查看
例如我的：https:\persilee.github.io\MyBlog

這時(shí)俩莽，你就可以把連接發(fā)給小伙伴們，他們通過連接都可以訪問你的 博客 ??乔遮。

這里需要注意的地方是：在執(zhí)行 hexo g 命令時(shí)候扮超，可能會(huì)出現(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ā)給我的地址訪問 博客 ，但是馁龟，這對(duì)于我們這些愛 折騰 的 程序猿?????? 來說崩侠，還不夠，弄個(gè)自己的 域名 才夠拉風(fēng)??屁柏。

于是啦膜。。淌喻。

開始綁定自己的 域名 lishaoy.net

然而僧家，我們綁定 域名 之后，只支持 http 協(xié)議裸删，這樣我們?cè)?Google 瀏覽器訪問時(shí)八拱，會(huì)有不安全標(biāo)準(zhǔn)，而且涯塔，很容易被插入廣告肌稻，于是。匕荸。爹谭。折騰 走起??：搞個(gè) 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 瀏覽器上回有一把小鎖尔觉，如圖）

Google HTTPS 狀態(tài)標(biāo)識(shí)

HTTP 綁定域名

設(shè)置域名解析規(guī)則

首先凉袱，我們需要去運(yùn)行商，新增域名解析規(guī)則侦铜，如圖

域名解析規(guī)則

新增 CNAME 文件

配置好域名解析規(guī)則之后专甩，還需要在項(xiàng)目的 .\source\ 路徑下新增 CNAME 文件，輸入內(nèi)容 你的域名 ,如：lishaoy.net

重新新生成文件钉稍，推送到GitHub

重新生成文件配深，運(yùn)行 hexo g

    hexo g

推送 GitHub

    hexo d

HTTPS 綁定域名

注冊(cè) Netlify 賬號(hào)

首先，我們需要注冊(cè)一個(gè) Netlify 賬號(hào)嫁盲，地址：Netlify 篓叶，可以選擇用 GitHub 注冊(cè)烈掠。

Netlity Login

新增站點(diǎn)

• 點(diǎn)擊如圖按鈕 New site from Git,來新增 站點(diǎn)

New site from Git

• 然后，點(diǎn)擊如圖按鈕 GitHub

GitHub

• 選擇你的項(xiàng)目缸托，比如我的 MyBlog

Select Site

• 點(diǎn)擊 Deploy site

Deploy site

• 看到如圖頁面左敌，表示成功，再點(diǎn)擊 Site settings

Getting started

Site details

• 再點(diǎn)擊 Change site name 修改短名稱俐镐，方便記憶

• 在自己的域名管理中設(shè)置 DNS 矫限，我使用的是 阿里云 ，在管理界面添加如圖規(guī)則

設(shè)置域名規(guī)則

• 在點(diǎn)擊 Domain management 下的 HTTPS 佩抹，按照步驟完成操作叼风，稍等片刻，即可看到我們的 域名 已經(jīng)上鎖 ??

lishaoy.net上鎖

?? ?? ?? ?? ?? ?? ...

更換 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)行以下命令彬碱，啟動(dòng)一個(gè)本地服務(wù)，調(diào)試確定無問題之后再 推送到 GitHub

    hexo s --debug

本地服務(wù)啟動(dòng)后奥洼，可以在瀏覽器輸入 http://localhost:4000 預(yù)覽巷疼，如圖

next 主題最初的樣子??

本文到此告一段落，關(guān)于 next 主題美化的問題灵奖，可以參考以下鏈接文章 ??

以下是我搭建 博客 參考的文章鏈接 ??

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