y0ngb1n

Aben Blog

欢迎来到我的技术小黑屋ヾ(◍°∇°◍)ノ゙
github

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 分支。

image

404 部署出問題了#

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

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

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

  1. 調整分支策略:
    • master:編譯後的靜態資源
    • source:博客源碼
  2. 修改倉庫名(如 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 功能,如:

參考資料#

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。