前言：博主目前大三斩披，Web 前端愛好者溜族。寫博客的好處讹俊，不是為了寫而寫，而是一個(gè)記錄思想的過程煌抒。不要考慮它能帶給你什么仍劈，而是你自己從中收獲了什么。
最近剛好有空寡壮，于是就參照網(wǎng)上的各種教程贩疙，搭建了一個(gè)博客。現(xiàn)在把 Hexo + GitHub Pages 搭建博客的完整過程記錄下來：
個(gè)人博客地址：http://www.lovebxm.com
大概流程：
- 搭建 Node.js 環(huán)境
- 搭建 Git 環(huán)境
- GitHub 注冊和配置
- 安裝配置 Hexo
- 關(guān)聯(lián) Hexo 與 GitHub Pages
- GitHub Pages 地址解析到個(gè)人域名
- Hexo 的常用操作
- 結(jié)束語
搭建 Node.js 環(huán)境
為什么要搭建 Node.js 環(huán)境况既？ - 因?yàn)?Hexo 博客系統(tǒng)是基于 Node.js 編寫的
Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境这溅，可以在非瀏覽器環(huán)境下，解釋運(yùn)行 JS 代碼棒仍。
在 Node.js 官網(wǎng)：https://nodejs.org/en/ 下載安裝包 v6.10.3 LTS
保持默認(rèn)設(shè)置即可悲靴，一路Next，安裝很快就結(jié)束了莫其。
然后打開命令提示符对竣，輸入 node -v雏门、npm -v驰唬，出現(xiàn)版本號則說明 Node.js 環(huán)境配置成功馋没，第一步完成Ｏ脖酢４γ妗吮成！
搭建 Git 環(huán)境
為什么要搭建 Git 環(huán)境鳄虱？ - 因?yàn)樾枰驯镜氐木W(wǎng)頁和文章等提交到 GitHub 上蒜田。
Git 是一款免費(fèi)烙心、開源的分布式版本控制系統(tǒng)膜廊，用于敏捷高效地處理任何或小或大的項(xiàng)目。
在 Git 官網(wǎng)：https://git-scm.com/ 下載安裝包 Git-2.13.0-64-bit.exe
桌面右鍵淫茵，打開 Git Bush Here爪瓜，輸入 git --version，出現(xiàn)版本號則說明 Git 環(huán)境配置成功匙瘪，第二步完成Ｃ！丹喻！
GitHub 注冊和配置
GitHub 是一個(gè)代碼托管平臺薄货，因?yàn)橹恢С?Git 作為唯一的版本庫格式進(jìn)行托管，故名 GitHub碍论。
Github注冊：https://github.com/
創(chuàng)建倉庫：Repository name 使用自己的用戶名谅猾，倉庫名規(guī)則：
注意：yourname 必須是你的用戶名。
yourname/yourname.github.io
訪問 yourname.github.io，如果可以正常訪問税娜，那么 Github 的配置已經(jīng)結(jié)束了坐搔。
到此搭建 Hexo 博客的相關(guān)環(huán)境配置已經(jīng)完成，下面開始講解 Hexo 的相關(guān)操作
安裝配置 Hexo
Hexo 是一個(gè)快速敬矩、簡潔且高效的博客框架概行，使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)谤绳，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。
強(qiáng)烈建議你花20分鐘區(qū)讀一讀 Hexo 的官方文檔：https://hexo.io/zh-cn/
使用 npm 安裝 Hexo：在命令行中輸入
npm install hexo-cli -g
然后你將會看到下圖袒哥，可能你會看到一個(gè)WARN缩筛，但是不用擔(dān)心，這不會影響你的正常使用堡称。
查看Hexo的版本
hexo version
安裝 Hexo 完成后瞎抛，請執(zhí)行下列命令來初始化 Hexo，用戶名改成你的却紧，Hexo 將會在指定文件夾中新建所需要的文件桐臊。
hexo init bxm0927.github.io
cd bxm0927.github.io
npm install
新建完成后，指定文件夾的目錄如下：
.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的靜態(tài)網(wǎng)頁文件
├── scaffolds #模板
├── source #博客正文和其他源文件晓殊，404断凶、favicon、CNAME 都應(yīng)該放在這里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主題
├── _config.yml #全局配置文件
└── package.json #npm 依賴等
運(yùn)行本地 Hexo 服務(wù)
hexo server
或者
hexo s
您的網(wǎng)站會在 http://localhost:4000 下啟動巫俺。如果 http://localhost:4000 能夠正常訪問认烁，則說明 Hexo 本地博客已經(jīng)搭建起來了，只是本地哦介汹，別人看不到的却嗡。下面，我們要部署到Github嘹承。
注意1：執(zhí)行hexo server提示找不到該指令
解決辦法：在Hexo 3.0 后server被單獨(dú)出來了窗价，需要安裝server，安裝的命令如下：
sudo npm install hexo-server
或者
npm install hexo -server --save
關(guān)聯(lián) Hexo 與 GitHub Pages
我們?nèi)绾巫尡镜豨it項(xiàng)目與遠(yuǎn)程的github建立聯(lián)系呢叹卷？用 SSH keys
生成SSH keys
輸入你自己的郵箱地址
ssh-keygen -t rsa -C "80583600@qq.com"
在回車中會提示你輸入一個(gè)密碼撼港，這個(gè)密碼會在你提交項(xiàng)目時(shí)使用，如果為空的話提交項(xiàng)目時(shí)則不用輸入骤竹，我們按回車不設(shè)置密碼餐胀。
添加 SSH Key 到 GitHub
打開 C:\Users\bxm09\.ssh\id_rsa.pub，此文件里面內(nèi)容為剛才生成的密鑰瘤载，準(zhǔn)確的復(fù)制這個(gè)文件的內(nèi)容否灾，粘貼到 https://github.com/settings/ssh 的 new SSH key 中
測試
可以輸入下面的命令，看看設(shè)置是否成功鸣奔，git@github.com的部分不要修改：
ssh -T git@github.com
如果是下面的反饋：
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?
不要緊張墨技，輸入yes就好惩阶，然后會看到：
Hi aierui! You've successfully authenticated, but GitHub does not provide shell access.
配置Git個(gè)人信息
現(xiàn)在你已經(jīng)可以通過 SSH 鏈接到 GitHub 了，還有一些個(gè)人信息需要完善的扣汪。
Git 會根據(jù)用戶的名字和郵箱來記錄提交断楷。GitHub 也是用這些信息來做權(quán)限的處理，輸入下面的代碼進(jìn)行個(gè)人信息的設(shè)置崭别，把名稱和郵箱替換成你自己的冬筒。
git config --global user.name "bxm0927"
git config --global user.email "80583600@qq.com"
配置 Deployment
在_config.yml文件中，找到Deployment茅主，然后按照如下修改舞痰，用戶名改成你的：
需要注意的是：冒號后面記得空一格！
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:bxm0927/bxm0927.github.io.git
branch: master
本地文件提交到 GitHub Pages
// 刪除舊的 public 文件
hexo clean
// 生成新的 public 文件
hexo generate
或者
hexo g
// 開始部署
hexo deploye
或者
hexo d
在瀏覽器中輸入 https://bxm0927.github.io （用戶名改成你的）看到了 Hexo 與 GitHub Pages 已經(jīng)成功關(guān)聯(lián)了诀姚，哇哇哇哇哇哇响牛，開心死你了，不要忘了回來給我點(diǎn)贊喲 ~
注意1：若上面操作失敗赫段，則需要提前安裝一個(gè)擴(kuò)展：
npm install hexo-deployer-git --save
注意2：如果在執(zhí)行 hexo d 后,出現(xiàn) error deployer not found:github 的錯(cuò)誤（如下）呀打，則是因?yàn)闆]有設(shè)置好 public key 所致，重新詳細(xì)設(shè)置即可糯笙。
Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
注意3：怎么避免 .md 文件被解析贬丛？
Hexo原理就是hexo在執(zhí)行hexo generate時(shí)會在本地先把博客生成的一套靜態(tài)站點(diǎn)放到public文件夾中，在執(zhí)行hexo deploy時(shí)將其復(fù)制到.deploy文件夾中给涕。Github的版本庫通常建議同時(shí)附上README.md說明文件瘫寝，但是hexo默認(rèn)情況下會把所有md文件解析成html文件，所以即使你在線生成了 README. md稠炬，它也會在你下一次部署時(shí)被刪去焕阿。怎么解決呢？
在執(zhí)行hexo deploy前把在本地寫好的README.md文件復(fù)制到.deploy文件夾中首启，再去執(zhí)行hexo deploy暮屡。
GitHub Pages 地址解析到個(gè)人域名
Github Pages 是面向用戶、組織和項(xiàng)目開放的公共靜態(tài)頁面搭建托管服 務(wù)毅桃，站點(diǎn)可以被免費(fèi)托管在 Github 上褒纲，你可以選擇使用 Github Pages 默 認(rèn)提供的域名 github.io 或者自定義域名來發(fā)布站點(diǎn)。
看著博客的域名是二級域名钥飞，總有一種寄人籬下的感覺莺掠，為了讓這個(gè)小窩看起來更加正式，我在阿里云上買了一個(gè)域名读宙，打算將博客綁定自己的域名彻秆。
進(jìn)行該綁定過程，其實(shí)就是一個(gè)重定向的過程。
在 GitHub 倉庫的根目錄下建立一個(gè) CNAME 的文本文件(注意：沒有擴(kuò)展名)唇兑，文件里面只能輸入一個(gè)你的域名酒朵，不能加http://
www.lovebxm.com
注意：CNAME 一定是在你 Github 項(xiàng)目的 master 根目錄下
進(jìn)入阿里云域名解析地址，添加解析：
- 記錄類型選擇
CNAME - 主機(jī)記錄填
www - 解析線路選擇
默認(rèn) - 記錄值填
yourname.github.io - TTL值為
10分鐘 - 再添加一個(gè)解析扎附，記錄類型
A - 主機(jī)記錄填
www - 解析線路選擇
默認(rèn) - 記錄值填你GitHub 的ip地址（在cmd中ping：）
ping bxm0927.github.com
點(diǎn)擊保存蔫耽，等 1 分鐘，訪問下你自己的域名留夜，一切就ok了匙铡。
域名綁定成功，域名解析成功碍粥，因此你在瀏覽中輸入 www.lovebxm.com鳖眼，或 lovebxm.com 就可以訪問到博客了，輸入 bxm0927.github.io 會重定向到 www.lovebxm.com即纲。過程：www 的方式具帮，會先解析成 http://xxxx.github.io博肋，然后根據(jù) CNAME 再變成 www
注意：CNAME文件在下次 hexo deploy的時(shí)候就消失了低斋，需要重新創(chuàng)建，這樣就很繁瑣
方法一：每次 hexo d 之后匪凡，就去 GitHub 倉庫根目錄新建 CNAME文件
方法二：在 hexo g 之后膊畴， hexo d 之前，把CNAME文件復(fù)制到 "\public" 目錄下面病游，里面寫入你要綁定的域名唇跨。
方法三（推薦）：將需要上傳至github的內(nèi)容放在source文件夾，例如CNAME衬衬、favicon.ico买猖、images等，這樣在 hexo d 之后就不會被刪除了滋尉。
方法四：通過安裝插件實(shí)現(xiàn)永久保留
$ npm install hexo-generator-cname --save
之后在_config.yml中添加一條
plugins:
- hexo-generator-cname
需要注意的是：如果是在github上建立的CNAME文件玉控，需要先clone到本地，然后安裝插件狮惜，在deploy上去即可高诺。CNAME只允許一個(gè)域名地址。
注意1：每次生成的 CNAME 都是 yoursite.com 怎么解決碾篡？
修改 _config.yml
url: http://www.lovebxm.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
Hexo 的常用操作
發(fā)表一篇文章
hexo new "文章標(biāo)題"
D:\GitHub\Hexo\test>hexo new "文章標(biāo)題"
INFO Created: D:\GitHub\Hexo\test\source\_posts\文章標(biāo)題.md
在本地博客文件夾 source\_posts 文件夾下看到我們新建的 markdown 文件虱而。
當(dāng)然，我們也可以手動添加Markdown文件在source->_deploy文件夾下开泽，其效果同樣可以媲美hexo new
文章編輯好之后牡拇，運(yùn)行生成、部署命令：
hexo clean
hexo g
hexo d
當(dāng)然你也可以執(zhí)行下面的命令，相當(dāng)于上面兩條命令的效果
hexo clean
hexo d -g
新建一個(gè)自定義頁面
hexo new page folder
文章如何添加多個(gè)標(biāo)簽
有兩種多標(biāo)簽格式
tags: [a, b, c]
或
tags:
- a
- b
- c
顯示部分文章內(nèi)容
如果在博客文章列表中诅迷，不想全文顯示佩番，可以增加 ``, 后面的內(nèi)容就不會顯示在列表。
<!--more-->
更改主題
官方主題庫：https://hexo.io/themes/
Hexo主題非常罢杉，推薦使用 Next 為主題趟畏，請閱讀 Next 的官方文檔（ http://theme-next.iissnan.com/ ），5 分鐘快速安裝滩租。
再提示一點(diǎn)赋秀，大家可以hexo主題修改一步就hexo s看下變化，初次接觸對參數(shù)不清楚律想。只有hexo s后在可以在本地瀏覽到效果猎莲，Ctrl+C 停止服務(wù)器。
添加插件
添加 sitemap 和 feed 插件
切換到你本地的 hexo 目 CIA 技即，在命令行窗口著洼，輸入以下命令
npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save
修改 _config.yml，增加以下內(nèi)容
# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
#sitemap
sitemap:
path: sitemap.xml
再執(zhí)行以下命令而叼，部署服務(wù)端
hexo d -g
配完之后身笤，就可以訪問 https://bxm0927.github.io/atom.xml 和 https://bxm0927.github.io/sitemap.xml ，發(fā)現(xiàn)這兩個(gè)文件已經(jīng)成功生成了葵陵。
添加 404 頁面
GitHub Pages 自定義404頁面非常容易液荸，直接在根目錄下創(chuàng)建自己的404.html就可以。但是自定義404頁面僅對綁定頂級域名的項(xiàng)目才起作用脱篙，GitHub默認(rèn)分配的二級域名是不起作用的娇钱，使用hexo server在本機(jī)調(diào)試也是不起作用的。
其實(shí)绊困，404頁面可以做更多有意義的事文搂，來做個(gè)404公益項(xiàng)目吧。
推薦使用騰訊公益404 http://www.qq.com/404/ ：
<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
charset="utf-8"
homePageUrl="http://www.lovebxm.com/"
homePageName="回到我的主頁">
</script>
復(fù)制上面代碼秤朗，貼粘到目錄下新建的404.html即可煤蹭！
多PC同步管理博客
很多人可能家里一臺筆記本，公司一個(gè)臺式機(jī)川梅，想兩個(gè)同時(shí)管理博客疯兼，同時(shí)達(dá)到備份的博客主題、文章贫途、配置的目的吧彪。下面就介紹一下用github來備份博客并同步博客。
- A電腦備份博客內(nèi)容到github
配置.gitignore文件丢早。進(jìn)入博客目錄文件夾下姨裸，找到此文件秧倾，用sublime text 打開，在最后增加兩行內(nèi)容/.deploy_git和/public
- 初始化倉庫傀缩。
在博客根目錄下那先，在git bash下依次執(zhí)行g(shù)it init和git remote add origin <server> <server>為遠(yuǎn)程倉庫地址。
- 同步到遠(yuǎn)程倉庫赡艰。
gitbash下依次執(zhí)行以下命令
git add . #添加目錄下所有文件
git commit -m "更新說明" #提交并添加更新說明
git push -u origin master #推送更新到遠(yuǎn)程倉庫
- B電腦拉下遠(yuǎn)程倉庫文件
在B電腦上同樣先安裝好node售淡、git、ssh慷垮、hexo揖闸，然后建好hexo文件夾，安裝好插件料身，（然后選做：將備份到遠(yuǎn)程倉庫的文件及文件夾刪除）汤纸，然后執(zhí)行以下命令：
git init
git remote add origin <server>
git fetch --all
git reset --hard origin/master
- 發(fā)布博客后同步
在B電腦發(fā)布完博客之后，記得將博客備份同步到遠(yuǎn)程倉庫
執(zhí)行以下命令：
git add .
#可以用git master 查看更改內(nèi)容
git commit -m "更新信息"
git push -u origin master #以后每次提交可以直接git push
平時(shí)同步管理
每次想寫博客時(shí)芹血，先執(zhí)行：git pull進(jìn)行同步更新贮泞。發(fā)布完文章后同樣按照上面的 發(fā)布博客后同步 同步到遠(yuǎn)程倉庫。
中文亂碼
在 md 文件中寫中文內(nèi)容幔烛，發(fā)布出來后為亂碼啃擦，原因是 md 的編碼不對，將 md 文件另存為UTF-8編碼的文件即可解決問題说贝。
結(jié)束語
建站的系統(tǒng)有很多议惰，如：
使用 Hexo + GitHub Pages 建站慎颗，有優(yōu)點(diǎn)也有缺點(diǎn)：
- GitHub Pages 不支持?jǐn)?shù)據(jù)庫管理乡恕，所以你只能做靜態(tài)頁面的博客，不能像其他博客（如 WordPress）那樣通過數(shù)據(jù)庫管理自己的博客內(nèi)容俯萎。
- 但是傲宜，GitHub Pages 無需購置服務(wù)器，免服務(wù)器費(fèi)的同時(shí)還能做負(fù)載均衡夫啊，github pages有300M免費(fèi)空間函卒。
- 個(gè)人博客真的有必要用數(shù)據(jù)庫嗎？答案是否定的撇眯。博客靜態(tài)化报嵌，評論記錄使用第三方的 網(wǎng)易云跟帖就可以了。靜態(tài)的博客更有利于搜索引擎蜘蛛爬取熊榛，輕量化的感覺真的很好锚国。
- 通過 Hexo 你可以輕松地使用 Markdown 編寫文章，非常符合我的口味玄坦。Markdown 真的是專門針對程序員開發(fā)的語言啊血筑，現(xiàn)在感覺沒有 Markdown什么都不想寫绘沉。什么富文本編輯器，什么word豺总，太麻煩了车伞！而且樣式都好丑！效率太低喻喳！
推薦幾個(gè)很好用的在線 Markdown 編輯器：
- 作業(yè)部落：https://www.zybuluo.com/mdeditor
- 馬克飛象：https://maxiang.io
推薦圖床：
- 極簡圖床 + chrome 插件 + 七帕砭粒空間，七牛云儲存提供10G的免費(fèi)空間,以及每月10G的流量表伦，存放個(gè)人博客外鏈圖片最好不過了日矫，七牛云儲存還有各種圖形處理功能、縮略圖绑榴、視頻存放速度也給力哪轿。
