タグ「middleman」の一覧
middleman blog

middlemanでブログを作ろう。インストールから初期設定まで(slimも少々)

Wordpressで始めたブログを管理画面がいらないという理由で静的サイトジェネレータのmiddlemanに乗り換えて早3ヶ月。CMS案件やWebアプリケーションのHTML/CSS制作にmiddlemanを使っていたのですが、ブログ機能はこの移行で初めて取り組みました。今回はこのブログ機能に絞って書いていきます。というわけで、以下のような方におすすめの内容でお届けします。middlemanを使ったことがある方middlemanでブログを作りたい方middlemanでのブログ初期設定をやろうとしている方なんとなく見てしまっているという奇特な方 ← どうもありがとうmiddlemanを初めて使う方は、まずは過去記事をご覧ください。インストールからサーバーの起動までブログサイト制作するには、上記ページ内のmiddlemanを起動してみようのスケルトン作成の箇所に補足として記載している、$ bundle exec middleman init --template blogをターミナルに入力し、ブログテンプレートの初期ファイルを作成します。(後述します。)レイアウトとパーシャルについて今回はあまり触れませんが、ここも見ておくと良いかも。開発環境を用意する過去記事のインストールからサーバ起動までのインストールしてみようを行った上で進めていくのが理想ですが、念の為に再掲しておきます。すでに初期セットの作成が完了している方は飛ばしていただいて大丈夫です。ブログ用の初期セットを作成するmiddlemanのインストールが完了していると、下記のようなディレクトリ構造になっています。この状態では、middlemanが使えるようになっただけで、スケルトン自体は生成されていません。生成するにはmiddleman initを行うのですが、今回はブログを作るのでgem "middleman-blog"をGemfileに追加しておく必要があります。source "https://rubygems.org"gem "middleman"gem "middleman-blog"追加後は、有効にするためにbundle installを実行します。middleman-blog は middleman の拡張機能でタグや記事抽出などブログに必要な機能を提供してくれます。middleman-blogをインストール後はbundle exec middleman init --template blogでスケルトンを作成します。もしかすると、Could not find gem 'builder (~> 3.0) ruby' in any of the gem sources listed in your Gemfile or available on this machine.のエラー(赤字)が出るかもしれません。これは、gemのbuilderが見つからないと言うことなので、Gemfile にgem "builder", "~> 3.0"が追加されているかvendor/bundle/ruby/ 以下にbuilderがあるかを確認し、無ければbundle updateしておいてください。ここまで来れば、bundle exec middlemanでサーバを起動してブログの初期セットを確認します。ブラウザから http://localhost:4567 にアクセスし、以下のページが表示されていれば、初期セットが正しく生成されています。復習のつもりが長くなりましたが、ここからブログの設定作業です。現状の初期セットではあまりにも簡素で、ディレクトリ構成もちょいと使いづらそうです。なので、以降は下記の2点について記載していきます。config.rbでカスタム設定Slimの初期セット生成config.rbで自分だけのカスタム設定config.rbは設定ファイルで、以下のような内容を設定することができます。ブログ設定ディレクトリ設定リンクパスの設定ビルド時の出力形式公式サイトにはヘルパーや相対パス設定など、他にもたくさん紹介されていますが、ブログ作成という観点で上記をピックアップしています。前項で実際に生成された config.rbを見ながらご覧いただくとわかりやすいと思います。ブログの設定activate :blog do |blog|...endactivate :blog do |blog|からendまでの内容がブログ設定の記述箇所となり、ここを適宜変更したり、有効化していくことで詳細に設定することが可能となります。#はコメントアウトとなり、これを外すと設定を有効化できます。↓ サンプルとして自分の設定内容を掲載しました。activate :blog do |blog| blog.prefix = "blog" blog.permalink = "{category}/{title}.html" blog.sources = "{year}-{month}-{day}-{title}.html" blog.taglink = "tags/{tag}.html" blog.layout = "layouts/layout" # blog.summary_separator = /(

静的サイト制作

静的サイトを効率よく制作する。- middlemanを使ってみよう vol.1

このブログはmiddlemanを使って構築しました。middlemanは日本語リファレンスがある静的サイトジェネレータです。企業向けのサイト構築に特化しているようなのですが、gemを追加することでblog機能を追加することができます。gemはWordpressで言うプラグイン的なものですね。...

Github Pagesへの移行

WordpressからGithub Pagesに意外とすんなり移行できました。

きっかけは今の制作環境少し前にWordpressからmiddlemanにサイトを移行しました。クライアントワークなら問題ないのですが、自分用にはWordpressは必要ないなと思ったためで、大きくは以下3点の理由です。1. 管理画面いらない記事書いて、中身を定期的に変更するだけなの...