Middlemanで個人ページを作っている話（2014/8/23 社内勉強会LT）
1 like3,261 views
2014-08-23 FFTT社内勉強会#202 LT 弊社フィードフォースの技術チームの社内勉強会（LT回）で発表したスライドです。
![ちょっと面倒な工夫とは
★ 解決法？
○ masterブランチへの自動コミット時にTravis CIにbuildさせ
ないようにする設定
■ Travis での master コミットのメッセージに "[ci skip]"
を含める
■ source, master ブランチ双方の .travis.yml に「source
ブランチだけ build して」って指定する
★ 参考にした
○ Middleman の記事更新を Travis-CI でする
■ 上記の後者を採用している
■ いま考えたら [ci skip] のほうが楽そう…
■ あとはGithubの設定でメインリポジトリ変えるとか](https://image.slidesharecdn.com/20140822fftttmd45middleman-150225230316-conversion-gate01/85/Middleman-2014-8-23-LT-9-320.jpg)
![ちょっと面倒な工夫とは
★ .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へのコミット内容](https://image.slidesharecdn.com/20140822fftttmd45middleman-150225230316-conversion-gate01/85/Middleman-2014-8-23-LT-10-320.jpg)
Middlemanで個人ページを作っている話（2014/8/23 社内勉強会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/
- 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 を検知して…
- 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へのコミット内容
- 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で簡単に拡張できるしね