圖片.png

前言

Github Pages 不能運(yùn)行動(dòng)態(tài)程序，只能輸出一些靜態(tài)內(nèi)容。因此 Github Pages 非常適合用于前端項(xiàng)目的展示。可用于存放項(xiàng)目介紹、項(xiàng)目文檔或者個(gè)人博客。本文介紹了怎么用 Travis CI 自動(dòng)化部署 Github Pages。

CI

持續(xù)集成（Continuous integration）是一種軟件開發(fā)實(shí)踐，即團(tuán)隊(duì)開發(fā)成員經(jīng)常集成他們的工作，通常每個(gè)成員每天至少集成一次，也就意味著每天可能會(huì)發(fā)生多次集成。每次集成都通過自動(dòng)化的構(gòu)建（包括編譯，發(fā)布，自動(dòng)化測試）來驗(yàn)證，從而盡早地發(fā)現(xiàn)集成錯(cuò)誤。目前 github 開源項(xiàng)目用的較多的 CI 主要是 Circle CI 和 Travis CI，兩者都是利用容器技術(shù)來適配不同項(xiàng)目環(huán)境。

GitHub Pages

hexo雖然可以方便地部署github靜態(tài)博客，但是僅僅是把最終生成的html保存在repository中，像原始的Markdown文件，hexo配置文件，主題配置文件，修改文件都僅僅是保存在本地。這樣不利于保存，也無法查看每篇博客的修改歷史。
在github上搭blog最大的問題就是，每次提交都需要先hexo g，然后再hexo d生成文件，這樣哪怕是改一個(gè)小的地方都需要重新編譯全部blog。

Travis CI & GitHub Pages

以我的博客為例
coder-lida.github.io:博客靜態(tài)文件倉庫
blog-source:文檔源碼倉庫
文檔源碼放置在blog-source倉庫，最終部署文件在 coder-lida.github.io倉庫。當(dāng)在 blog-source倉庫更改某些內(nèi)容之后，通過運(yùn)行 hexo g來生成最終部署的 HTML 文件到 public 目錄，隨后再進(jìn)入 public 目錄初始化 git 倉庫、添加文件、提交文件，最后將提交強(qiáng)制推送到遠(yuǎn)程coder-lida.github.io倉庫。

圖片.png

Start Travis CI

.travis.yml

Hexo官網(wǎng)配置,官方配置是在同一個(gè)倉庫的不同分支來實(shí)現(xiàn)的。我沒用這種方式，而是創(chuàng)建了2個(gè)倉庫，一個(gè)放部署的網(wǎng)頁，另一個(gè)放blog的源文件，包括post和themes。

注冊并設(shè)置Travis CI

Travis CI官網(wǎng)
點(diǎn)擊右上角使用Github登錄的按鈕

圖片.png

圖片.png

圖片.png

關(guān)于GH_TOKEN

登錄到GitHub，點(diǎn)擊右上角頭像框，選擇Settings

圖片.png

選擇Developer settings

圖片.png

圖片.png

填寫token description，比如叫hexo deploy.
勾選上授予的權(quán)限，比如我勾選的是repo和gist，然后create.
將產(chǎn)生的token串復(fù)制保留下來，后面會(huì)使用到,如果丟失，只能重新產(chǎn)生。

圖片.png

將生成的token設(shè)置到Travis CI作為環(huán)境變量。

圖片.png

到此Travis CI設(shè)置完成。

添加 .travis.yml

先貼出我的配置

language: node_js #設(shè)置語言
node_js: stable # nodejs版本
branches:
  only:
    - master #只監(jiān)測master分支
cache:
    apt: true
    directories:
        - node_modules # 緩存不經(jīng)常更改的內(nèi)容
before_install:
  - git config --global user.name "your name"  # github用戶名
  - git config --global user.email "your email"  # 郵箱
  - npm install -g hexo-cli
install:
  - npm i
before_script:
# 無其他依賴項(xiàng)所以執(zhí)行npm run build 構(gòu)建就行了
script:
  - hexo clean  #清除
  - hexo generate #生成
after_script:
  - git clone https://${GH_REF} .deploy_git  # GH_REF是最下面配置的倉庫地址
  - cd .deploy_git
  - git checkout master
  - cd ../
  - mv .deploy_git/.git/ ./public/   # 這一步之前的操作是為了保留master分支的提交記錄，不然每次git init的話只有1條commit
  - cd ./public
  - git init
  - git add .
  - git commit -m "Travis CI Auto Builder at `date +"%Y-%m-%d %H:%M"`" # 提交記錄包含時(shí)間 
  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master #GH_TOKEN是在Travis中配置環(huán)境變量的名稱
env:
 global:
   - GH_REF: github.com/coder-lida/coder-lida.github.io.git #設(shè)置GH_REF,換成自己用戶名和倉庫名

哪些文件需要提交到源文件的倉庫

圖片.png

package-lock.json文件在.gitignore文件中加上

圖片.png

在經(jīng)歷的11次失敗之后，第12次終于成功了。

圖片.png

圖片.png