11

使用github,hugo,travis打造个人博客

 3 years ago
source link: https://zhuanlan.zhihu.com/p/59587169
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

使用github,hugo,travis打造个人博客

github给个人和组织免费提供github pages功能. 就是说如果有个repo的名字为http://cod3fn.github.io (cod3fn为你的github username), 那么这个repo里面的master或者gh-page分支的内容如果存在index.html, 那么其他人可以通过 http://cod3fn.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 覆盖原来的站点文件

最后的效果是:

如果想要简单, github的wiki和issue其实也是一个较好的博客系统, wiki比较好的是可以搜索, 整个下载. issue则可以评论等. 看需求.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK