Hugo + Github Pages + Wercker CI = ¥0（無料）でコマンド 1 発（自動化）でサイト・ブログを公開・運営・分析・収益化

# 完成イメージ

- 今回は、プロダクトを紹介するサイト（ブログ）を公開します
 - 公開されているサイトは http://yoheimuta.github.io/hugo-uno-mobile-videoplayer.js/ という URL で `github pages` 上にホスティングされています
 - この中で紹介されているプロダクトは [mobile-videoplayer.js](https://github.com/yoheimuta/mobile-videoplayer.js) という iOS Safari 上で動画を自動再生するための `JavaScript` ライブラリ です
- コード管理は `github` で、https://github.com/yoheimuta/hugo-uno-mobile-videoplayer.js にあります

### 公開・運用までの流れ

1. 自動化するための準備が必要です（下記に詳述しています、この点はタイトルから誤解されたらお手数です）
2. 準備が整えば、それ以後は次の手順だけを手元の PC で実行すれば、サイトのコンテンツを公開したり更新していくことができます
 - `content/` 以下に `**.md` というファイルを追加したり、すでにあれば更新したり削除したりする
 - `git push origin master` などで github にあげる
 - あとは、自動化処理が走ってくれます

# 前提

### hugo とは

- [Hugoのうりは生成速度．試しに使ったところ，明らかに速く，すぐに移行を決めた](http://deeeet.com/writing/2014/12/25/hugo/) などを筆頭に評判が良さげな静的サイトジェネレーターです
- まだ使えるテンプレートは多くないですが、使う際の手順などもシンプルで使いやすいと思います
- バイナリが配布されているので、`go` をインストールするとかその他の準備が不要なのもはじめやすいです
- オープンソースなので無料で使えます

### wercker CI とは

- private repository でも無料で使える CI サービスです
- `box` という機能が便利で色々な連携が可能な点が売りの一つだと思います

### github pages とは

- `gh-pages` というブランチを作ってそこに html ファイルなどを配置すると、そのユーザーとレポジトリ名に固有のサイトを公開（=ホスティング）してくれるサービスです
- 無料です

# おおまかな手順

1. `hugo` をインストールします
 - 静的サイトを生成できるようになります
2. テンプレート（既成の見た目）を適用します
 - プロダクト紹介ページっぽくなります
3. github repository を用意します（説明割愛）
 - `wercker CI`, `gh-pages` を使う準備（使うための前提が整います）ができます
4. wercker CI を使って `gh-pages` を自動生成するようにします
 - プロダクト紹介ページが [yourusername].github.io/[yourprojectname] に公開されます
 - `[]` 中はプレースホルダーなので置き換えてください

### `hugo` を[インストールする](http://gohugo.io/overview/quickstart) 

- github releases から dl したバイナリを `mv /usr/local/bin/hugo` する
 - これは mac の場合です
- `hugo new site ./` で、スキャフォールドする
- `hugo new post/intro.md` で、新規ページを作成する

### テンプレート（既成の見た目）を適用する

- 今回は [hugo-uno](https://github.com/SenjinDarashiva/hugo-uno) を使います
 - 選定方法は `$ git clone --recursive https://github.com/spf13/hugoThemes.git themes` で[全部ダウンロードして](http://gohugo.io/themes/installing/)、愚直にひとつずつ見て決めました
 - 今後は、サイトで一覧出来るように準備が進んでいるそうです
- コマンドなど 
 - `mkdir themes`でテーマを配置するディレクトリを作成する
 - `git clone https://github.com/SenjinDarashiva/hugo-uno.git themes` でテーマをダウンロードする
 - `hugo server --theme=hugo-uno --buildDrafts` で任意のテーマを元に静的サイトを生成する
- 設定ファイル
 - https://github.com/yoheimuta/hugo-uno-mobile-videoplayer.js/blob/master/config.toml が参考になると思います

```toml
languageCode = "en-us"
contentdir = "content"
publishdir = "public"
builddrafts = false
baseurl = "http://yoheimuta.github.io/hugo-uno-mobile-videoplayer.js"
canonifyurls = true
title = "mobile-videoplayer.js"
author = "yoheimuta"

[indexes]
    category = "categories"
    tag = "tags"
[Params]
    AuthorName = "yoheimuta"
    github = "yoheimuta/mobile-videoplayer.js"
    bitbucket = "yoheimuta"
    twitter = "yoheimuta"
    email = "yoheimuta@gmail.com"
    description = "Web video player for mobile browser, especially for ios safari which is disabled to autoplay mp4"
    muut = "mobilevideoplayerjs"
    logo = "https://golang.org/doc/gopher/run.png"
    gaid = "UA-58932361-1"
```

### wercker CI を使って `gh-pages` を自動生成する

- [こちら](http://gohugo.io/tutorials/automated-deployments/)の通りにやる感じです
 - 注意点としては、git push 前に `rm -rf hugo-uno/.git` を忘れないことです（wercker build が失敗するため）
 - wercker.yml は https://github.com/yoheimuta/hugo-uno-mobile-videoplayer.js/blob/master/wercker.yml が参考になると思います
 - `$GITHUB_TOKEN` は wercker CI に登録した環境変数です、秘匿性があるのでこういった形をとっています
 - wercker の設定は https://app.wercker.com/#applications/54c4f4de80c7075225001a20/tab/builds のそれぞれのタブを見ると参考になるかもしれません

```yaml
box: wercker/default
build:
  steps:
    - arjen/hugo-build:
        version: 0.12
        theme: hugo-uno
        flags: --buildDrafts=true
deploy:
  steps:
    - lukevivier/gh-pages@0.2.1:
        token: $GITHUB_TOKEN
        basedir: public
```

# その他

### GA (Google Analytics) を追加する

https://github.com/yoheimuta/hugo-uno-mobile-videoplayer.js/commit/319c9b4b665a6f164adcd4f7214706943c4d7504

### Adsense 広告を表示する

https://github.com/yoheimuta/hugo-uno-mobile-videoplayer.js/commit/605c091da1dab6ad456b839c22213867e0218df3

### nend 広告を表示する

https://github.com/yoheimuta/hugo-uno-mobile-videoplayer.js/commit/e9a76d5b4481b5c4969fc60d878942d1a78db1bb