個人博客:
http://www.milovetingting.cn

Hexo+Butterfly+Github+Coding搭建個人博客

Hexo_mind.png

背景

之前用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

hexo_install.png

初始化

以Windows環(huán)境為例，打開CMD命令窗口，定位到需要存放md的文件夾路徑下，如:C:\Blog,執(zhí)行以下命令:

hexo init

hexo_init.png

命令執(zhí)行完成后，將在C:\Blog\下生成相應的文件，目錄如下：

hexo_dir.png

    .

    |-- _config.yml

    |-- package.json

    |-- scaffods

    |-- source

        |-- _drafts

        |-- _posts

    |-- themes

主要關注以下目錄及文件:

    _config.yml

    網站的配置信息，可以在此配置大部分的參數(shù)。

    source--posts

    存放MD文件

    themes

    主題文件夾

生成靜態(tài)頁面

可通過以下命令生成靜態(tài)頁面:

hexo g

hexo_g.png

會在根目錄C:\Blog\下生成public文件夾，里面包含相應的html頁面。

hexo_public1.png

hexo_public2.png

啟動服務器

可通過以下命令啟動服務器:

hexo s

hexo_s.png

打開瀏覽器，輸入網址: http://localhost:4000 ，即可看到hexo生成的靜態(tài)頁面。

hexo_preview.png

應用Butterfly主題

默認的主題可能并不是我們想要的效果，那么就可以通過更換主題來實現(xiàn)?？梢栽诠倬W的主題頁面選擇想要的主題。這里，選擇Butterfly主題來應用。

Butterfly主頁的展示頁面：https://jerryc.me ,對應的文檔頁面為:https://jerryc.me/posts/21cfbf15

butterfly_doc.png

根據文檔說明直接配置主題即可，這里簡單記錄如下：

主題安裝

可通過以下命令安裝主題:

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

butterfly_install.png

主題應用

修改站點配置文件_config.yml,把主題修改為Butterfly

theme: Butterfly

為便于后續(xù)平滑升級，在source目錄下創(chuàng)建_data文件夾,將Themes/Butterfly目錄下的_config.yml復制一份到source/_data目錄下,并改名為butterfly.yml

執(zhí)行以下指令,以查看應用主題后的效果:

hexo clean #清除舊的內容

hexo_clean.png

hexo g #生成發(fā)布用的靜態(tài)頁面

如果第一次操作，可能會報以下的錯誤

hexo_g_error.png

關于解決方案，文檔里已經在最上方列出:

hexo_g_tip.png

按照提示，執(zhí)行以下命令即可：

npm install cheerio@0.22.0 --save

hexo_cheerio.png

再次執(zhí)行生成的指令:

hexo g

hexo_g2.png

重新啟動服務器:

hexo s

刷新網址:http://localhost:4000

可以看到，會報以下錯誤:

hexo_localhost_error.png

對應的解決方案可以在Butterfly的Github主頁看到：

hexo_localhost_tip.png

安裝以下插件即可：

npm install hexo-renderer-pug hexo-renderer-stylus

hexo_renderer.png

再次依次執(zhí)行：

    hexo clean

    hexo g

    hexo s

刷新http://localhost:4000 ,可以看到更新后的主題:

hexo_butterfly_review.png

hexo_butterfly_preview2.png

其它細節(jié)設置可以參考Butterfly的文檔來配置。

部署到Github

創(chuàng)建倉庫

這里假設已經注冊過了Github帳戶，如果沒有，可以去Github注冊。

注冊好了后，登錄Github,創(chuàng)建倉庫：點擊右上角的+號，選擇new repository:

github_new_repository.png

github_new_repository2.png

在這里，建議將倉庫名設置成以下格式：

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。

生成公鑰

執(zhí)行以下命令，然后連續(xù)三次回車,生成公鑰:

ssh-keygen -t rsa

github_rsa.png

在C盤/用戶/用戶名/.ssh目錄下找到id_rsa.pub文件,用文本編輯工具打開，并復制所有文本內容。在Github頁面右上角，點擊用戶頭像-Settings-SSH and GPG keys-New SSH key

github_add_key.png

github_add_key2.png

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來發(fā)布到github，需要安裝以下插件：

npm install hexo-deployer-git --save

hexo_deployer_git.png

安裝成功后，執(zhí)行以下命令：

hexo d

hexo_d.png

刷新github對應的repository頁面，即可看到提交的內容：

git_commit.png

配置靜態(tài)站點

點擊Settings,進入GitHub Pages配置，由于之前新建倉庫的時候，倉庫名為username.github.io，github已經自己為我們發(fā)布了靜態(tài)的頁面。如果不是username.github.io的格式，則需要手動配置。

git_static_setting.png

git_static_setting2.png

打開username.github.io網址，可以看到之前的配置已經生效。

請注意，文中所有的"username"請換成自己對應的用戶名

hexo_pub.png

hexo_pub2.png

部署到Coding

部署到Coding和部署到Github的過程大同小異，這里不再詳細說明。

創(chuàng)建倉庫

注冊Coding，登錄后新建倉庫。

配置Git

如果之前已經部署到了Github，那么則不需要再次執(zhí)行配置Git。

生成公鑰

如果之前已經部署到了Github，那么則不需要再次執(zhí)行生成公鑰,但需要在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

執(zhí)行以下命令：

hexo d

在coding對應的項目頁面刷新即可看到新的提交。

配置靜態(tài)站點

coding_pages.png

在項目所在頁面，點擊左側的Pages服務，點擊同意協(xié)議后，就會配置生成靜態(tài)應用。

coding_review.png

coding_review2.png

綁定個人域名

配置好Github和Coding的靜態(tài)頁面好，已經可以通過網絡訪問到對應的頁面了。如果需要個性化域名，則需要申請對應的域名并綁定到Github和Coding上。

域名注冊

域名申請，有很多的服務商可以提供相應的服務。由于本人是通過阿里云申請的域名，下面以阿里云的域名配置為例，來說明域名的綁定。

域名解析

登錄阿里云的控制臺，點擊左側菜單-域名，進入域名管理頁面。

aliyun.png

在域名列表中，找到需要解析的域名，點擊對應的解析按鈕

aliyun1.png

點擊"添加記錄"

aliyun2.png

首先添加對Github的解析:

@解析-Github

在cmd窗口中，ping之前配置的靜態(tài)頁面地址

aliyun3.png

可以獲取到對應的ip地址

編輯如下：

aliyun4.png

記錄類型選擇A

主機記錄輸入@

解析線路選擇境外,因為我們是準備國內訪問時訪問到Coding，國外訪問時訪問到Github

記錄值輸入剛才獲取到的ip地址,如:185.199.110.153

點擊確定

www解析-Github

點擊添加記錄按鈕，在打開的新的表單中輸入：

aliyun5.png

記錄類型選擇CNME

主機記錄輸入www

解析線路選擇境外

記錄值就輸入Github的靜態(tài)頁面地址

點擊確定。

@解析-Coding

在cmd窗口中，ping之前配置的靜態(tài)頁面地址

aliyun6.png

可以獲取到對應的ip地址

編輯如下：

aliyun7.png

記錄類型選擇A

主機記錄輸入@

解析線路選擇默認

記錄值輸入剛才獲取到的ip地址,如:150.109.19.98

點擊確定

www解析-Coding

點擊添加記錄按鈕，在打開的新的表單中輸入：

aliyun8.png

記錄類型選擇CNME

主機記錄輸入www

解析線路選擇默認

記錄值就輸入Coding的靜態(tài)頁面地址

點擊確定。

配置項目CNAME

在項目根目錄-source目錄下，新建CNAME文件,內容輸入前面申請的域名，如:www.milovetingting.cn

cname.png

依次執(zhí)行

hexo clean
hexo g
hexo d

提交成功后，就可以在Github和Coding對應的項目根目錄下發(fā)到提交到的CNAME文件。

由于提交了CNAME文件，Github的靜態(tài)頁面服務已經自動綁定了新提交的域名：

cname2.png

由于我之前已經綁定了 www.milovetingting.cn ,所以這里演示時會提示不能重復綁定。如果沒有綁定過重復域名，則會立即生效。

Coding的個人域名綁定，在提交CNAME后，還需要再去設置才能生效

cname3.png

在Pages服務，點擊右側的設置圖標進行具體的設置：

cname4.png

在綁定新域名中輸入申請的域名，點擊綁定。

結束

其實，關于Hexo搭建博客的文章，網上還是比較多的。寫這篇文章的主要目標，是記錄此次搭建博客的過程，便于后續(xù)再次部署時查找資料，也希望能幫助到有需要的人。

END