Embed Size (px)
Citation preview
Middlemanで個人ページを
作っている話
Github Pages, TravisCI, Middleman で独自ドメインサイト
2014-08-23 Fri. @tmd45
社内勉強会#202 LightningTalks
社内勉強会#194 Github Pages
すーさんの発表おさらい①
★ Github Pagesとは○ Githubリポジトリの静的コンテンツ（HTMLとか）をWeb
ページとして公開できるホスティング機能○ 決まった形式でリポジトリを作るだけ
■ User Page（Organization Page）■ Project Page ←こっち使う話だった
○ 普通の公開リポジトリだから普通に無料○ 独自ドメインも使えるよ
社内勉強会#194 Github Pages
すーさんの発表おさらい②
★ Middlemanとは○ 静的サイトジェネレータ（コマンドラインツール）○ RubyGemsで配布されている○ 拡張機能や追加のGemを使える（Gemfileで管理）
■ gem "middleman-blog" でブログも生成できる○ Sinatra（RubyのWebフレームワーク）ベース
■ 開発に ERB とか使える■ サーバ機能があるから開発環境でかんたん確認
○ 丁寧な日本語翻訳サイトでわかりやすい！■ http://middlemanapp.com/jp/
個人ページでやってること
★ Github Pages の User Page を利用○ {github-id}.github.io リポジトリの master ブランチが公開
ディレクトリ（gh-pages ブランチではない）
★ Middlemanでサイト開発○ source ブランチで開発して、origin/source ブランチに
push★ Travis CIでデプロイ
○ `$ middleman build`で生成した静的ファイルだけ master に push すればいいんだけど面白くないので
○ これをやるのにちょっと面倒な工夫が必要
★ 独自ドメイン設定
ちょっと面倒な工夫とは
★ Travis CIにやらせること○ origin/source ブランチへの push をトリガーにして .travis.
yml の指示通りに `middleman build` を実行する○ build した静的ファイルを origin/master に push する
■ あとは Github がよしなにしてくれる
★ 問題点○ Travisくんは master に push があると build してくれようと
する
■ ？！
ちょっと面倒な工夫とは
tmd45.github.io
source ブランチmiddleman ソース開発
source ブランチ
master ブランチ
①push
②検知してbuild実行
③masterにpush
④masterへのpush を検知して…
ちょっと面倒な工夫とは
https://twitter.com/hiro_asari/statuses/418587151748845569
ちょっと面倒な工夫とは
★ 解決法？○ masterブランチへの自動コミット時にTravis CIにbuildさせ
ないようにする設定
■ Travis での master コミットのメッセージに "[ci skip]" を含める
■ source, master ブランチ双方の .travis.yml に「source ブランチだけ build して」って指定する
★ 参考にした○ Middleman の記事更新を Travis-CI でする
■ 上記の後者を採用している■ いま考えたら [ci skip] のほうが楽そう…■ あとはGithubの設定でメインリポジトリ変えるとか
ちょっと面倒な工夫とは
★ .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://[email protected]/tmd45/tmd45.github.io.git 2> /dev/null'
↓こっちはmasterへのコミット内容
LTで済む話じゃなかった
／(^o^)＼ﾅﾝﾃｺｯﾀｲ
＼(^o^)／ﾄﾗﾝｻﾞﾑ!
★ そもそも Github Pages のことは公式の Help に丁寧にかかれてるのでそこ読めばいいよ○ https://pages.github.com/○ カスタムドメインについての説明は以下にある
■ https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages
Github Pages で独自ドメイン
Github Pages で独自ドメイン
★ 公開リポジトリ※に CNAME ファイルを作る○ 内容はドメインを書けばいい（プロトコルは含めない）
■ $ echo 'tmd45.jp' > CNAME○ commit して push → リポジトリの設定から確認
★ DNSの設定を変更する○ サブドメインかどうかとかで違うので詳細はヘルプ参照
○ 自分の場合はGehirnのDNSサービスで `Apex Alias` というのを使って tmd45.github.io に向けるというのをやっ
ている■ このへんのキーワードでggrといいデース
★ Middlemanのドキュメントの○ 基礎→テンプレート→Markdownの項があるので読め
○ 他にも対応しているテンプレート言語と必要なRubyGemsが一覧になってるよ！
★ SyntaxHighlightとかもできる○ なんか最新のは設定ファイル（config.rb）に `activate:
syntax` って書くだけでよさそう？○ https://github.com/middleman/middleman-syntax
markdownとか使いたい人
オシャレなページにしたい？
★ gem 'bootstrap-sass'○ twitter bootstrap を sass で使える gem
★ gem 'zurui-sass-middleman'○ 少ない手間と知識でそれなりに見せる、ズルいデザイン
テクニックを簡単に適用できるmixinのgem★ あとはbootstrapの事例サイトを眺めながら素人な
りに頑張ってデザインしました^q^○ web font入れてみたり○ 背景をパララックスさせてみたり
自分のhubページつくろう
★ ブログとかツイッターとかあれとかこれとかをまとめておく○ そのURLさえ公開しとけば良いべ！ってページ
★ 個人的には activity をリストアップしておくのが良かった○ イベント参加とかの記録○ イベントに参加するとページ更新のためにpushする
■ そういうのないと放置気味になるし（笑）
★ middlemanはフロントエンドのちょっとした勉強に便利…かも○ Gemで簡単に拡張できるしね
以上です★
今回文字ばかりですみませんでした！
ご清聴（？）ありがとうございました！！
m(_ _)m
