WordPress から Middleman に移行しました

年末に移行作業に手をつけて放置していたものを、やっと終わらせました。 移行したいと思ったきっかけは $ middleman deploy で公開！みたいなことがしたかったから。 なんかかっこいいし ^^ （動機不純）

Slim というテンプレートエンジンの予習がしたかったという真面目な理由もあります。

途中、別件に心奪われて放置してましたが、やりかけ気持ち悪いので先週末に集中して終わらせました。 ついでにデザインをマイナーアップデートした！あんま変わってないけど。。。

何をしたかをざっとメモとして残します。

Index

移行手順メモ

  1. Middleman をインストールして、ブログ機能に必要な環境をググって整えた
  2. WordPress のテーマに使っていた Sass とか JS とか画像とかを Middleman 環境にコピー
  3. Grunt でビルドしていたものを、Middleman 環境でビルドするように変更
  4. Slim テンプレートエンジンでテーマをコーディング
  5. WordPress に投稿済みの画像を Middleman 環境にコピー
  6. WordPress に投稿済みの記事を Middleman 環境にコピー（Markdown で下書きしていたものがあるので、それをほぼそのまま移行できた）
  7. GitHub Pages でホスティングする準備とテスト
  8. イメチェン（デザインのマイナーアップデート）
  9. かゆいところをなおす作業（無知ゆえ一番辛かった工程）
  10. 完成！！やったー

Middleman にインストールしたプラグイン

# If you have OpenSSL installed, we recommend updating
# the following line to use "https"
source 'http://rubygems.org'

gem 'middleman'
gem 'middleman-blog'
gem 'middleman-livereload'
gem 'middleman-rouge'
gem 'middleman-deploy'
gem 'middleman-blog-similar'
gem 'middleman-minify-html'
gem 'middleman-imageoptim'
gem 'slim'
gem 'nokogiri'
gem 'redcarpet'

# For feed.xml.builder
gem 'builder', '~> 3.0'

middleman-blog

Middlemanにブログ機能を追加するプラグインです。

WordPress の時と URL が変わらないよう、最初は思い通りの URL を作ることから始めました。 $ middleman server で内蔵のサーバが動くので、実際に動かして設定していくとわかりやすかった。

config.rb

activate :blog do |blog|
  blog.layout = 'layouts/layout'
  blog.tag_template = 'tag.html'
  blog.calendar_template = 'calendar.html'

  blog.sources    = 'entries/{year}/{month}/{title}.html'
  blog.permalink  = '{title}/index.html'
  blog.taglink    = 'tag/{tag}/index.html'
  blog.year_link  = '{year}/index.html'
  blog.month_link = '{year}/{month}/index.html'
  blog.day_link   = '{year}/{month}/{day}/index.html'

  # Enable pagination
  blog.paginate = true
  blog.per_page = 10
  blog.page_link = 'page/{num}'

  blog.custom_collections = {
    categories: {
      link: '/{category}/index.html',
      template: '/category.html'
    }
  }
end

# Feed 生成
page "/feed.xml", layout: false

# Sitemap 生成
page "/sitemap.xml", layout: false

# ディレクトリインデックス
activate :directory_indexes

WordPress の時に持っていた「カテゴリー」という概念は引き継ぐことにしました。 blog.custom_collections のところで設定しています。

middleman-livereload

Middleman server を立ち上げてソースファイルに変更を加えるとブラウザが自動でリロードされます。

middleman-deploy

デプロイ作業を簡略化できる。

middleman-rouge

シンタックスハイライト。

middleman-blog-similar

類似記事を表示するプラグイン。設定周りはまだ試してません。とりあえずいれているだけ。

middleman-minify-html

HTML を Minify するプラグイン。

middleman-imageoptim

画像圧縮。 /build 配下に最適化された画像が生成されます。

テンプレートエンジン

HTML のテンプレートエンジン

HTML 生成用のテンプレートエンジンは Slim を採用しました。<% %> とか書かなくて良くてすっきり ;D

Markdown のテンプレートエンジン

投稿記事は Markdown で書くことにしました。

Markdown エンジンは、デフォルトの Kramdown から Redcarpet に変更しました。

Redcarpet に変更して困ったことが、Markdown の中に書いた生の HTML がブロック要素の場合、HTML タグで囲われた Markdown 部分は Markdown として認識されません。 Kramdown なら Markdown として認識してくれるのに。。

いろいろ調べてみたら、ブロック要素で囲われた Markdown 部分が Markdown として認識されないのは仕様として正しいみたい。（無知でした）

寝かせて考えた結果、生の HTML を書きたいケースは限定されているので、カスタムレンダラを追加して対応しました。

参考にさせていただいた記事 thx XD

GitHub Pages でホスティング

ユーザーに紐づくサイトと、プロジェクトに対するサイトのパターンがあるらしい。。。 前者は username/username.github.io というルールに則ってリポジトリを作る必要があるみたい。

今回は後者にしてみました！（なんとなく）

プロジェクトに対するサイトにした場合は、 gh-pages ブランチのコンテンツが使われるとのことなので、$ middleman-deploy したら、gh-pages ブランチに push されるようにしました。

activate :deploy do |deploy|
  deploy.method = :git
  deploy.branch = 'gh-pages'
end

log.chocolateboard.net と書いた CNAME ファイルが gh-pages に含まれるようにして準備完了。 DNS の設定をいじってしばらく待ったら反映されました ^^

参考にさせていただいた記事 thx XD

積み残しタスク

  • 検索窓つけようかな
  • サイドバーが長すぎるのでタグのデザイン変えよう
  • Feed の URL 変わってしまったのどうにかできないか調査する

夢の deploy できるようになりました XD

Share

Comments