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
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