想必很多人會把Hexo生成出來的靜態網站放到GitHub Pages來進行托管。一般發布Hexo博客的流程是,首先在本地搭建Hexo的環境,編寫新文章,然后利用hexo deploy
來發布到Git。那么對于本地的Hexo的原始文件怎么管理呢?如果換電腦了怎么辦?如果沒有對原始文件進行備份,突然有一天你的本地環境掛了導致源文件丟失,那不就呵呵了。也許你會想到用Dropbox或者其他方案來對源文件進行備份,但是每次更新完博客,需要備份好源文件,然后執行hexo deploy
進行發布,是不是很麻煩?換了電腦之后又要重新搭建本地環境,是不是很蛋疼?
那么接下來我們就來說說如何優雅愉快地對我們的Hexo進行版本管理和發布。
既然我們已經用了GitHub來托管我們生成出來的靜態網站,那么為什么不也把Hexo博客的源文件也host在GitHub上呢。那么問題來了,如果我們把Hexo博客的源文件托管在GitHub上,我們的發布流程就會變為:
- 執行
git push
把更新的源文件push到托管源文件的GitHub Repo (我們稱之為Source Repo) - 執行
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非常方便,主要是以下步驟:
-
注冊并登陸AppVeyor
訪問AppVeyor登陸頁面,使用你的GitHub賬號登陸即可。
登陸AppVeyor -
添加Project
在AppVeyor Projects頁面,添加相應的GitHub Source Repo。
添加Project -
添加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 -
設置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,幾分鐘內,你的博客就自動更新了!
背后的過程如下:
- Git push to Source Repo
- --> AppVeyor CI
- --> Update GitHub Pages Content Repo
- --> Generate your Hexo blog site
最后肯定會有人問,為什么不用Jekyll或者WordPress啊?為什么選Hexo呢?在下一篇博客中我將詳細道來,敬請期待!