概要
middleman は jekyll, nanoc の静的サイトが作成できるツールです
今回はインストールから簡単な使い方を紹介します
環境
- macOS 10.15.6
- Ruby 2.6.5p114
- middleman 4.3.8
最初に注意
Ruby 2.7 だと動作しません
undefined method new for BigDecimal:Class (NoMethodError) が発生し middleman コマンドが使えません
なので Ruby2.6 系で試しましょう
以下では rbenv でインストールした ruby を使っています
rbenv install 2.6.5$(rbenv which ruby) -v$(rbenv which gem) -vrbenv init - >> ~/.zshrcsource ~/.zshrc
インストール
グローバルインストールしましょう
bundle install でもできると思うんですが面倒なのでグローバルインストールにしました
gem install middleman
Mac の rbenv 場合は /Users/username/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0 に gem はインストールされます
適当に PATH 配下において実行できるようにしましょう
ln -s /Users/username/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/middleman-cli-4.3.8/bin/middleman /usr/local/bin
プロジェクト作成
まずはプロジェクトを作成しましょう
middleman init test
init のあとにプロジェクト名を指定することもできます
指定しないとカレントがプロジェクトのルートになります
とりあえず動かしてみる
サンプルプロジェクトの内容でとりあえず動かしてみましょう
cd testbundle exec middleman server
で起動できます
localhost:4567 でサンプルサイトにアクセスできます
トラブルシューティング
bundle exec middleman server するとなぜか「undefined method show_deprecation_message! for AutoprefixerRails:Module」というエラーが出てしまいうまく表示されませんでした
ちゃんとメソッドが定義されているのに動作しない状態だったのでもしかすると LOAD_PATH あたりがおかしいのかなと思います
vim /Users/username/Documents/work/try_middleman/test/vendor/gems/autoprefixer-rails-9.8.6.2/lib/autoprefixer-rails/processor.rb
で process メソッドでコメントアウトすれば OK です
# AutoprefixerRails.show_deprecation_message!ページを追加する
新しいページを追加してみましょう
erb ファイルを追加すれば OK です
touch source/about.html.erbvim source/about.html.erb
---
title: About page
---
<h1>
About me
</h1>
<p>name･･･hawksnowlog</p>
<p>age･･･10</p>これで localhost:4567/about.html にアクセスすると新しく追加したページを確認できます
スタイルを変更する
仕組みから説明するとページのレイアウトを管理している erb ファイルがまずあります
vim soruce/layouts/layout.erb
ここで <%= stylesheet_link_tag "site" %> というメソッドがコールされています
これは middleman の機能で source/stylesheets/site.css.scss を自動で読み込んで適用してくれます
なのでスタイルを変更する場合は source/stylesheets/site.css.scss を変更すれば OK です
例えば背景の色を変更する場合は
vim source/stylesheets/site.css.scss
background-color: #CCFFFF;とかに変更すると以下のように背景の色が変わるのが確認できると思います
YAML Frontmatter
例のごとく YAML Frontmatter があります
ページのタイトルの設定や固定値の設定もできます
vim source/about.html.erb
---
layout: layout
title: About page
favorites:
- ruby
- swift
- python
---
<h1>
About me
</h1>
<p>name･･･hawksnowlog</p>
<p>age･･･10</p>
<% current_page.data.favorites.each do |f| %>
<p>I like <%= f %></p>
<% end %>layout は source/layouts/ 配下で作成したレイアウトのテンプレートファイル名を指定します
デフォルトは layout ですが上記では明記しています
宣言した変数の値は current_page.data で参照できます
ちなみにコロンで区切れば JSON Frontmatter も使えるようです
;;;
"layout": "layout",
"title": "About page",
"favorites": [
"ruby",
"swift",
"python"
]
;;;
<h1>
About me
</h1>
<p>name･･･hawksnowlog</p>
<p>age･･･10</p>
<% current_page.data.favorites.each do |f| %>
<p>I like <%= f %></p>
<% end %>ヘルパーメソッドの定義
link_to や stylesheet_link_tag は middleman がデフォルトで用意してくれているヘルパーメソッドです
自分でヘルパーメソッドを定義することもできます
その場合は lib/custom_helpers.rb という感じでモジュールを追加してあげます
mkdir libvim lib/custom_helpers.rb
module CustomHelpers
def hello
"hello"
end
endそして作成したヘルパーメソッドは config.rb で読み込みます
vim config.rb
require "lib/custom_helpers"
helpers CustomHelpersあとは about.html.erb で参照するだけです
<p><%= hello %></p>
ブログ化する
今までは erb ファイルを追加することで新しいページを作成しました
middleman-blog を追加することで markdown を追加するだけでページを追加できます
vim Gemfile
gem "middleman-blog", "~> 4.0"bundle install
そして config.rb でブログモードを有効にします
ブロック内でいろいろと設定できますが今回はデフォルトのまま使います
activate :blog do |blog|
end追加する記事のファイル名には命名規則があり {year}-{month}-{day}-{title}.html という形式で追加します
例えば以下のように追加できます
source ディレクトリ配下に追加します
touch source/2020-08-21-test.html.md
あとは markdown と Frontmatter を使って普通に記事をかけば OK です
---
title: Test article
tags:
- test
- diary
---
# This is test article
Helloアクセスする際は localhsot:4567/2020/08/21/test.html という感じで year, month, day をスラッシュで区切ったパスにアクセスします
最後に
middleman を使って静的ページの作成を行ってみました
セットアップに躓きましたが使い方としては jekyll, nanoc と同じように使えると思います
erb がデフォルトで使えるので ruby を使ってゴリゴリ書きたい人には向いているかもしれません
今回は試していませんが動的ページの作成やローカライズの機能もあるのでっ興味があれば調べてみてください
0 件のコメント:
コメントを投稿