WordPressからmiddlemanに移行してGithub Pagesで運用する方法

サイトをリニューアルしていました。
WordPressからmiddleman-blogに乗り換えました。
ホスティングもロリポップからgithub-pagesに乗り換え。
理由は普段使っているエディタでmarkdownでブログを書いてgitでデプロイする流れがやりたかったから。
static site generatorは数あれど、慣れたmiddlemanでやってしまおうと思っていました。
haml と sassでコーディングしています。コードはここに置いてあります→camuro.github.io

今回リニューアルするのにとった流れか下記の通りです。

  1. WordPressからデータをmarkdown形式でブッコ抜く
  2. Pureを少し使ってmiddleman-blogでコーディング
  3. githubにorganizationアカウントを作る
  4. middleman-deployでdeploy
  5. トップレベルドメイン(TLD)でDNSの変更

1. WordPressからデータをmarkdown形式でブッコ抜く

WordPressからxmlをexportしておく。
Octopress - WordPress から投稿データを移行! の記事を参考にWpXml2Mdを使ってxmlからmarkdownにコンバートする。
wp-content/uploads/の画像をsource/images/にコピーする。
表示おかしいところなどを確認して直す。

正直、syntax-hilighterの調整で戸惑ったので、もっといい方法があるはず。
jekyllとかoctpressの記事を調べてもっと良い方法探した方がいいかも。

2. Pureを少し使ってmiddleman-blogでコーディング

グリッドとページングのところにPureを使いました。@yterajimaさんのgemが便利です。
markdownはmiddleman-syntaxでredcarpet、Syntax-Hilightはmiddleman-rouge、コメントはmiddleman-disqusのgemを使いました。

3. githubにorganizationアカウントを作る

ドメインを割り当てたい場合の対策です。
ユーザーアカウントにプロジェクトリポジトリを作成した場合は、masterブランチをdeployするとgh-pagesブランチが生成されてそこにbuildしたファイルがdeployされます。
http://username.github.io/projectnameでgh-pagesブランチのファイルが表示されるはずです。
ドメインを割り当てる場合は、username.github.ioという名前でリポジトリを作成してそこにドメインを書いたCNAMEファイルを置きます。(置き場所はsource/の下です。)
github pagesのカスタムドメインは1ユーザにつき1つしか設定できないので、自分の場合はcamuro.org用にcamuroというorganizationアカウントを作りました。
そしてorganizationアカウントで新しいリポジトリをcamuro.github.ioという名前で作成します。
camuro/camuro.github.ioという感じですね。

4. middleman-deployでdeploy

(deployする前に、$ middleman buildしておいてくださいね。)
以前書いていたのですが、公開してなかった記事があったのでついでに公開します。
Middleman 実践(4)- Githubページへデプロイする方法
上記の記事の方法はdeploy.branchを指定しないと自動的にgh-pagesというブランチで生成されますが、ドメインを割り当てたい場合にはgh-pagesにCNAMEを置いても反映されず、あくまでmasterブランチでないと反映されません。 なので、config.rbに次のように設定しておきます。

activate :deploy do |deploy|
  deploy.method = :git
  deploy.branch = 'master'
end

これで、$ middleman deployしてあげるとmasterブランチにdeployされます。
まぎらわしいので本来のmasterブランチ的な役割はdevelopというブランチ名で作りました。
Coiney開発者ブログを参考にしました。(coiney.github.io)。

トップレベルドメイン(TLD)でDNSの変更

独自ドメインの取得先で DNS を設定します。
DNS で camuro.org の Aレコードを 204.232.175.78 にセットします。 セットした後にターミナルで確認します。

dig camuro.org +nostats +nocomments +nocmd

反映されていたらこんな感じで表示されるはずです。

; <<>> DiG 9.8.5-P1 <<>> camuro.org +nostats +nocomments +nocmd
;; global options: +cmd
;camuro.org.      IN  A
camuro.org.   3600  IN  A 204.232.175.78

これで、camuro.orgにアクセスしたらGithub Pagesに飛ぶようになります。 以上です!

RubyHiroba 2013 のサイトデザインしました

rubyhiroba2013

2013年6月2日(日)に日本マイクロソフト株式会社 品川本社で開催される、RubyHiroba 2013というイベントのサイトデザインなどに携わらせていただきました。

LTthon(Lightning Talk Hackathon)や、p4d(Programming for Designer)・dRuby(ハンズオン)・RailsGirls, More!のワークショップ、地域コミュニティなどのブース出展などを実施いたします。 doorkeeperから参加登録できます! LTthonやブースの事前公募も開始いたしました。 ご興味のある方は是非ポチリとしていただきたいです。

サイトの他にも、LTthonのTシャツとノベルティのステッカーもデザインさせていただきました。 p4dがきっかけでこのような機会に恵まれて、とても感謝しております。

フィヨルドでのインターンでMiddlemanを学習したのを踏まえて、Middleman + Amicus(HTML5 Boilerplate, Haml, Sass, Compass, Susy grid system)でgithub-pages上にサイトを構築しました。Amicusについてはこちらの記事で少し触れています。

SusyでResponsive gridのコーディングするのはとてもとても楽しいです。 普段の業務ではカンプからコーディング、というフローで作業してますが、今回はイラストとロゴだけ作って後はブラウザでLiveReloadしながらコーディングするフローをとりました。 grid systemを使うと、イチからmedia queryなどで調整しながらレスポンシブにする場合よりも余計な事考えないで済むので、格段に捗ります。 またこういう機会があれば、やりたいなー。 そんな感じで、よろしくお願いします!

リモートインターン | Middleman 実践(4)- Githubページへデプロイする方法

静的サイトジェネレータの良いところって色々あるとは思うのですが、Github Pagesで無料で静的ページを公開できる点が良いです。 Middlemanの他にもjekyll,Octopressなど今は静的にブログを作成できるものがあるので、それぞれ試してみたい…。

試してみたMiddlemanをGithubページへデプロイする方法

方法1.Middleman Deployを使う

日本語ガイド Middleman Deploy Gitでデプロイする方法をやってみました。

手順 1.gemをインストール

$ gem install middleman-deploy

2.bundle
Gemfileに下記を記述する。

gem "middleman-deploy", "~> 0.0.11"

bundleインストール

$ bundle install

3.config.rbに下記を記述

activate :deploy do |deploy|
  deploy.method = :git
end

オプションを記述しなければデプロイした時に、リモート名はoriginでgh-pagesという名前のブランチがリモートリポジトリへデフォルトで作られる。 オプションを書く場合は下記の通り。

activate :deploy do |deploy|
  deploy.method = :git
  deploy.remote = "some-other-remote-name"
  deploy.branch = "some-other-branch-name"
end

4.ビルド

$ middleman build

5.デプロイ

$ middleman deploy

上記の方法でMiddleman 実践(3)で作ったやつもデプロイしてみた。→デザインは入ってないので真っさら…。

リモートインターン | MIddleman 実践(3)- ブログレイアウトと入れ子レイアウト

参考 - Middleman:ブログ機能 今回はブログ機能を付けていたときに躓いたことについて書いていきます。

config.rbにブログ機能のオプションを色々と書くことができる。

# blog
activate :blog do |blog|
  # ブログ機能のオプションを設定
  Time.zone = &quot;Tokyo&quot; # タイムゾーン
  blog.prefix = &quot;blog&quot; # カスタムパス
  blog.permalink = &quot;/:year/:month/:day/:title.html&quot; # パーマリンク
  blog.per_page = 5 # ページあたりの記事数
  blog.paginate = true # ページネーションを有効化する場合には true を設定
  blog.layout = &quot;layouts/blog_layout&quot; # 全ての記事に使用される特定のレイアウトを設定
end

ブログレイアウトの指定方法

方法1.ブログ用のレイアウトをlayoutsディレクトリ作ってその配下にarticle_layout.hamlという名前などで作る。(元のerbでもいいけどhamlでやってます。)

blog.layout = "layouts/article_layout"

方法2.ブログレイアウトの指定は入れ子レイアウトも使えるらしい。 同様にconfig.rbのブログオプションの箇所でレイアウトの指定を下記のように書き換える。

page "blog/*", :layout => :article_layout

ここで問題。 layoutsディレクトリを作る、ということで私はここで勝手に元のlayout.hamlもlayoutsディレクトリに入れてしまった。 こうしてしまうとパーシャルを含むブログレイアウトの指定を入れ子レイアウトにした場合、ヘッダーやフッターのパーシャルをうまく読み込んでくれない。 あくまでsource/layout.hamlが基本で、そこからsource/layouts/article_layout.hamlを入れ子にするという考え方が正しい。

原因が分からず、source/layouts/layout.hamlはブログ以外のページ用のレイアウトとしてそのまま残し、source/layouts/article_layout.hamlにはヘッダーやフッターのパーシャルにしないで直書き…というキモいやり方でとりあえず動かしてしまっていた。

今回この記事書くために改めて検証してみて、原因が分かりました…とほほ。 今回検証する用に作ったコードをGithubに上げておきます。→

リモートインターン | Amazonギフト券のデザインを作る

今日は「Amazonギフト券のデザインが欲しい」の作業しました。 (怖話では毎月一番怖かった話に送られる怖話アワードという企画があって、選ばれた怖い話を投稿した作者の方には5,000円分のAmazonギフト券がメールで送られます。)

このへんの記事を参考に Photoshopでざらざらのノイズテクスチャをデザインする方法 Photoshop|よごれて古い感じのトランプの作り方チュートリアル

作ったものがコレです。

amazon-gift-image

グランジ系のブラシは重宝しそうです。