使用github,hugo,travis打造個人部落格

GitHub Hugo · 發表 2019-03-18 15:50:02

摘要： github給個人和組織免費提供github pages功能. 就是說如果有個repo的名字為 http:// xiongdahu.github.io (xiongdahu為你的github username), 那麼這個r...

github給個人和組織免費提供github pages功能. 就是說如果有個repo的名字為 http:// xiongdahu.github.io (xiongdahu為你的github username), 那麼這個repo裡面的master或者gh-page分支的內容如果存在index.html, 那麼其他人可以通過 http:// xiongdahu.github.io 訪問這個站點.

藉助於一些static gen工具,你可以將你的markdown轉換為一個靜態網站(html,js,css). 然後把靜態網站的內容上傳到剛說的repo中, 就有一個自己的部落格站點了.static gen 工具非常多, github推薦的是Jekyll(ruby), 主流的還有hexo(js)和hugo(go), hexo因為是基於js的,所以高質量的主題多(因為做主題是需要js,css技能的), hugo的編譯快些, 但是好看的主題不多. 高質量的主題除了美觀可能還需要考慮移動端(responsive),評論, 訪問統計等各種功能. 每個gen工具都有自己的主題站點. hugo的主題在這裡找:hugo themes .

製作github pages站點的一般做法是把程式碼(放圖片和markdown)放在master分支,static gen編譯後的(html,js)內容放在gh-pages分支.然後在settings裡面設定. 這樣就可以得到一個站點了. 這麼做有個缺點,就是markdown檔案會被別人整個下載過去,之前就遇到過. 正好github現在有3個免費私有倉庫. 所以我把原始碼放在私有倉庫xiongdahu.github.io.src裡面,而編譯後的內容釋出的 http:// xiongdahu.github.io 上面去.

自動編譯釋出這個過程就是持續整合(continue integration,CI)了, 即我提交一個markdown檔案,我的主頁會自動看到這篇文章, 不需要我在本地編譯再提交編譯結果檔案.那樣的話寫點東西就太麻煩了. http:// travis-ci.com 提供了免費的github CI服務. 使用github賬號登入 http:// travis-ci.com 就會有提示操作. 這裡勾選私有倉庫xiongdahu.github.io.src, 然後在專案裡面新增.travis.yml檔案告訴travis如何編譯和釋出內容到個人站點.

本文主要展示一下這種跨專案的push .travis.yml如何寫. 其實就是強制推送覆蓋.

# https://docs.travis-ci.com/user/deployment/pages/
# https://docs.travis-ci.com/user/reference/xenial/
# https://docs.travis-ci.com/user/languages/python/
# https://docs.travis-ci.com/user/customizing-the-build/

dist: xenial
language: python
python: 3.7
# 使用python下載已釋出的hugo安裝更快

before_install:
- sudo apt-get update -qq
- sudo apt-get -yq install apt-transport-https

# install - install any dependencies required
install:
# install latest hugo release version
- wget -qO- https://api.github.com/repos/gohugoio/hugo/releases/latest | sed -r -n '/browser_download_url/{/Linux-64bit.deb/{s@[^:]*:[[:space:]]*"([^"]*)".*@\1@g;p;q}}' | xargs wget
- sudo dpkg -i hugo*.deb
- rm -rf public 2> /dev/null

#在travis-ci.com上配置3個環境變數,其中GITHUB_TOKEN是在github.com的 Settings >Developer settings>Personal access tokens裡面生成.
before_script:
- echo -e "Host github.com\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config
- git config --global user.email ${GITHUB_EMAIL}
- git config --global user.name ${GITHUB_USERNAME}

script:
- hugo -d ./dist/

after_success:
- MESSAGE=$(git log --format=%B -n 1 $TRAVIS_COMMIT)
- cd dist
- git init
- git remote add origin https://${GITHUB_USERNAME}:${GITHUB_TOKEN}@github.com/xiongdahu/xiongdahu.github.io.git
- git add .
- git commit -m ${MESSAGE}
- git push origin master -f

# 使用 -f 覆蓋原來的站點檔案

最後的效果是:

新街 xiongdahu.github.io

如果想要簡單, github的wiki和issue其實也是一個較好的部落格系統, wiki比較好的是可以搜尋, 整個下載. issue則可以評論等. 看需求.

使用github,hugo,travis打造個人部落格

您可能也會喜歡…