Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

Yoko TAMADA

August 23, 2014
Tweet

More Decks by Yoko TAMADA

Other Decks in Technology

Transcript

  1. 社内勉強会#194 Github Pages すーさんの発表おさらい① ★ Github Pagesとは ◦ Githubリポジトリの静的コンテンツ(HTMLとか)をWeb ページとして公開できるホスティング機能

    ◦ 決まった形式でリポジトリを作るだけ ▪ User Page(Organization Page) ▪ Project Page ←こっち使う話だった ◦ 普通の公開リポジトリだから普通に無料 ◦ 独自ドメインも使えるよ
  2. 社内勉強会#194 Github Pages すーさんの発表おさらい② ★ Middlemanとは ◦ 静的サイトジェネレータ(コマンドラインツール) ◦ RubyGemsで配布されている

    ◦ 拡張機能や追加のGemを使える(Gemfileで管理) ▪ gem "middleman-blog" でブログも生成できる ◦ Sinatra(RubyのWebフレームワーク)ベース ▪ 開発に ERB とか使える ▪ サーバ機能があるから開発環境でかんたん確認 ◦ 丁寧な日本語翻訳サイトでわかりやすい! ▪ http://middlemanapp.com/jp/
  3. 個人ページでやってること ★ Github Pages の User Page を利用 ◦ {github-id}.github.io

    リポジトリの master ブランチが公開 ディレクトリ(gh-pages ブランチではない) ★ Middlemanでサイト開発 ◦ source ブランチで開発して、origin/source ブランチに push ★ Travis CIでデプロイ ◦ `$ middleman build`で生成した静的ファイルだけ master に push すればいいんだけど面白くないので ◦ これをやるのにちょっと面倒な工夫が必要 ★ 独自ドメイン設定
  4. ちょっと面倒な工夫とは ★ Travis CIにやらせること ◦ origin/source ブランチへの push をトリガーにして .travis.

    yml の指示通りに `middleman build` を実行する ◦ build した静的ファイルを origin/master に push する ▪ あとは Github がよしなにしてくれる ★ 問題点 ◦ Travisくんは master に push があると build してくれようと する ▪ ?!
  5. ちょっと面倒な工夫とは tmd45.github.io source ブランチ middleman ソース開発 source ブランチ master ブランチ

    ①push ②検知してbuild実行 ③masterにpush ④masterへのpush を検知して…
  6. ちょっと面倒な工夫とは ★ 解決法? ◦ masterブランチへの自動コミット時にTravis CIにbuildさせ ないようにする設定 ▪ Travis での

    master コミットのメッセージに "[ci skip]" を含める ▪ source, master ブランチ双方の .travis.yml に「source ブランチだけ build して」って指定する ★ 参考にした ◦ Middleman の記事更新を Travis-CI でする ▪ 上記の後者を採用している ▪ いま考えたら [ci skip] のほうが楽そう… ▪ あとはGithubの設定でメインリポジトリ変えるとか
  7. ちょっと面倒な工夫とは ★ .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へのコミット内容
  8. ★ そもそも Github Pages のことは公式の Help に丁 寧にかかれてるのでそこ読めばいいよ ◦ https://pages.github.com/

    ◦ カスタムドメインについての説明は以下にある ▪ https://help.github.com/articles/setting-up-a-custom- domain-with-github-pages Github Pages で独自ドメイン
  9. Github Pages で独自ドメイン ★ 公開リポジトリ※に CNAME ファイルを作る ◦ 内容はドメインを書けばいい(プロトコルは含めない) ▪

    $ echo 'tmd45.jp' > CNAME ◦ commit して push → リポジトリの設定から確認 ★ DNSの設定を変更する ◦ サブドメインかどうかとかで違うので詳細はヘルプ参照 ◦ 自分の場合はGehirnのDNSサービスで `Apex Alias` と いうのを使って tmd45.github.io に向けるというのをやっ ている ▪ このへんのキーワードでggrといいデース
  10. ★ Middlemanのドキュメントの ◦ 基礎→テンプレート→Markdownの項があるので読め ◦ 他にも対応しているテンプレート言語と必要なRubyGems が一覧になってるよ! ★ SyntaxHighlightとかもできる ◦

    なんか最新のは設定ファイル(config.rb)に `activate: syntax` って書くだけでよさそう? ◦ https://github.com/middleman/middleman-syntax markdownとか使いたい人
  11. オシャレなページにしたい? ★ gem 'bootstrap-sass' ◦ twitter bootstrap を sass で使える

    gem ★ gem 'zurui-sass-middleman' ◦ 少ない手間と知識でそれなりに見せる、ズルいデザイン テクニックを簡単に適用できるmixinのgem ★ あとはbootstrapの事例サイトを眺めながら素人な りに頑張ってデザインしました^q^ ◦ web font入れてみたり ◦ 背景をパララックスさせてみたり
  12. 自分のhubページつくろう ★ ブログとかツイッターとかあれとかこれとかをまと めておく ◦ そのURLさえ公開しとけば良いべ!ってページ ★ 個人的には activity をリストアップしておくのが

    良かった ◦ イベント参加とかの記録 ◦ イベントに参加するとページ更新のためにpushする ▪ そういうのないと放置気味になるし(笑) ★ middlemanはフロントエンドのちょっとした勉強に 便利…かも ◦ Gemで簡単に拡張できるしね