Build static website as Tech Blog.

Middlemanで理想のTech Blogを構築する

WordPressを卒業しよう。GitHubとMiddlemanで作るTech Blog《エンジニアサイト誕生の裏側 後編》

Recruit Lifestyle Engineer」サイト(以下、エンジニアポータルサイト)の企画から実装までの裏側をお届けするこのシリーズ。

後編は、Middlemanによる実装で、具体的にどのような工夫がなされているかについてお届けします。

前編:Tech Blogをポータルサイトに発展させるには《エンジニアサイト誕生の裏側 前編》

Middlemanを使ったTech Blog構築

MiddlemanはRuby製の静的サイトジェネレータです。Rubyをベースに創られているため、Ruby同様のロジックを使うことができ、変数なども設定できるため、より効率的に静的サイトを構築することができます。

Middlemanと、Middlemanでブログを構築できるようにする公式のプラグイン「middleman-blog」を使ったこのWebサイトが、理想のTech Blogとなるように施されている工夫を、実際の作り方と共に説明していきたいと思います!

一般的なMiddleman Blogの作り方は、Middleman公式のドキュメントのほか、以下のサイトなどが参考になります。

全体の構造

今回のTech Blogは、以下の様なファイル構成で構築しています。
※ブログ機能以外のファイルは省略して掲載しています

Project Directory

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/techblog/
+-- config.rb
+-- data
    +-- author_list.yml
    +-- site.yml
+-- source
    +-- index.html.erb
    +-- layouts
        +-- blog
            +-- header.erb
            +-- footer.erb
            +-- footer-techblog.erb
            +-- footer-archive.erb
            +-- layout.erb
            +-- sidebar-techblog.erb
            +-- sns-buttons.erb
        +-- common
            +-- header.erb
            +-- footer.erb
    +-- techblog
        +-- 2015-10-02-engineer-portal-site-2
            +-- index.html.markdown
            +-- img
                +-- article_main.jpg
                +-- middleman_logo.png
        +-- index.html.erb
        +-- calendar.html.erb
        +-- category.html.erb
        +-- tag.html.erb

環境を構築する

Middlemanのインストールには、RubyとRubyのパッケージマネージャーであるRubyGemsが必要です。

パッケージのインストールはBundlerから行うことで、各プロジェクトごとに異なったバージョンのものをインストールできるので便利です。

RubyGemsとBundlerの関係は少し複雑です。

npmにおける-gオプションを付けてグローバルインストールするのがRubyGems、-gオプションを付けないでローカルインストールするのがBundlerと思ってもらうと分かりやすいかもしれません。

Middlemanと必要プラグインのインストール

まずはじめに、Middleman本体と使っているプラグインをインストールします。

以下をGemfileに追加し、$ bundle install --path=vendor/bundleをつかってプロジェクトディレクトリ内にインストールします。

Gemfile

1
2
3
4
5
6
7
8
9
10
11
12
13
# middleman
gem "middleman"
gem "middleman-blog"
gem "middleman-syntax"
gem "middleman-livereload"
gem "middleman-autoprefixer"
gem "nokogiri"

# For feed.xml.builder
gem "builder"

# redcarpet
gem "redcarpet"

これで、Middlemanコマンドを使って、プロジェクトが作成できるようになりました。

Terminal.app

1
2
$ middleman init myproject --template=blog
$ bundle exec middleman server

$ middleman initで初期化後$ bundle exec middleman serverでローカルサーバを立ち上げればブラウザ上でサイトを確認できるようになります。

Tech Blogの運用を考慮したカスタマイズ

今回のTech Blog構築では、GitHubで記事を管理するMarkdownで記事を書く複数人のライターで運用するなどの要件がありました。

これらを実現するためには、デフォルトのMiddleman Blogでは必要な機能がそろっていないのため、独自の改良を施しています。

Markdownのデフォルトエンジンを「Redcarpet」に変更

Middleman BlogはデフォルトでもMarkdownエンジン「Kramdown」がインストールされているのですが、GitHubと同じルールで書けるように、GitHubの「GitHub Flavored Markdown」に最も近い「Redcarpet」に変更しました。

Gemfileに以下のように追記します。

Gemfile

1
2
# redcarpet
gem "redcarpet"

config.rbに以下のように追記します。

config.rb

1
2
3
# Markdown
set :markdown_engine, :redcarpet
set :markdown, :fenced_code_blocks => true, :smartypants => true, :tables => true, :strikethrough => true

GitHubでプレビューしたMarkdownのルール通りにブログ記事としてHTML出力されます。

YAMLファイルによる複数投稿者管理

1. データベースの作成

Middlemanには、YAMLやJSONなどのファイルでデータ情報を管理できる機能があり、サイト構造やデザインに影響を及ぼすこと無く管理できます。

データファイルは以下のような構造で、プロジェクトのルートフォルダ以下のdataフォルダ内に格納されています。

author_list.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
authors:
  -
    username: rls
    data:
      -
        name: "Tech Blog"
        job: "編集部"
        profile: "株式会社リクルートライフスタイルのTech Blog編集部です。いま流行りのTechネタやちょっと使えるTipsなどをお届けしていきます。"
        image: author/tech_blog.png
  -
    username: takamario
    data:
      -
        name: "高丸翔英"
        job: "新規サービス基盤チーム"
        profile: "エンジニアドリブンな新規サービス開発をしています。"
        image: author/takamario.jpg

2. 記事の投稿者情報を設定する

Middlemanでは、各記事内にFrontmatterを設定できます。

YAMLやJSONフォーマットでテンプレート上部に記述することで、ページ固有の変数を格納できます。 記事の投稿者選択は、YAMLファイルのusername: rlsを下記のように設定して使います。

2015-10-02-engineer-portal-site-2/index.html.markdown

1
2
3
---
author: rls
---

3. 投稿者情報を表示する

上記で設定したauthor: rlsは、下記ERBテンプレート内で使用され、必要な情報をYAMLデータから取得してから、HTMLとして出力されます。

このサイトでは、各記事の投稿者情報を掲載しており、ブログ記事の共通テンプレートであるlayouts/blog/layout.erbに下記コードを書いています。

layouts/blog/layout.erb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<% data.author_list.authors.each do |authors| %>
  <% if authors.username == current_article.data.author %>
    <% authors.data.each do |authordata| %>
      <div class="rls-a-writer__image">
        <img src="/img/<%= authordata['image'] %>">
      </div>
      <div class="rls-a-writer__info">
        <p class="rls-a-writer__name"><%= authordata['name'] %></p>
        <p class="rls-a-writer__job"><%= authordata['job'] %></p>
        <p class="rls-a-writer__profile"><%= authordata['profile'] %></p>
      </div>
    <% end %>
  <% end %>
<% end %>

Middlemanでできた静的ファイルを公開する

ブログ作成システムの構築は完了しました。あとは、配信する仕組みです。

Middlemanは、ビルドすると静的なHTML/CSS/JSファイルを作成してくれるので、配置するだけでOKです。

通常なら、Webサーバ1台用意するところですが、今回はAmazon S3のWebサイトホスティング機能の恩恵を受けましょう。
S3へのアップロード作業には、Jenkinsを使用します。

まず、リポジトリの変更を検知して、Jenkinsのジョブを走らせるようにします。
記事のブランチ名のルールをarticles/YYYY-MM-DD-ArticleTitleというふうに決めてあるので、そのブランチに変更があったら、ジョブを走らせます。

Jenkinsのビルド設定は以下のようになります。

あとは、ビルドして、S3にアップロードするだけです。

s3cmd syncを使用して、ビルドされた成果物を置き換えます。

ここで一工夫しているのが、devサーバだけ、確認用にいろいろな下書き記事を見れるようにしたいため、その記事データと画像を残すようにしているところです。
prevサーバとmasterサーバは、一度きれいにしてからマージされたものだけが上がります。

Jenkinsのシェル実行

1
2
3
4
5
6
7
8
9
10
11
12
bundle install --path=vendor/bundle
bundle exec middleman build

# [dev] 記事ページは消さない
s3cmd sync -v --no-mime-magic --guess-mime-type --delete-removed --exclude "techblog/*" --exclude "img/*" $WORKSPACE/build/* s3://${DEV_DOMAIN}
s3cmd sync -v --no-mime-magic --guess-mime-type $WORKSPACE/build/techblog/* s3://${DEV_DOMAIN}/techblog/

# [prev]
s3cmd sync -v --no-mime-magic --guess-mime-type --delete-removed $WORKSPACE/build/* s3://${PREV_DOMAIN}

# [master]
s3cmd sync -v --no-mime-magic --guess-mime-type --delete-removed --acl-public $WORKSPACE/build/* s3://${MASTER_DOMAIN}

これで、MiddlemanとGitHub、Jenkins、Amazon S3を使ってTech Blogが運用できるようになります。

Webサーバの管理をしなくていい分、運用も楽になるのではないでしょうか。

WordPressを卒業しよう

普段使っているGitHubをCMS化し、Markdownで記述することで、Tech Blogの運用が効率的になりました。

いまでもブログといえばWordPressですが、WordPressを使うには、PHP、MySQL、プラグイン、テーマなどブログを書く以外にも様々なことに気を配らなければいけません。
さらに、セキュリティを万全にするためには、常に最新にアップデートし続ける必要があります。

次第に、ブログを書きたかったのか、WordPressのサイトを作りたかったのかわからなくなってくる……というような経験がある人も多いのではないでしょうか。

最終出力が静的HTMLという、構造が単純なMiddlemanならば、問題点も簡単に発見&解決でき、執筆に集中することができます。

Tech Blogを作るならば、そろそろWordPressを卒業して、Middlemanで快適なTech Blog運用を始めてみるのもひとつの手かもしれません。

Tech Blog

(編集部)

株式会社リクルートライフスタイルのTech Blog編集部です。いま流行りのTechネタやちょっと使えるTipsなどをお届けしていきます。

NEXT