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

完成イメージ

• 今回は、プロダクトを紹介するサイト（ブログ）を公開します
• 公開されているサイトは http://yoheimuta.github.io/hugo-uno-mobile-videoplayer.js/ という URL で github pages 上にホスティングされています
• この中で紹介されているプロダクトは 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のうりは生成速度．試しに使ったところ，明らかに速く，すぐに移行を決めた などを筆頭に評判が良さげな静的サイトジェネレーターです
• まだ使えるテンプレートは多くないですが、使う際の手順などもシンプルで使いやすいと思います
• バイナリが配布されているので、go をインストールするとかその他の準備が不要なのもはじめやすいです
• オープンソースなので無料で使えます

wercker CI とは

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

github pages とは

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

おおまかな手順

1. hugo をインストールします

• 静的サイトを生成できるようになります

1. テンプレート（既成の見た目）を適用します

• プロダクト紹介ページっぽくなります

1. github repository を用意します（説明割愛）

• wercker CI, gh-pages を使う準備（使うための前提が整います）ができます

1. wercker CI を使って gh-pages を自動生成するようにします

• プロダクト紹介ページが [yourusername].github.io/[yourprojectname] に公開されます
• [] 中はプレースホルダーなので置き換えてください

hugo をインストールする

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

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

• 今回は hugo-uno を使います
• 選定方法は $ git clone --recursive https://github.com/spf13/hugoThemes.git themes で全部ダウンロードして、愚直にひとつずつ見て決めました
• 今後は、サイトで一覧出来るように準備が進んでいるそうです
• コマンドなど
• 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 が参考になると思います

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 = "[e-mail]"
    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 を自動生成する

• こちらの通りにやる感じです
• 注意点としては、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 のそれぞれのタブを見ると参考になるかもしれません

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) を追加する

Adsense 広告を表示する

nend 広告を表示する