WEB掻っ穿じり

WEB備忘録とチャリとカメラ

WordpressからMiddlemanブログ機能への移行

  category:web

当サイトのブログを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」ダウンロードページ】

App Store「Xcode」ダウンロードページ
(※容量が4.3GBあります。)

【「Command Line Tools OS X 10.11 for Xcode」ダウンロードページ】

Command Line Tools OS X 10.11 for Xcode ダウンロードページ
(※OSに合わせたバージョンをダウンロードします。)

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インストール ターミナル画面

これでmiddlemanのコマンドが使えるようになりますが、bundler介してインストールしているので、middlemanコマンドには必ず"bundle exec"と言うprefixをつけることになります。

プロジェクト開発が進行してから他の拡張機能を追加する場合などは、Gemfileファイルに機能のインストール指示をを追記をして、このインストール作業を繰り返してプロジェクトに反映する必要があります。

Middleman起動

スケルトン作成

今度はこのプロジェクトディレクトリにmiddlemanのプロジェクトファイルを作成します。
プロジェクトファイルはスケルトンと言う新しいサイトのテンプレートのファイル群です。
そして今回はblogの拡張機能が加わっているので、スケルトン作成は下記のようになります。

$ bundle exec middleman init --template=blog

スケルトン作成は初期化のコマンドです。既存のプロジェクトがあっても上書きされてしまうので注意が必要です!

ここまででディレクトリに生成されたファイルを見てみます。

ファイル構成

基本的には「Middleman フロントエンドツールで静的サイトを開発」で紹介した「source」フォルダの中身と変わりはないですが、blog機能としてtagやfeed.xml、calendarのテンプレートファイルが増えています。
markdownファイルは投稿内容のコンテンツ部となります。

middlemanブログ機能付きスケルトンファイル構成図

こちらはblog機能を持たないmiddlemanスケルトンのファイル構成です。

middlemanブログ機能無しスケルトンファイル構成図

これらの設定は全て config.rb ですることになります。

Middlemanの起動

スケルトン作成後、middlemanの開発作業は次のコマンドを叩いてすることになります。

$ bundle exec middleman server

このコマンドによってmiddlemanはローカルサーバが建ち上がり、//localhost:4567/にアクセスすると編集内容をリアルタイムにブラウザに反映しながら作業が行えます。

デフォルトのmiddleman-blog画面

デフォルトで「source」内の.markdown(.mdに変更可能)、.haml、.slim、.scss(sass)、.coffee(CoffeeScript)対応しています。

control + C でサーバを停止します。

編集内容を公開

この辺りのmiddlemanの基本動作は、blog機能はあっても同じです。
下記のコマンドでwordpressでサーバ上でページ生成されていた内容が、きれいなhtml、css、javascript、ディレクトリ構成で出力されます。

$ bundle exec middleman build

ディレクトリフォルダのrootに「build」フォルダが生成され、その中にブラウザで読み込めるファイルたちがが吐き出されます。
公開、更新作業はホスティングサービスにこの「build」フォルダの内容をアップすることになります。

続く…。