Middleman+GitHub Pagesでブログ環境を構築する

今回 Middleman+GitHub Pagesを使ってブログ環境を一新したのでブログ環境構築手順を残します。

GitHub Pages用のリポジトリを作成

GitHub Pages を参考にしてリポジトリを作成します。
username.github.ioでリポジトリを作成。

Middlemanのインストール

Middlemanとその拡張であるMiddleman Blogをインストールします。

$ gem install middleman
$ gem install middleman-blog

ブログのプロジェクトを初期化

ブログの骨組みを作ります。
Dropboxの下にディレクトリを作って、そこをソース置き場にします。iPadのDiet Codaから記事を書けるようにするためです。

$ cd ~/Dropbox/GitHub
$ middleman init my-blog --template=blog

リモートリポジトリの登録

最初に作ったusername.github.ioのリポジトリをremote登録します。

$ cd my-blog
$ git init
$ git remote add origin [email protected]:username/username.github.io.git

Gemfileを修正

LiveReloadやシンタックスカラーリングをしたいので以下を追加。

gem "middleman-deploy"
gem "middleman-livereload"
gem "middleman-syntax"
gem "redcarpet"
gem "nokogiri"

書いたらbundle installします。

config.rbを設定

Blogのprefixをarchivesとしました。
あとビルドの設定とLiveReloadとSyntaxの設定を追加しています。

以下config.rbの一部抜粋。

Time.zone = "Tokyo"

page "archives/*", layout: :post
page "archives/index.html", layout: :layout

configure :build do
  activate :minify_css
  activate :minify_javascript
  activate :asset_hash
end

set :markdown_engine, :redcarpet
set :markdown, :fenced_code_blocks => true, :smartypants => true

activate :livereload
activate :directory_indexes
activate :syntax

build & deployしてみる

ここまでできたらいよいよGitHub Pagesに公開します。

$ middleman build
$ middleman deploy

deployするとusername.github.ioのリポジトリへbuildされたファイルがプッシュされます。
http://uesrname.github.io/ にアクセスしてちゃんと表示されていればOK。

独自ドメインの設定を行う

公開したページには、http://username.github.ioでアクセス可能ですが、どうせなら独自ドメインで公開したいのです。

カスタムドメインの設定は<projectroot>/source/CNAMEというファイルを作成し、ドメインを記述する事で可能になります。

blog.example.com

あとは、こちらを参考にドメイン側のCNAMEを設定します。

---

これで Middleman+GitHub Pagesのブログ環境が整いました。
あとはテーマを自作したり、使いやすいように構成変えたりです。