通過travis自動部署hexo部落格到github pages

sjfkai發表於2019-03-13

原文連結:blog.sjfkai.com/2017/11/04/…

轉載請註明出處

如果你曾瞭解過Hexo, 相信你已經可以通過hexo deploy部署自己的部落格到github pages了。

但是,這樣我們僅僅可以通過當前電腦來發布部落格,如果電腦不在身邊,或者不小心把檔案刪除了,就會很麻煩。

本文教你如何實現把自己寫的部落格和生成的靜態檔案同時託管在github

將部落格原始碼託管到github

細心的人可以發現,通過hexo init生成的檔案中,已經包含了.gitignore檔案。說明hexo開發者也是希望大家把部落格原始碼託管到git上的。

我們可以通過分支來實現,將原始碼放在master(看個人喜好)分支、將hexo deploy的分支指定為gh-pages分支。具體實現如下:

  1. 如果沒有github repository首先需要在github新建一個倉庫,點選new repository

  2. hexo init 生成一個新的部落格專案

  3. 根據hexo 文件修改配置,使部落格可以通過git server預覽。

  4. git init

  5. git remote add origin git@github.com:account/blog_repo.git 請將git地址改為1中說到的你自己的倉庫地址

  6. git add .

  7. git commit -m "init"

  8. git push origin master -f 將程式碼推到github master 分支

這時候,我們就把專案託管到了github,當你換了一臺電腦,或者不小心把檔案刪除了的時候,只要重新git clone就可以了。

但是這僅僅只是將程式碼託管到了github。當我們新完成一篇部落格,並把程式碼pushgithub上的時候,並不會自動deploy

通過travis自動部署

Travis CI是在軟體開發領域中的一個線上的,分散式的持續整合服務,用來構建及測試在GitHub託管的程式碼。

  1. 使用 github 授權登入 Travis CI

  2. Travis CI 中開啟部落格專案倉庫的開關。並在配置中開啟Build only if .travis.yml is present選項

  3. github 中建立access token,詳細教程:Creating a personal access token for the command line

  4. travis部落格倉庫的配置中將剛剛生成的token新增到Environment Variables中,name為REPO_TOKEN

通過travis自動部署hexo部落格到github pages

  1. 在專案根目錄新增.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
複製程式碼
  1. 修改hexo的配置檔案_config.ymldeploy:
# 注意,這裡註釋掉了repo, 因為我們需要在ci中通過環境變數 HEXO_DEPLOYER_REPO 配置
deploy:
  type: git
  # repo:
  branch: gh-pages
複製程式碼
  1. git add .

  2. git commit -m "add travis ci"

  3. git push origin master

這時候你會發現travis ci顯示該專案處於running狀態。 等最後變為 passed 狀態後。github pages就已經自動部署成功了。

博主原始碼

github.com/sjfkai/blog


歡迎關注公眾號 “大前端開發者”。給你帶來更多的前端技術與資訊

通過travis自動部署hexo部落格到github pages

相關文章