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