什么是Hugo
Hugo 是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。
之前博客有讲到过 Jekyll、Hexo 等静态博客生成工具，作用都是将markdown语法的文件转换为html静态文件，对比它们的优缺点，仅代表个人观点：
| 博客工具 | 语言 | 优点 | 缺点 |
|---|---|---|---|
| Jekyll | ruby | 主题多，社区完善，Github Pages原生支持 | 需要ruby环境 |
| Hexo | nodejs | 国人开发，中文主题多，部署方便 | 需要下载很多nodejs依赖库，版本更新比较激进 |
| Hugo | golang | 下载后就是一个二进制运行程序，跨平台，性能强，自带emoji✨ | 主题没有前两者多，插件少，版本更新比较激进 |
下载地址：Hugo release
注意：🚨 如果你下载的主题用到了Sass/SCSS来生成css样式文件，则需要下载extended版本的hugo，以支持该主题前端资源打包，否则会报错。
# 生成站点项目
$ hugo new site blog
项目目录结构是这样的：
blog/
.
├── archetypes
│ └── default.md
├── config.toml #项目配置文件
├── content
| └── post #放.md文件
├── data
├── public #最终生成的静态html文件
├── layouts
├── static/images/ #放md文件中引用的图片
└── themes #主题文件夹
hugo官方推荐的主题列表：Hugo Themes
选择一个喜欢的主题下载：
$ git clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/cleanwhite
修改项目根目录下config.toml，添加theme = "cleanwhite"
还有其他相关配置，每个主题不尽相同，这里就省略了。详细设置可以参考 Hugo中文文档
$ cd ..
$ hugo new post/hello.md #生成一个md文件
$ echo "# Hello World" >> content/post/hello.md
$ echo "This is a page for testing" >> content/post/hello.md
$ hugo server
打开content/post/hello.md，我们可以看到根据主题模板初始化生成的一些文本：
---
title: "An Example Post"
subtitle: ""
description: ""
date: 2018-06-04
author: ""
image: ""
tags: ["tag1", "tag2"]
categories: ["Tech" ]
---
# Hello World
This is a page for testing
注意：如果文件头里有draft（”草稿“的意思），默认是不解析这个文件的，设置成false后解析，也可以在运行hugo的时候加上 -D。
打开浏览器访问：http://localhost:1313 就可以看到第一条就是 content/post/hello.md 文件生产的页面内容了，浏览器上可以实时预览修改。
hugo命令会在当前目录下生成public文件夹，里面就是生成的html文件了。
$ hugo
使用Github Pages
之前的博客中有讲到过 Github Pages 是什么，简单来说是github提供的一个免费的服务，用于解析用户的html文件，运行在github提供的网站上。对于没机器、嫌建站麻烦的人简直是白送 😝
首先，需要在github上新建一个仓库，仓库名 必须 为username.github.io；比如我自己的是 opso-code.github.io
# 回到站点项目根目录下
$ cd blog
$ git clone https://github.com/<username>/<username>.github.io.git
$ rm -rf <username>.github.io/*
# 把之前public/文件夹里的文件复制进去
$ cp -r public/* <username>.github.io/
$ cd <username>.github.io/
$ git add --all
$ git commit -m "first commit"
$ git push
在settings->Github Pages中设置
然后访问 https://opso-code.github.io/ 就可以看到博客主页了~ 🎉 ✨
到这一步搭建Github Pages你已经学会了；为了避免每次新建了.md文件之后，都要把public/下的文件更新到github，后面将会使用工具自动生成并部署到网站上。
新建source分支
可以看到我们的静态页面文件都提交到了 master 分支里，为了方便后面自动部署，我们将blog项目文件夹加入到 source 分支下。
# 将仓库移到和blog同级目录下
$ mv <username>.github.io ../
$ cd ../<username>.github.io
$ git checkout -b source
$ rm -rf *
$ cp -r ../blog/* .
$ echo "resources/*" >> .gitignore
$ echo "public/*" >> .gitignore
$ git add --all
$ git commit -m "first source commit"
# 与远程分支产生关联
$ git push --set-upstream origin source
这样所有项目代码都上传到github上了。
Travis CI是什么
Travis CI是在软件开发领域中的一个在线的，分布式的持续集成服务，用来构建及测试在GitHub托管的代码。这个软件的代码同时也是开源的，可以在GitHub上下载到，尽管开发者当前并不推荐在闭源项目中单独使用它。——维基百科
在一些开源的github项目页面说明中，我们经常会看到 这样的标签，通常表示该项目使用了 Travis CI 持续集成服务。
结合 Travis CI(Continuous Integration)服务， 能够检测到github仓库代码的变动，再从github上拉取最新代码在虚拟服务器上运行构建命令(根据.travis.yml)， 构建成功后可以进行脚本测试、或是发布release包到github上，或是提交结果到github的特定分支，或是其他server服务器。
注意：🚨 目前Travis CI 只支持 Github。
一、编写 .travis.yml
$ git checkout source
$ vim .travis.yml
只有添加了这个文件，Travis CI才会自动构建。
dist: bionic
language: python # 默认是ruby
python: 3.7
install:
# nuo主题需要extended版本的hugo，其他主题可以用最新的普通版本就行
- wget https://github.com/gohugoio/hugo/releases/download/v0.58.3/hugo_extended_0.58.3_Linux-64bit.deb
- sudo dpkg -i hugo*.deb
script:
- hugo
# 构建完成后会自动更新Github Pages
deploy:
provider: pages
skip-cleanup: true
local-dir: public
target-branch: master
github-token: $GITHUB_TOKEN
keep-history: true
on:
branch: source
在.travis.yml配置文件中有个环境变量$GITHUB_TOKEN需要设置，接着在github申请一个 personal access token，只需要勾选 repo 权限，取名随意。
点击生成之后，复制生成的 Token（注意：关闭页面后就找不到了），留作下一步Travis CI设置用。
二、登录Travis CI官网
- 使用github帐号授权并登录 Travis CI（
delete权限可以不授权） - 勾选
opso-code.github.io仓库
- 点击后面的
settings，在Environment Variables中添加NAME填 GITHUB_TOKEN，VALUE填上一步生成的Token
三、提交source分支
$ git add .travis.yml
$ git commit -m "👷♂️ create .travis.yml"
$ git push
提交后等待一两分钟后可以看到
如果显示构建失败，可以在log日志中定位问题；其中有一次构建失败是因为hugo版本使用的最新hugo_extended_0.59.0，而我使用的hugo-nuo主题，hugo命令会有一个slice索引报错，版本降到0.58.3就好了。
可以看到commit信息都变成了Deploy...，访问博客页面就能看到更新了。
🎉 🎉 🎉 🎉
使用Coding Pages
如果嫌github国内访问有些慢，也可以将 master 分支同步一份到 Coding Pages —— 国内一家代码托管仓库网站提供的静态网站服务。
这样发布博客就多一次手动操作 😂 ，那能不能在构建的时候也发一份到Coding Pages呢？
答案是可以的！😄
需要在 .travis.yml 文件中加入以下配置：
# 构建成功后发一份到Coding Pages
# <username> <repo> 按照在coding.net新建的仓库设置
after_success:
- cd ./public
- git init
- git config user.name "coding的用户名"
- git config user.email "coding的email"
- git add .
- git commit -m "Travis CI 自动部署"
- git push --force "https://<username>:${CODING_TOKEN}@git.dev.tencent.com/<username>/<repo>.git" master:master
同样的，这里的 CODING_TOKEN 环境变量 需要在 coding.net的 个人设置 -> 访问令牌 中生成一个Token，勾选project:depot权限。
再去Travis CI后台配置环境变量CODING_TOKEN
这样git push了source分支后，Github Pages和Coding Pages都可以同时更新了~ 🚀 🚀
其他
Github Pages限制
- 仓库存储的所有文件不能超过1 GB。
- 页面的带宽限制是低于每月100 GB 或是每月100,000 次请求。
- 每小时最多只能部署10 个静态网站。
图片加载较慢
注意：教程里我用的图片都是放到/static/images文件夹中，国内访问速度很慢，可以更换CDN图库加载图片资源 💵💵
开源分享
有一点要提出的是，Github Pages 的主旨就是鼓励大家建立自己或是组织或团队的静态页面，它是免费的，无需服务器的；
分享技术，享受开源，感谢 github、coding.net 👍 👍
参考
- Github Pages 文档
- 阮一峰博客 持续集成服务 Travis CI 教程
- Traivis-CI官方文档 GitHub Pages Deployment