Hexo 搭建個人博客 #02 使用 GitHub 托管

新建倉庫#

新建倉庫

新建一個名為 y0ngb1n.github.io 的倉庫，格式為：<username>.github.io。

GitHub 為我們提供了一個二級域名 <username>.github.io，如果我們為自己的某個項目開啟了 GitHub Pages 功能後，我們可以使用 http(s)://<username>.github.io/<projectname> 進行訪問，這樣我們可以為每個項目添加上項目展示的 Pages；當我們「新建一個名為 <username>.github.io — 自己對應的二級域名 — 的倉庫」時，GitHub 會將該倉庫路由為我們的個人首頁，可使用 http(s)://<username>.github.io 進行訪問。

提交源碼#

按照倉庫頁面上的提示進行操作即可：

# 初始化 git 倉庫
git init

# 進行版本控制
git add .

# 提交
git commit -m ":tada: init hexo"

# 添加遠程倉庫（GitHub）地址
git remote add origin https://github.com/y0ngb1n/y0ngb1n.github.io.git

# 推送代碼
git push -u origin master

過程會提示輸入帳號密碼，推送成功後，刷新倉庫頁面後即可看到我們提交的源碼了。

倉庫首頁

開啟 GitHub Pages 功能#

先使用 Hexo 進行編譯：

# 清除快取，可選
hexo clean

# 編譯
hexo g

然後使用 hexo-deployer-git 插件進行部署：

# 安裝插件
npm install hexo-deployer-git

修改 _config.yml：

deploy:
  type: git
  repo: [email protected]:y0ngb1n/y0ngb1n.github.io.git
  branch: gh-pages

這裡使用 SSH 協議，因為只能走 Git 協議，走 HTTPS 協議會報錯；關於 SSH 的請參考「Connecting to GitHub with SSH」、「SSH 原理與運用（一）：遠程登錄」。

然後進行部署：

hexo d

部署成功後，會自動在遠程倉庫創建 gh-pages 分支。

404 部署出問題了#

原本是想部署 gh-pages 分支的，結果只能部署 master 分支，由於我們的 master 分支上沒有 index.html 文件，所以訪問首頁時出現了 404；

經驗證：是由於我們的倉庫使用了二級域名的方式，GitHub Pages 只能部署 master 分支，且不能選擇，如果把名字改為別的（如 blog），此時就能選擇部署哪個分支了。

我想到的有兩個解決方案：

調整分支策略：
- master：編譯後的靜態資源
- source：博客源碼
修改倉庫名（如 blog）：
- 優點：可調整 github-pages 部署策略
- 缺點：不能直接使用二級域名訪問了，需要加上 /blog 後綴進行訪問（可以自定義域名解決）

這裡我選擇方案 1（調整分支策略）：

# 查看所有分支
$ git branch -a
  ls
* master
  remotes/origin/master

# *先在倉庫設置中將 gh-pages 設置為默認分支（否則無法刪除 master 分支）

# 重命名本地 master 分支為 source
$ git branch -m master source

# 刪除遠程 master 分支
$ git push --delete origin master
To github.com:y0ngb1n/y0ngb1n.github.io.git
 - [deleted]         master

# 上傳新的 source 分支
$ git push origin source
To github.com:y0ngb1n/y0ngb1n.github.io.git
 * [new branch]      source -> source

然後修改 _config.yml，將編譯後的靜態部署至 master 分支：

deploy:
  type: git
  repo: [email protected]:y0ngb1n/y0ngb1n.github.io.git
  branch: master

修改完成後，執行 hexo d 進行編譯部署，直到遠程倉庫出現新的 master 分支，命令如下：

$ hexo d
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
On branch master
nothing to commit, working tree clean
remote:
remote: Create a pull request for 'master' on GitHub by visiting:
remote:      https://github.com/y0ngb1n/y0ngb1n.github.io/pull/new/master
remote:
Branch 'master' set up to track remote branch 'master' from '[email protected]:y0ngb1n/y0ngb1n.github.io.git'.
To github.com:y0ngb1n/y0ngb1n.github.io.git
 * [new branch]      HEAD -> master
INFO  Deploy done: git

此時 github-pages 監測到 master 分支有更新，會更新部署，此時訪問 https://y0ngb1n.github.io/ 終於看到了期待已久的 Hexo 博客頁面。

y0ngb1n.github.io

因為我們調整了分支策略，所以此時 source 分支才是我們的主分支了，在設置中把 source 設置為默認分支，然後再把 gh-pages 分支從遠程倉庫中刪除掉。

# 刪除遠程 gh-pages 分支
$ git push --delete origin gh-pages
To github.com:y0ngb1n/y0ngb1n.github.io.git
 - [deleted]         gh-pages

至此就大功告成啦！

只有 GitHub 可能免費托管嗎？

當然不止啦，其它平台也有提供這樣的 Pages 功能，如：

Aben Blog