Hexo的版本控制與持續集成

想必很多人會把Hexo生成出來的靜態網站放到GitHub Pages來進行托管。一般發布Hexo博客的流程是,首先在本地搭建Hexo的環境,編寫新文章,然后利用hexo deploy來發布到Git。那么對于本地的Hexo的原始文件怎么管理呢?如果換電腦了怎么辦?如果沒有對原始文件進行備份,突然有一天你的本地環境掛了導致源文件丟失,那不就呵呵了。也許你會想到用Dropbox或者其他方案來對源文件進行備份,但是每次更新完博客,需要備份好源文件,然后執行hexo deploy進行發布,是不是很麻煩?換了電腦之后又要重新搭建本地環境,是不是很蛋疼?

那么接下來我們就來說說如何優雅愉快地對我們的Hexo進行版本管理和發布。

既然我們已經用了GitHub來托管我們生成出來的靜態網站,那么為什么不也把Hexo博客的源文件也host在GitHub上呢。那么問題來了,如果我們把Hexo博客的源文件托管在GitHub上,我們的發布流程就會變為:

  1. 執行git push把更新的源文件push到托管源文件的GitHub Repo (我們稱之為Source Repo)
  2. 執行hexo deploy來更新托管靜態網站的GitHub Pages (我們稱之為Content Repo)

這樣看來,每次更新博客要經歷兩個步驟,并不是那么straightforward。那么有沒有辦法做到既能使用GitHub進行版本控制,又能做到一鍵發布呢?

答案是肯定的。這里用到了持續集成也就是我們一直所說的CI來完成一鍵發布:當有新的change push到Source Repo時,自動執行CI腳本,生成最新的靜態網站發布到Content Repo,一氣呵成。那么我使用什么CI工具來做呢?我們可以使用像Travis CI這樣的Hosted CI Service,也可以使用Jenkins或者TeamCity來搭建CI server。如果自己來搭建CI Server,費時費力,又要花錢來買Server來host CI service,肯定不是一個很好的選擇。那么我們選哪個Hosted CI Service呢?其實今年在公司的一個項目中我們就選擇了AppVeyor。當初在做investigation的時候,第一個想到的就是用Travis CI,然而我司大多數的開發環境都是Windows,而且當時的項目有Python, PowerShell, Java等,那時PowerShell還只支持Windows,所以需要選擇一個支持Windows的CI Service。于是,Scott Hanselman安利的AppVeyor就成為了一個備選。訪問AppVeyor官網,映入眼簾的大標題就是#1 Continuous Delivery service for Windows。剛開始的時候內心一陣嘲笑,Top 10的CI Service就你支持Windows,你不是第一那誰是第一?結果在之后的項目使用中,發現AppVeyor比Travis CI好用太多。這里就不具體展開了,繼續進入正題。

使用AppVeyor來建立CI非常方便,主要是以下步驟:

  1. 注冊并登陸AppVeyor

    訪問AppVeyor登陸頁面,使用你的GitHub賬號登陸即可。

    登陸AppVeyor

  2. 添加Project

    AppVeyor Projects頁面,添加相應的GitHub Source Repo。

    添加Project

  3. 添加appveyor.yml到Source Repo

    接下來,你需要把appveyor.yml添加到Source Repo的根目錄下。具體的appveyor.yml如下,也可以參考我博客的appveyor.yml

    clone_depth: 5
    
    environment:
    access_token:
        secure: [Your GitHub Access Token]
    
    install:
    - node --version
    - npm --version
    - npm install
    - npm install hexo-cli -g
    
    build_script:
    - hexo generate
    
    artifacts:
    - path: public
    
    on_success:
    - git config --global credential.helper store
    - ps: Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:access_token):x-oauth-basic@github.com`n"
    - git config --global user.email "%GIT_USER_EMAIL%"
    - git config --global user.name "%GIT_USER_NAME%"
    - git clone --depth 5 -q --branch=%TARGET_BRANCH% %STATIC_SITE_REPO% %TEMP%\static-site
    - cd %TEMP%\static-site
    - del * /f /q
    - for /d %%p IN (*) do rmdir "%%p" /s /q
    - SETLOCAL EnableDelayedExpansion & robocopy "%APPVEYOR_BUILD_FOLDER%\public" "%TEMP%\static-site" /e & IF !ERRORLEVEL! EQU 1 (exit 0) ELSE (IF !ERRORLEVEL! EQU 3 (exit 0) ELSE (exit 1))
    - git add -A
    - if "%APPVEYOR_REPO_BRANCH%"=="master" if not defined APPVEYOR_PULL_REQUEST_NUMBER (git diff --quiet --exit-code --cached || git commit -m "Update Static Site" && git push origin %TARGET_BRANCH% && appveyor AddMessage "Static Site Updated")
    

    你唯一需要做的就是替換[Your GitHub Access Token],關于生成Access Token,可以參考這篇文章。在GitHub生成好Access Token之后,你需要到AppVeyor加密頁面把Access Token加密之后再替換[Your GitHub Access Token]

    加密Access Token

  4. 設置Appveyor

    添加好appveyor.yml之后,再到Appveyor portal設置以下四個變量。STATIC_SITE_REPO就是Content Repo的地址,TARGET_BRANCH就是你Content Repo的branch,一般默認就是master,GIT_USER_EMAIL和GIT_USER_NAME就是你GitHub賬號的信息。


    設置

好了,一切大功告成!試一下git push你的change到Source Repo,幾分鐘內,你的博客就自動更新了!

背后的過程如下:

  1. Git push to Source Repo
  2. --> AppVeyor CI
  3. --> Update GitHub Pages Content Repo
  4. --> Generate your Hexo blog site

最后肯定會有人問,為什么不用Jekyll或者WordPress啊?為什么選Hexo呢?在下一篇博客中我將詳細道來,敬請期待!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容