完成イメージ
- 今回は、プロダクトを紹介するサイト(ブログ)を公開します
- 公開されているサイトは 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 にあります
公開・運用までの流れ
- 自動化するための準備が必要です(下記に詳述しています、この点はタイトルから誤解されたらお手数です)
- 準備が整えば、それ以後は次の手順だけを手元の PC で実行すれば、サイトのコンテンツを公開したり更新していくことができます
-
content/
以下に**.md
というファイルを追加したり、すでにあれば更新したり削除したりする -
git push origin master
などで github にあげる - あとは、自動化処理が走ってくれます
前提
hugo とは
- Hugoのうりは生成速度.試しに使ったところ,明らかに速く,すぐに移行を決めた などを筆頭に評判が良さげな静的サイトジェネレーターです
- まだ使えるテンプレートは多くないですが、使う際の手順などもシンプルで使いやすいと思います
- バイナリが配布されているので、
go
をインストールするとかその他の準備が不要なのもはじめやすいです - オープンソースなので無料で使えます
wercker CI とは
- private repository でも無料で使える CI サービスです
-
box
という機能が便利で色々な連携が可能な点が売りの一つだと思います
github pages とは
-
gh-pages
というブランチを作ってそこに html ファイルなどを配置すると、そのユーザーとレポジトリ名に固有のサイトを公開(=ホスティング)してくれるサービスです - 無料です
おおまかな手順
-
hugo
をインストールします
- 静的サイトを生成できるようになります
- テンプレート(既成の見た目)を適用します
- プロダクト紹介ページっぽくなります
- github repository を用意します(説明割愛)
-
wercker CI
,gh-pages
を使う準備(使うための前提が整います)ができます
- 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 = "[email protected]"
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/[email protected]:
token: $GITHUB_TOKEN
basedir: public
その他
GA (Google Analytics) を追加する
Adsense 広告を表示する
nend 広告を表示する