Middlemanで個人ページを作っている話

2014-08-23 FFTT社内勉強会#202 LT

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

Middleman, Github Pages, TravisCi あたりの話。なお現在は TravisCI→CircleCI に乗り換えました。

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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へのコミット内容
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide