Hugo で生成したサイトを GitHub Pages に自動デプロイする

静的サイトジェネレータの [Hugo](https://gohugo.io/) で作ったサイトを [Travis CI](https://travis-ci.org/) で GitHub Pages に自動デプロイする仕組みを作ったので紹介します。

# GitHub でリポジトリを作る

GitHub Pages は GitHub 上のリポジトリ内のファイルを公開するサービスです。

GitHub Pages を使うにはリポジトリが必要なので作ります。
今回紹介するサイトのリポジトリは https://github.com/kstm-su/blog です。

## master branch の設定

`master` branch に Hugo を導入します。
基本的には [quick start](https://gohugo.io/getting-started/quick-start/) のままです。

### Hugo のインストール

https://gohugo.io/getting-started/installing

mac OS を使っているので `brew install hugo` でインストールしました。

### サイトの初期化

`hugo new site [repo name]` を実行してサイトを作ります。

### テーマの追加

https://gohugo.io/getting-started/quick-start/#step-3-add-a-theme
>See themes.gohugo.io for a list of themes to consider. This quickstart uses the beautiful Ananke theme.

> ```
> cd quickstart;\
> git init;\
> git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\
> 
> # Edit your config.toml configuration file
> # and add the Ananke theme.
> echo 'theme = "ananke"' >> config.toml
> ```

### Travis CI の設定

`master` に push されたら Travis CI で `gh-pages` に自動で commit するように設定ファイルを書きます。

```yaml:.travis.yml
language: bash

env:
  global:
    - GIT_AUTHOR_EMAIL=bot@kstm.shinshu-u.ac.jp
    - GIT_AUTHOR_NAME=bot
    - HUGO_VERSION=0.30.2
    - secure: "Pw475F/bEiP8yIyZAPTwu6tHXMHTtC5u52pm5eZWYXiYQPuWdTvTe1X14tGimWtbTUX95joVduEpZmAVnKa53U6u3Fv9kiEP0RWCxGXCbxJ98a69MfNb58b+s2qftfwxwXrlOPE1o9Uz9qjkmwwHGoObuMeH776reAxuBsMGppjMq2Bje78fqlKUtmnlRT3EzpNCQbCv954RBTLWwZUZ9/JHjuv7/57Q0PwbHuGoMEN6nXloxHVObFQ33odAma2U7WRTN4CtV8rsA/zs6llbCGK/4kfZb5xaYnHcWXExRLZAuhQifXB5mHeBtNgt7nFzXaGEJ5P9vakSeU2X6A+2T6WWn33oqkMf4yK0MMdYda/ABhyz0pEKUzXcF1UZQUdxaSNaIz9uU6w1ZrmZeHefKeLkhxBAwenYsSNTMkHHFtKyhtYoK6M7BpmZZkNgNrN3oDIUEhVbe5qW23wWHcaUQIXCDs0hBwLiY9EiwyBG0lClfEBObRcLB4cdUYw/fwRMvxerLmg3tv3AIiSJBTSV1IyUaj3amkysTNRiX4hSQ8GKNLV/uFoawJfgTcEImgoi4+y52/DBNz0fhSJeNx0x4l11pgVlkb6TuhkR3Lk2Ol06raNCSNWG9sZLiJ9MfkZ+klAz2qFArCSpa4F2JJAIVQDZ6+QxMwpLkq/s3AuuS/Y="
    - GIT_URL=https://${GIT_TOKEN}@github.com/kstm-su/blog.git

install:
  - wget https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz
  - tar xzf hugo_${HUGO_VERSION}_Linux-64bit.tar.gz

before_deploy:
  - git remote set-url origin ${GIT_URL}
  - git fetch origin gh-pages:remotes/origin/gh-pages
  - git worktree add -B gh-pages public origin/gh-pages
  - ./hugo

deploy:
  skip_cleanup: true
  provider: script
  script: scripts/deploy.sh
  on:
    branch: master
```

環境変数の `secure` の部分は GitHub のログイントークンを暗号化したものです。
ログイントークンは https://github.com/settings/tokens で生成します。
暗号化は [travis encrypt](https://docs.travis-ci.com/user/encryption-keys/) を使います。

### GitHub に push する

`master` の準備が終わったら `git push` します。

## GitHub Pages の設定

GitHub Pages を使う方法はいくつかあるのですが、今回は `gh-pages` というbranchを公開します。

Github Pages の設定は `Settings` で見れます。
`gh-pages` branchを作るとデフォルトで設定されているはずですが、念のため確認しておきます。

<img width="921" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/69029/44b5e5ba-234b-b3d5-32f0-d0a65ee2c514.png">

# ページの追加

`content/posts` に Markdown ファイルを追加します。

```
hugo new posts/my-first-post.md
vi content/posts/my-first-post.md
```

`draft: true` があると下書きとして扱われるのでこの行は消しておきます。

ページを作成したら `git push` します。

しばらくすると CI が走って GitHub Pages に反映されます。

# まとめ

所属しているサークルのブログで使っていますが、
`git push` で記事を公開するので技術サークルらしくなったなーと気に入っています。