Hexo+Butterfly+Github+Coding搭建個人博客
背景
之前用docsify搭建了一個簡單的博客，但是docsify主題較少(也可能本人沒有找到正確的設(shè)置方法⊙﹏⊙‖∣)，沒有自己很喜歡的主題。于是，在近期，利用空閑的時(shí)間，用Hexo重新搭建了一個博客。關(guān)于Hexo的具體介紹，可以在其官方網(wǎng)站查看具體的說明。
搭建Hexo
搭建Hexo比較簡單，按照官方文檔的步驟操作即可。這里，簡單記錄如下：
安裝前提
安裝Hexo需要先安裝:
Node.js(Node.js版本不低于8.10，建議使用Node.js 10.0及以上版本)
Git
Node.js和Git的具體安裝方法，在Hexo的文檔頁有詳細(xì)介紹，此處不再贅述。
安裝Hexo
完成以上兩個程序安裝后，即可使用npm安裝Hexo。
npm install -g hexo-cli
初始化
以Windows環(huán)境為例，打開CMD命令窗口，定位到需要存放md的文件夾路徑下，如:C:\Blog,執(zhí)行以下命令:
hexo init
命令執(zhí)行完成后，將在C:\Blog\下生成相應(yīng)的文件，目錄如下：
.
|-- _config.yml
|-- package.json
|-- scaffods
|-- source
|-- _drafts
|-- _posts
|-- themes
主要關(guān)注以下目錄及文件:
_config.yml
網(wǎng)站的配置信息，可以在此配置大部分的參數(shù)。
source--posts
存放MD文件
themes
主題文件夾
生成靜態(tài)頁面
可通過以下命令生成靜態(tài)頁面:
hexo g
會在根目錄C:\Blog\下生成public文件夾，里面包含相應(yīng)的html頁面。
啟動服務(wù)器
可通過以下命令啟動服務(wù)器:
hexo s
打開瀏覽器，輸入網(wǎng)址: http://localhost:4000 ，即可看到hexo生成的靜態(tài)頁面。
應(yīng)用Butterfly主題
默認(rèn)的主題可能并不是我們想要的效果，那么就可以通過更換主題來實(shí)現(xiàn)?？梢栽诠倬W(wǎng)的主題頁面選擇想要的主題。這里，選擇Butterfly主題來應(yīng)用。
Butterfly主頁的展示頁面：https://jerryc.me ,對應(yīng)的文檔頁面為:https://jerryc.me/posts/21cfbf15
根據(jù)文檔說明直接配置主題即可，這里簡單記錄如下：
主題安裝
可通過以下命令安裝主題:
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
主題應(yīng)用
修改站點(diǎn)配置文件_config.yml,把主題修改為Butterfly
theme: Butterfly
為便于后續(xù)平滑升級，在source目錄下創(chuàng)建_data文件夾,將Themes/Butterfly目錄下的_config.yml復(fù)制一份到source/_data目錄下,并改名為butterfly.yml
執(zhí)行以下指令,以查看應(yīng)用主題后的效果:
hexo clean #清除舊的內(nèi)容
hexo g #生成發(fā)布用的靜態(tài)頁面
如果第一次操作，可能會報(bào)以下的錯誤
關(guān)于解決方案，文檔里已經(jīng)在最上方列出:
按照提示，執(zhí)行以下命令即可：
npm install cheerio@0.22.0 --save
再次執(zhí)行生成的指令:
hexo g
重新啟動服務(wù)器:
hexo s
刷新網(wǎng)址:http://localhost:4000
可以看到，會報(bào)以下錯誤:
對應(yīng)的解決方案可以在Butterfly的Github主頁看到：
安裝以下插件即可：
npm install hexo-renderer-pug hexo-renderer-stylus
再次依次執(zhí)行：
hexo clean
hexo g
hexo s
刷新http://localhost:4000 ,可以看到更新后的主題:
其它細(xì)節(jié)設(shè)置可以參考Butterfly的文檔來配置。
部署到Github
創(chuàng)建倉庫
這里假設(shè)已經(jīng)注冊過了Github帳戶，如果沒有，可以去Github注冊。
注冊好了后，登錄Github,創(chuàng)建倉庫：點(diǎn)擊右上角的+號，選擇new repository:
在這里，建議將倉庫名設(shè)置成以下格式：
username.github.io
其中,username請對應(yīng)換成你的github用戶名。
配置Git
如果第一次使用git的話，需要設(shè)置用戶名和郵箱:
git config --global user.name "your username"
git config --global user.email "your email"
將上述的"your username"換成自己的真實(shí)用戶名,"your email"換成真實(shí)的email。
生成公鑰
執(zhí)行以下命令，然后連續(xù)三次回車,生成公鑰:
ssh-keygen -t rsa
在C盤/用戶/用戶名/.ssh目錄下找到id_rsa.pub文件,用文本編輯工具打開，并復(fù)制所有文本內(nèi)容。在Github頁面右上角，點(diǎn)擊用戶頭像-Settings-SSH and GPG keys-New SSH key
Title可以隨意填寫，Key需要填寫剛才復(fù)制的公鑰文本內(nèi)容。
添加完成后，在控制臺輸入:
ssh -T git@github.com
如果配置成功，可以看到成功的回復(fù)。
上傳文件到Github
配置_config.yml中的repo信息:
deploy:
type: git
repo: #你的倉庫地址,如:https://github.com/milovemengmeng/milovemengmeng.github.io.git
branch: master
直接通過hexo來發(fā)布到github，需要安裝以下插件：
npm install hexo-deployer-git --save
安裝成功后，執(zhí)行以下命令：
hexo d
刷新github對應(yīng)的repository頁面，即可看到提交的內(nèi)容：
配置靜態(tài)站點(diǎn)
點(diǎn)擊Settings,進(jìn)入GitHub Pages配置，由于之前新建倉庫的時(shí)候，倉庫名為username.github.io，github已經(jīng)自己為我們發(fā)布了靜態(tài)的頁面。如果不是username.github.io的格式，則需要手動配置。
打開username.github.io網(wǎng)址，可以看到之前的配置已經(jīng)生效。
請注意，文中所有的"username"請換成自己對應(yīng)的用戶名
部署到Coding
部署到Coding和部署到Github的過程大同小異，這里不再詳細(xì)說明。
創(chuàng)建倉庫
注冊Coding，登錄后新建倉庫。
配置Git
如果之前已經(jīng)部署到了Github，那么則不需要再次執(zhí)行配置Git。
生成公鑰
如果之前已經(jīng)部署到了Github，那么則不需要再次執(zhí)行生成公鑰,但需要在Coding的設(shè)置中添加SSH公鑰設(shè)置，添加完成后，同樣可以通過以下命令測試是否配置成功:
ssh -T git@git.coding.net
如果配置成功，會有成功的回復(fù)。
上傳文件到Coding
配置_config.yml中的repo信息:
deploy:
type: git
repo:
github: https://github.com/milovemengmeng/milovemengmeng.github.io.git,master
coding: https://git.dev.tencent.com/milovetingting/milovetingting.coding.me.git,master
執(zhí)行以下命令：
hexo d
在coding對應(yīng)的項(xiàng)目頁面刷新即可看到新的提交。
配置靜態(tài)站點(diǎn)
在項(xiàng)目所在頁面，點(diǎn)擊左側(cè)的Pages服務(wù)，點(diǎn)擊同意協(xié)議后，就會配置生成靜態(tài)應(yīng)用。
綁定個人域名
配置好Github和Coding的靜態(tài)頁面好，已經(jīng)可以通過網(wǎng)絡(luò)訪問到對應(yīng)的頁面了。如果需要個性化域名，則需要申請對應(yīng)的域名并綁定到Github和Coding上。
域名注冊
域名申請，有很多的服務(wù)商可以提供相應(yīng)的服務(wù)。由于本人是通過阿里云申請的域名，下面以阿里云的域名配置為例，來說明域名的綁定。
域名解析
登錄阿里云的控制臺，點(diǎn)擊左側(cè)菜單-域名，進(jìn)入域名管理頁面。
在域名列表中，找到需要解析的域名，點(diǎn)擊對應(yīng)的解析按鈕
點(diǎn)擊"添加記錄"
首先添加對Github的解析:
@解析-Github
在cmd窗口中，ping之前配置的靜態(tài)頁面地址
可以獲取到對應(yīng)的ip地址
編輯如下：
記錄類型選擇A
主機(jī)記錄輸入@
解析線路選擇境外,因?yàn)槲覀兪菧?zhǔn)備國內(nèi)訪問時(shí)訪問到Coding，國外訪問時(shí)訪問到Github
記錄值輸入剛才獲取到的ip地址,如:185.199.110.153
點(diǎn)擊確定
www解析-Github
點(diǎn)擊添加記錄按鈕，在打開的新的表單中輸入：
記錄類型選擇CNME
主機(jī)記錄輸入www
解析線路選擇境外
記錄值就輸入Github的靜態(tài)頁面地址
點(diǎn)擊確定。
@解析-Coding
在cmd窗口中，ping之前配置的靜態(tài)頁面地址
可以獲取到對應(yīng)的ip地址
編輯如下：
記錄類型選擇A
主機(jī)記錄輸入@
解析線路選擇默認(rèn)
記錄值輸入剛才獲取到的ip地址,如:150.109.19.98
點(diǎn)擊確定
www解析-Coding
點(diǎn)擊添加記錄按鈕，在打開的新的表單中輸入：
記錄類型選擇CNME
主機(jī)記錄輸入www
解析線路選擇默認(rèn)
記錄值就輸入Coding的靜態(tài)頁面地址
點(diǎn)擊確定。
配置項(xiàng)目CNAME
在項(xiàng)目根目錄-source目錄下，新建CNAME文件,內(nèi)容輸入前面申請的域名，如:www.milovetingting.cn
依次執(zhí)行
hexo clean
hexo g
hexo d
提交成功后，就可以在Github和Coding對應(yīng)的項(xiàng)目根目錄下發(fā)到提交到的CNAME文件。
由于提交了CNAME文件，Github的靜態(tài)頁面服務(wù)已經(jīng)自動綁定了新提交的域名：
由于我之前已經(jīng)綁定了 www.milovetingting.cn ,所以這里演示時(shí)會提示不能重復(fù)綁定。如果沒有綁定過重復(fù)域名，則會立即生效。
Coding的個人域名綁定，在提交CNAME后，還需要再去設(shè)置才能生效
在Pages服務(wù)，點(diǎn)擊右側(cè)的設(shè)置圖標(biāo)進(jìn)行具體的設(shè)置：
在綁定新域名中輸入申請的域名，點(diǎn)擊綁定。
結(jié)束
其實(shí)，關(guān)于Hexo搭建博客的文章，網(wǎng)上還是比較多的。寫這篇文章的主要目標(biāo)，是記錄此次搭建博客的過程，便于后續(xù)再次部署時(shí)查找資料，也希望能幫助到有需要的人。
END
