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

Github Pagesへの移行

きっかけは今の制作環境

少し前に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を決めるだけです。

リポジトリの作成

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

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
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よりも楽に運用できるかもしれませんね。

関連記事