原文連結:blog.sjfkai.com/2017/11/04/…
轉載請註明出處
如果你曾瞭解過Hexo, 相信你已經可以通過hexo deploy
部署自己的部落格到github pages
了。
但是,這樣我們僅僅可以通過當前電腦來發布部落格,如果電腦不在身邊,或者不小心把檔案刪除了,就會很麻煩。
本文教你如何實現把自己寫的部落格和生成的靜態檔案同時託管在github
:
將部落格原始碼託管到github
細心的人可以發現,通過hexo init
生成的檔案中,已經包含了.gitignore
檔案。說明hexo
開發者也是希望大家把部落格原始碼託管到git
上的。
我們可以通過分支來實現,將原始碼放在master
(看個人喜好)分支、將hexo deploy
的分支指定為gh-pages
分支。具體實現如下:
-
如果沒有
github repository
首先需要在github
新建一個倉庫,點選new repository
。 -
hexo init
生成一個新的部落格專案 -
根據hexo 文件修改配置,使部落格可以通過
git server
預覽。 -
git init
-
git remote add origin git@github.com:account/blog_repo.git
請將git
地址改為1
中說到的你自己的倉庫地址 -
git add .
-
git commit -m "init"
-
git push origin master -f
將程式碼推到github
master
分支
這時候,我們就把專案託管到了github
,當你換了一臺電腦,或者不小心把檔案刪除了的時候,只要重新git clone
就可以了。
但是這僅僅只是將程式碼託管到了github
。當我們新完成一篇部落格,並把程式碼push
到github
上的時候,並不會自動deploy
。
通過travis自動部署
Travis CI是在軟體開發領域中的一個線上的,分散式的持續整合服務,用來構建及測試在GitHub託管的程式碼。
-
使用
github
授權登入 Travis CI -
在
Travis CI
中開啟部落格專案倉庫的開關。並在配置中開啟Build only if .travis.yml is present
選項 -
在
github
中建立access token
,詳細教程:Creating a personal access token for the command line -
在
travis
部落格倉庫的配置中將剛剛生成的token
新增到Environment Variables
中,name為REPO_TOKEN
- 在專案根目錄新增
.travis.yml
檔案。配置如下
language: node_js
node_js: stable
branches:
only:
- master
cache:
directories:
- node_modules
before_install:
- git config --global user.name "sjfkai"
- git config --global user.email "sjfkai@163.com"
- npm install -g hexo-cli
- export HEXO_DEPLOYER_REPO=https://$REPO_TOKEN@github.com/sjfkai/blog.git
install:
- npm i
script:
- hexo clean
- hexo generate
- hexo deploy
複製程式碼
- 修改hexo的配置檔案
_config.yml
的deploy
:
# 注意,這裡註釋掉了repo, 因為我們需要在ci中通過環境變數 HEXO_DEPLOYER_REPO 配置
deploy:
type: git
# repo:
branch: gh-pages
複製程式碼
-
git add .
-
git commit -m "add travis ci"
-
git push origin master
這時候你會發現travis ci
顯示該專案處於running
狀態。 等最後變為 passed
狀態後。github pages
就已經自動部署成功了。
博主原始碼
歡迎關注公眾號 “大前端開發者”。給你帶來更多的前端技術與資訊