WordpressからMiddlemanブログ機能への移行
category:web
当サイトのブログをCMSのWordpressから、静的サイトジェネレーターの一つMiddlemanのブログ機能で再構築することにしました。
導入の動機は流行りもあるのですが、
- サーバ上にDBを扱わない、アクセスごとにページを生成しない → ページ表記が速くなる。
- Rubyまわり、haml作法、マークダウン記述など扱いたい。
- gitなどバージョン管理がしやすい。
- CMS編集管理画面が必要なかった。
(Wordpress投稿画面のテキストモードはクセがあり扱いずらかった。) - Middlemanを使ったことがあって慣れていた。
など再構築する価値は十分にあったためです。
Wordpressテーマ作りより習得が容易で、Middlemanブログ機能環境下だと編集作業などがサクサクで気に入っています。
Middleman フロントエンドツールで静的サイトを開発ではMiddlemanの導入に触れていましたが、今回は導入(bundler管理)も含めて書いていきます。
【動作環境:Mac OS X 10.11.1】
Middlemanインストール前準備
Middlemanを使うにはApp StoreからXcodeを、もしくは無料の Apple Developer アカウントを持っていればXcode 用のコマンドラインツールをインストールする必要があります。
【App Store「Xcode」ダウンロードページ】
【「Command Line Tools OS X 10.11 for Xcode」ダウンロードページ】
Xcodeはインストールしたら一度起動させておきましょう。
初回起動で「ライセンス同意ダイアログ(Xcode and iOS SDK License Agreement)」が開くので、同意する(Agree)を押して使える状態にしておきます。
(Xcodeをインストールしただけで起動させないと、下記のようなエラーが表示されMiddlemanがインストールできない場合があります。)
You have not agreed to the Xcode license agreements, please run 'xcodebuild -license' (for user-level acceptance) or 'sudo xcodebuild -license' (for system-wide acceptance) from within a Terminal window to review and agree to the Xcode license agreements.
ここで、前回の「Middleman フロントエンドツールで静的サイトを開発」ではそのままグローバルインストール(Middlemanを全てのプロジェクトから利用できるようにインストール)しましたが、今回は「demoBlog」と言うプロジェクトを新たに作成し、そのディレクトリにbundlerを使ってこのプロジェクトだけで必要なgemモジュールなどをインストールし(他のプロジェクトに影響が出ないように)開発環境を作りたいと思います。
bundlerインストール
bundlerをインストールします。
$ gem install bundler
新規プロジェクト「demoBlog」ディレクトリ作成
デスクトップ上に「demoBlog」と言う名前のディレクトリを作成します。
$ cd /Users/ユーザー名/Desktop $ mkdir demoBlog $ cd demoBlog
Gemfileファイル作成
まだ空の「demoBlog」ディレクトリ上にgemfileファイルを作成します。
$ bundle init
「demoBlog」ディレクトリにできたGemfileファイルをエディタで開くと、下のようになっています。
source "https://rubygems.org" # gem "rails"
このファイルの"rails"を"middleman"に書き換え、この一行にかかっているコメントアウトを外します。
そして今回はmiddlemanのblog機能を使うので、ブログテンプレートも追記。
※プロジェクト開発を進めてから、後からその他拡張機能を付け加えることもできます。
(例:html圧縮、livereload使用など)
source "https://rubygems.org" gem "middleman" gem "middleman-blog"
ここまでがmiddlemanインストール前準備の工程です。
Middlemanインストール
先ほどの書き換えたGemfileファイルを使いbundlerを使ってmiddlemanをインストールします。
あらかじめインストール先のパスも指定しておきます。
$ bundle install --path vendor/bundle
モジュールを順番にインストールしていき、インストールが成功すると下のように表示されます。
これでmiddlemanのコマンドが使えるようになりますが、bundler介してインストールしているので、middlemanコマンドには必ず"bundle exec"と言うprefixをつけることになります。
プロジェクト開発が進行してから他の拡張機能を追加する場合などは、Gemfileファイルに機能のインストール指示をを追記をして、このインストール作業を繰り返してプロジェクトに反映する必要があります。
Middleman起動
スケルトン作成
今度はこのプロジェクトディレクトリにmiddlemanのプロジェクトファイルを作成します。
プロジェクトファイルはスケルトンと言う新しいサイトのテンプレートのファイル群です。
そして今回はblogの拡張機能が加わっているので、スケルトン作成は下記のようになります。
$ bundle exec middleman init --template=blog
スケルトン作成は初期化のコマンドです。既存のプロジェクトがあっても上書きされてしまうので注意が必要です!
ここまででディレクトリに生成されたファイルを見てみます。
ファイル構成
基本的には「Middleman フロントエンドツールで静的サイトを開発」で紹介した「source」フォルダの中身と変わりはないですが、blog機能としてtagやfeed.xml、calendarのテンプレートファイルが増えています。
markdownファイルは投稿内容のコンテンツ部となります。
こちらはblog機能を持たないmiddlemanスケルトンのファイル構成です。
これらの設定は全て config.rb ですることになります。
Middlemanの起動
スケルトン作成後、middlemanの開発作業は次のコマンドを叩いてすることになります。
$ bundle exec middleman server
このコマンドによってmiddlemanはローカルサーバが建ち上がり、//localhost:4567/にアクセスすると編集内容をリアルタイムにブラウザに反映しながら作業が行えます。
デフォルトで「source」内の.markdown(.mdに変更可能)、.haml、.slim、.scss(sass)、.coffee(CoffeeScript)対応しています。
control + C でサーバを停止します。
編集内容を公開
この辺りのmiddlemanの基本動作は、blog機能はあっても同じです。
下記のコマンドでwordpressでサーバ上でページ生成されていた内容が、きれいなhtml、css、javascript、ディレクトリ構成で出力されます。
$ bundle exec middleman build
ディレクトリフォルダのrootに「build」フォルダが生成され、その中にブラウザで読み込めるファイルたちがが吐き出されます。
公開、更新作業はホスティングサービスにこの「build」フォルダの内容をアップすることになります。
続く…。