Middleman 環境の構築 - 研究室Web(1)

この記事は研究室のWebページに2018/8/24に掲載したものの転載です。

自作のシステムで静的なWeb page を作っていたが、Middleman というシステムで静的な Web page を作成できることを知った。 コースのページを作り変える前に、自分の研究室のページを Middleman で再構築してみる。 どうせ忘れてしまうので、覚書をリアルタイムに書きなぐる事とする(Scrapbox に書いたものを Middleman に転記した)。

  • とりあえずディレクトリを作成、 git の初期化、gitignore の作成、Gemfile の作成
mkdir hkob_middleman
cd hkob_middleman
git init
bundle init
# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem 'middleman'
gem 'middleman-blog'
gem 'middleman-livereload'
  • bundle install する
bundle install --path vendor/bundle --jobs 4
  • middleman を初期化する。私の環境は bundle exec を be と略せるのでそう記載している。Gemfile は指定通り上書きした
be middleman init --template=blog
  • 再度 bundle install しろとのことで実行。tzinfo-data と wdm は消してよかったかも
bundle

.gitignore は最低限のものしかないので、後ろに追加

gibo dump macOS Vim Rails >> .gitignore

とりあえずサーバを動かしてみる(be は bundle exec を alias したもの)

be middleman server

localhost の 4567 にアクセスしたら、サーバが動いていることが確認できた。とりあえず構築まで終了。これからコンテンツを作ってみる。

https://i.gyazo.com/a1b0a604a4e5fdbea0c0ccd79d4879a0.png