2014-08-23 FFTT社内勉強会#202 LT 弊社フィードフォースの技術チームの社内勉強会（LT回）で発表したスライドです。

1. Middlemanで個人ページを
作っている話
Github Pages, TravisCI, Middleman で独自ドメインサイト
2014-08-23 Fri. @tmd45
社内勉強会#202 LightningTalks

2. 社内勉強会#194 Github Pages
すーさんの発表おさらい①
★ Github Pagesとは
○ Githubリポジトリの静的コンテンツ（HTMLとか）をWeb
ページとして公開できるホスティング機能
○ 決まった形式でリポジトリを作るだけ
■ User Page（Organization Page）
■ Project Page ←こっち使う話だった
○ 普通の公開リポジトリだから普通に無料
○ 独自ドメインも使えるよ

3. 社内勉強会#194 Github Pages
すーさんの発表おさらい②
★ Middlemanとは
○ 静的サイトジェネレータ（コマンドラインツール）
○ RubyGemsで配布されている
○ 拡張機能や追加のGemを使える（Gemfileで管理）
■ gem "middleman-blog" でブログも生成できる
○ Sinatra（RubyのWebフレームワーク）ベース
■ 開発に ERB とか使える
■ サーバ機能があるから開発環境でかんたん確認
○ 丁寧な日本語翻訳サイトでわかりやすい！
■ http://middlemanapp.com/jp/

4. 個人ページを運用しています

5. 個人ページでやってること
★ Github Pages の User Page を利用
○ {github-id}.github.io リポジトリの master ブランチが公開
ディレクトリ（gh-pages ブランチではない）
★ Middlemanでサイト開発
○ source ブランチで開発して、origin/source ブランチに
push
★ Travis CIでデプロイ
○ `$ middleman build`で生成した静的ファイルだけ master
に push すればいいんだけど面白くないので
○ これをやるのにちょっと面倒な工夫が必要
★ 独自ドメイン設定

6. ちょっと面倒な工夫とは
★ Travis CIにやらせること
○ origin/source ブランチへの push をトリガーにして .travis.
yml の指示通りに `middleman build` を実行する
○ build した静的ファイルを origin/master に push する
■ あとは Github がよしなにしてくれる
★ 問題点
○ Travisくんは master に push があると build してくれようと
する
■ ？！

7. ちょっと面倒な工夫とは
tmd45.github.io
source ブランチ
middleman ソース開発
source ブランチ
master ブランチ
①push
②検知してbuild実行
③masterにpush
④masterへのpush を検知して…

8. ちょっと面倒な工夫とは
https://twitter.com/hiro_asari/statuses/418587151748845569

9. ちょっと面倒な工夫とは
★ 解決法？
○ masterブランチへの自動コミット時にTravis CIにbuildさせ
ないようにする設定
■ Travis での master コミットのメッセージに "[ci skip]"
を含める
■ source, master ブランチ双方の .travis.yml に「source
ブランチだけ build して」って指定する
★ 参考にした
○ Middleman の記事更新を Travis-CI でする
■ 上記の後者を採用している
■ いま考えたら [ci skip] のほうが楽そう…
■ あとはGithubの設定でメインリポジトリ変えるとか

10. ちょっと面倒な工夫とは
★ .travice.yml (source ブランチに用意)
…
script: bundle exec middleman build
branches:
only:
- source
…
after_success:
- cd build
- echo -e "---nbranches:n only:n - source" > .travis.yml
- git add -A
- git commit -m 'Update'
- '[ $GH_TOKEN ] && git push --quiet https://$GH_TOKEN@github.
com/tmd45/tmd45.github.io.git 2> /dev/null'
↓こっちはmasterへのコミット内容

11. LTで済む話じゃなかった
／(^o^)＼ﾅﾝﾃｺｯﾀｲ
＼(^o^)／ﾄﾗﾝｻﾞﾑ!

12. ★ そもそも Github Pages のことは公式の Help に丁
寧にかかれてるのでそこ読めばいいよ
○ https://pages.github.com/
○ カスタムドメインについての説明は以下にある
■ https://help.github.com/articles/setting-up-a-custom-
domain-with-github-pages
Github Pages で独自ドメイン

13. Github Pages で独自ドメイン
★ 公開リポジトリ※に CNAME ファイルを作る
○ 内容はドメインを書けばいい（プロトコルは含めない）
■ $ echo 'tmd45.jp' > CNAME
○ commit して push → リポジトリの設定から確認
★ DNSの設定を変更する
○ サブドメインかどうかとかで違うので詳細はヘルプ参照
○ 自分の場合はGehirnのDNSサービスで `Apex Alias` と
いうのを使って tmd45.github.io に向けるというのをやっ
ている
■ このへんのキーワードでggrといいデース

14. ★ Middlemanのドキュメントの
○ 基礎→テンプレート→Markdownの項があるので読め
○ 他にも対応しているテンプレート言語と必要なRubyGems
が一覧になってるよ！
★ SyntaxHighlightとかもできる
○ なんか最新のは設定ファイル（config.rb）に `activate:
syntax` って書くだけでよさそう？
○ https://github.com/middleman/middleman-syntax
markdownとか使いたい人

15. オシャレなページにしたい？
★ gem 'bootstrap-sass'
○ twitter bootstrap を sass で使える gem
★ gem 'zurui-sass-middleman'
○ 少ない手間と知識でそれなりに見せる、ズルいデザイン
テクニックを簡単に適用できるmixinのgem
★ あとはbootstrapの事例サイトを眺めながら素人な
りに頑張ってデザインしました^q^
○ web font入れてみたり
○ 背景をパララックスさせてみたり

16. 自分のhubページつくろう
★ ブログとかツイッターとかあれとかこれとかをまと
めておく
○ そのURLさえ公開しとけば良いべ！ってページ
★ 個人的には activity をリストアップしておくのが
良かった
○ イベント参加とかの記録
○ イベントに参加するとページ更新のためにpushする
■ そういうのないと放置気味になるし（笑）
★ middlemanはフロントエンドのちょっとした勉強に
便利…かも
○ Gemで簡単に拡張できるしね

17. 以上です★
今回文字ばかりですみませんでした！
ご清聴（？）ありがとうございました！！
m(_ _)m