静的サイトジェネレーターMiddlemanをインストールして起動する方法

Middlemanとは

Middlemanは、静的サイトジェネレーターです。 HTML・CSS・Javascriptで構成されるサイトを効率よく作ることができるフレームワークです。

JekyllやHugo,Hexoなど他にも静的サイトジェネレーターはありますが、 Middlemanは、Ruby製で、SassやHaml, CoffeeScriptなども使えることや、Gemでパッケージが管理するこができます。普段 Ruby on Rails環境で開発している人には、とてもすんなり開発を始められると思います。

Middlemanの公式サイトはこちら

Middleman: 作業を効率化するフロントエンド開発ツール

Middleman はモダンな web 開発のショートカットやツールを採用した静的サイトジェネレータです引用 https://middlemanapp.com/jp

Middlemanのインストール方法

それでは、Middlemanをインストールしていきたいと思います。

Rubyのインストール

まず、最初にRubyが必要になります。 Mac環境であればRubyがもともとインストールされていますが、 Rubyがインストールされていな環境や、Rubyのバージョンが古い場合は最新版(安定版)のインストールをおすすめします。

また、Rubyをインストールするにあたり、RVMをおすすめしています。 RVMは、Rubyのインストールやプロジェクト毎にRubyをバージョン管理したり、Gemの管理もしてくれるすぐれものです。

RVMの公式サイトはこちら

RVM: Ruby Version Manager - RVM Ruby Version Manager - Documentation

RVMのインストール方法や使い方についてはこちら

blog.tuuuti.com

Gemのインストール

GemはRubyに特化したパッケージングシステムです。そのGemの中に、Middleman用のライブラリがあるのでインストールします。

Gemのインストールは、ターミナルなどから下記を実行します。

gem install middleman

実行すると、Middlemanに必要な諸々をインストールしてくれます。

プロジェクトの作成

middlemanのインストールが完了したら、次はプロジェクトを作成します。プロジェクトの作成には、下記のmiddlemanのコマンドを実行します。

middleman init [project_name]

※ [project_name]には、好きな名前を指定してください。

実行すると [project_name]/ディレクトリが作成され、下記のようなファイル構成となります。

[project_name]/
+-- .gitignore
+-- Gemfile
+-- Gemfile.lock
+-- config.rb
+-- source
    +-- images
    +-- index.html.erb
    +-- javascripts
    ¦   +-- site.js
    +-- layouts
    ¦   +-- layout.erb
    +-- stylesheets
        +-- site.css.scss

Middlemanの起動

ここまで成功したら、インストール作業は終了です。下記のコマンドをターミナルから実行して、ローカル環境用のサーバーを起動します。

middleman server

または

middleman s

下記のようなメッセージが表示されたら

== The Middleman is loading
== View your site at "http://localhost:4567", "http://127.0.0.1:4567"
== Inspect your site configuration at "http://localhost:4567/__middleman", "http://127.0.0.1:4567/__middleman"

ブラウザからhttp://localhost:4567にアクセスしてみましょう。下記のような画面が表示されたら、ローカル環境の立ち上げ完了です。

f:id:jun9632:20171026205120p:plain

tuuuti.com公式ブログ

静的サイトのお問い合わせフォーム設置の tuuuti.com