WordpressからGithub Pagesに意外とすんなり移行できました。

Web/26 May 2015

きっかけは今の制作環境

少し前に Wordpress から middleman にサイトを移行しました。クライアントワークなら問題ないのですが、自分用には Wordpress は必要ないなと思ったためで、大きくは以下 3 点の理由です。

1. 管理画面いらない

記事書いて、中身を定期的に変更するだけなので、ユーザー管理やカスタマイザーといった Wordpress の機能満載な管理画面は必要ありませんでした。むしろ管理画面があることはセキュリティリスクにもなりますしね。

2. エディター機能もいらない

Wordpress を含め Markdown 記法で文章を書くことが多く、エディター機能の性能を全く引き出していませんでした。というよりもログインして記事を書くことがまずないので不必要でした。

3. slim/scss を Wordpress 化するのが面倒

非効率と言われればそれだけかもしれませんが、html の変更を伴う内部チューニングやレイアウト、デザイン修正による css の変更などを Wordpress 用に反映させることが非常に億劫でした。レイアウト変更の場合は、静的サイトで制作し問題なければ Wordpress 用に php 化しているためです。2 度手間やん。

wordpress から middleman へ

Wordpress 化する前の静的サイトデータを引っ張りだし、ブログ機能をインストールしサイトを修正。これにより記事は Markdown 記法で作成し、記事ごとに個別ファイル化して保存。作成後は middleman でコンパイルすれば完了です。楽チンです。 このあたりはまた詳しく書きます。

コンパイルしたデータは今までのサーバにアップしても良いのですが、GitHubPages をホスト先にして以下のことを実現してみます。

  1. Github でブログデータを管理する
  2. GithubPages に独自ドメインを割り当てる
  3. 簡単にデプロイできるようにする

参考にしたのは下記のサイトです。探せば結構同じような人がいるものですね。

1. Github でブログデータを管理する

これはアカウントを持っていれば簡単ですね。 Create NewからNew Repositoryを選択して、Repository nameを決めるだけです。

リポジトリの作成

このサイトと同じように独自ドメインを割り当てる場合は、次の内容も合わせて作成します。

2. GithubPages に独自ドメインを割り当てる

独自ドメインを割り当てたい場合は、リポジトリを作る際に、Repository name を username.github.io の形で入力しないといけません。自分は username が youthminor なので、 youthminor.github.io としています。

CNAME レコード作成

独自ドメインを割り当てる際は、master ブランチ内に CNAME を置く必要があります。

CNAMEレコード作成

CNAME の中身は表示させたいドメインを記載するだけのシンプルなものです。自分の場合は mdesign-works.com と記載したのみです。これで作成すると次は独自ドメインの取得先で DNS を設定します。今回はムームードメインを使って設定しました。

ムームードメインにログイン後、左サイドバーのドメイン操作のサブメニューにムームー DNS があり、クリックすると取得しているドメインの一覧が表示されます。対象ドメインの行の処理をクリックすると、カスタム設定というボタンがあるのでそれもクリックします。

種別を A の内容を以下の 2 パターン作成します。

  • 192.30.252.153
  • 192.30.252.154

他のブログなどでは異なる IP アドレスが紹介されていますが、GitHubPages のヘルプによると上記が最新のようです。(2015.05.26 時点) 設定すると以下のようになりますね。

DNSの設定 サブドメインで表示させる場合はサブドメイン欄を埋めて設定すれば問題ありません。DNS の設定がうまくいっているかどうかは、ターミナルで dig コマンドを使って確認します。

$ dig example.com +nostats +nocomments +nocmd
example.com.  73  IN  A 192.30.252.153
example.com.  73  IN  A 192.30.252.154

example.com は独自ドメインに置き換えてください。ちなみに mdesign-works.com では以下のように表示されます。

DNSの設定

3. 簡単にデプロイできるようにする

Gemfile に gem 'middleman-deploy' を追加して bundle install を実行。 インストール後はデプロイ先の設定を config.rb に追加します。 git を使って master ブランチにデプロイしてねという感じですね。

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

Github Pages は master ブランチにデプロイされた build ファイルを読み取ります。そのため、先ほどの CNAME も master ブランチに置く必要がありました。

build してデプロイするだけ

build する前に 1 点注意があります。現在のブランチが master の場合はデプロイ時に上書きされますので、開発用のブランチを別途作成しておく方が得策です。自分は開発用ブランチを作り忘れたので、デプロイ時に開発用のフォルダが消えて build フォルダだけになってしまいました。デプロイ前に戻れたので支障はありませんでしたが、かなり冷や汗ものでした。

これで準備が整いました。あとは下記 2 つのコードを実行して GitHub へデプロイします。

$ bundle exec middleman build
$ bundle exec middleman deploy

デプロイ後、設定したドメインを入力してページが表示されれば成功です。

最後に

ブログに特化したもの、一般のサイト制作に特化したものなど、個性豊な静的サイトジェネレータがたくさんあります。クライアントワークではまだまだ CMS を使用して制作することが多いですが、html や css の知識があり Github へのデプロイさえクリアできるのであれば、Wordpress よりも楽に運用できるかもしれませんね。