Ruby
scss
middleman
asciidoc

Middleman + Asciidocで個人サイトを作ってみた

どこかしら活動拠点が欲しかったのと、Asciidocで文章をガリガリと書きたくなったのとで、静的サイト作成アプリ「Middleman」を使ってサイトを作成してみた。一つの導入事例としてご覧くだされば幸い。

なお、必要に応じて追記、修正を入れる予定。理解を深めつつ、記事をもっと充実させたいと思っているので。

完成例

見た目は本当に普通のサイト。Webアプリ系統のプログラムは一切使われていない。

Middlemanの特徴

  • 2018年現在も開発が進んでいる
  • プラグイン導入でAsciidoc書類も扱えるようになる(以前はデフォルトだったらしい)
  • buildが簡単
  • CSS設計にSCSSを採用

htmlファイルを作るまで

インストール

$ gem install middleman

プロジェクト作成

プロジェクトを作りたいフォルダまで移動し、以下のコマンドを実行する。

$ middleman init

これでプロジェクトに必要なファイル一式が一挙に作成される。

ファイルの簡単な説明

  • config.rb:Asciidoc導入時に編集が必要(後述)。
  • Gemfile:上に同じ。
  • source/index.html.erb:デモファイル。要らなくなったら破棄してもOK。
  • source/layouts/layout.erb:いわゆるテンプレート。
  • source/stylesheets/site.css.scss:CSSを出力するのに必要なSCSSファイル。

とりあえずbuildして出力を確認

$ middleman build

すると、ディレクトリbuildにHTMLやCSS、画像ファイル等が出力される。

Asciidocパーサの導入

詳しいドキュメントは以下を参照(英語)。

なお、使える拡張子は基本的には.adocまたは.html.adocのみとのこと。

インストール

まず、Gemfileに以下の記述を追加する。

gem 'middleman-asciidoc'

それからターミナルでbundleを実行すればOK。

有効化

Asciidocを使えるようにするには、config.rbの先頭あたりに以下の記述を付け足してやらなければならない。ちょっと面倒。

activate :asciidoc

Asciidoc文書の作成・出力

Asciidoc文書を外部から持ち込むなり新規に作るなりしてファイルを用意し、buildすると、何の問題もなくhtml文書が出力される(構文に問題がある場合はエラーが吐き出される)。

レイアウトの編集(変数について)

具体的なHTML文法・SCSSの編集法については別の記事を参照していただくとして、ここでは変数のみにターゲットを絞ることにしたい。

current_page.data.title

レイアウト中に使うであろう変数。

本来ならあらかじめ自分で用意しなければならないのだが、Asciidoc文書に関して言えば、トップレベルのタイトルが参照されるようになっている。地味に便利。

今後の課題(加筆予定)

  • ページによってレイアウトを変更する方法
  • パンくずリストの作成
  • シンタックスハイライト