##はじめに
静的ページジェネレーターのMiddlemanを始めてみて、シンプルかつモバイルに対応しているテンプレートがなかなか見つからなかったので、自分で作成してみました。
ここで、ホスティング先にGitHub Pagesのプロジェクトページを採用したのですが、これを自動化してみました。
なので、一般的には、以下のコマンドを実行すれば、自動でブログページが立ち上がります。
ちなみに、projectnameのところは、好きな名前にしてください。これがURLになります。プロジェクトページの場合は、http://username.github.io/projectnameという感じになります。
$ git clone https://github.com/syui/middleman-simple-template projectname
$ cd !$
$ bundle
$ rvm use 1.9.3
$ ./setup.sh
$ middleman build
$ ./build.sh
$ middleman deploy
setup.shは何をしているのかというと、現在ディレクトリ名で新しいリポジトリの作成とgh-pagesブランチの作成です。リポジトリの作成には、GitHubのパスワードを入力してください。中身は大体以下のようなコマンドになります。
# New Repository
curl -u 'USERNAME' https://api.github.com/user/repos -d '{"name", "PROJECTNAME"}'
# New Branch
git checkout -b gh-pages
# Push <projectname:gh-pages>
git push
##middleman-simple-template
###デモ
http://syui.github.io/middleman-simple-template/
###特徴
特徴としては、何も入ってないシンプルなサイトなので、速いです。お好きにカスタマイズしていただければと思います。カスタマイズのヒントは最後に書きます。
###インストール
$ git clone https://github.com/syui/middleman-simple-template
$ cd !$:t
$ bundle
$ middleman server
または、
$ gem i middleman middleman-blog
$ git clone https://github.com/syui/middleman-simple-template ~/.middleman/middleman-simple-template
$ middleman init my_new_project --template=middleman-simple-template
$ cd my_new_project
$ bundle install
$ middleman server
bundleコマンドは、Gemfileに記述されたモジュールをインストールするコマンドです。
ページの生成から公開までをすべて自動化したい場合は、最初に挙げたコマンドになります。ただし、bundleなどを導入していることが前提で、上級者向けです。
$ git clone https://github.com/syui/middleman-simple-template projectname
$ cd !$
$ bundle
$ rvm use 1.9.3
$ ./setup.sh
$ middleman build
$ ./build.sh
$ middleman deploy
####bundler
bundlerを導入していない場合は、導入してください。
$ gem i bundler
また、Ruby --versionは、1.9.3で動作するのを確認しています。
したがって、bundler installする前にバージョンを変更してください。
$ rvm use 1.9.3
###基本コマンド
# 現在のディレクトリにある source フォルダをプレビューを行うコマンド(http://localhost:4567/)
$ middleman server
# 現在ディレクトリの source フォルダ build フォルダ内に HTML 変換するコマンド
$ middleman build
# 指定されたホストにデプロイするコマンド
$ middleman deploy
# 記事を作成するコマンド
$ middleman article hoge
####Zshの補完関数
$ cd ~/.zsh/functions/
$ curl -O https://raw.githubusercontent.com/sshankar/dotx/master/.zsh/completions/_middleman
$ source ~/.zshrc
###初期設定
####GitHub Pages
ホスティング先であるサーバーは設定しておいてください。ここでは、GitHub Pagesのプロジェクトページを使用する前提で書きます。
まず、GitHubで新しいリポジトリを作ります。そして、gh-pagesブランチを作ります。これは、新しいリポジトリを作る際に案内されると思います。
ページができたら、その設定、具体的には、projectnameの部分にリポジトリ名を設定します。
configure :build do
activate :asset_host, :host => '/projectname'
end
####config.rb
ページの公開元を用意できたらconfig.rbで設定を行います。
# ブログタイトルなどの基本設定
set :site_url, 'http://username.github.io/projectname'
set :site_author, 'username'
set :site_title, 'blog title'
set :site_description, 'blog description'
# デプロイやビルドに関する設定
configure :build do
#activate :gzip
activate :minify_css
activate :minify_javascript
activate :asset_host, :host => '/projectname'
activate :asset_hash
set :relative_links, true
end
activate :deploy do |deploy|
deploy.build_before = true
deploy.method = :git
deploy.branch = 'gh-pages'
end
設定すべきポイントは、最低限、activate :asset_host, :host => '/projectname'とdeploy.branch = 'gh-pages'辺りです。
これは、middleman deployやmiddleman buildなどのページ作成とアップロードコマンドの指定になります。
ただし、middleman deployは、gem i middleman-deployを導入済みである必要があります。これについては、Gemfileに記述してあります。
初期設定を終えるとやっとページの生成から公開ができるようになります。
###カスタマイズ
####変数
config.rb
| title | html | sample |
|---|---|---|
| トップアドレス | <%= site_url %> | set :site_url, 'http://syui.github.io/middleman-simple-template/' |
| 名前 | <%= site_author %> | set :site_author, 'User Name' |
| タイトル | <%= site_title %> | set :site_title, 'Blog title' |
| サブタイトル | <%= site_description %> | set :site_description, 'Blog description' |
####ページタイトル
<title><%= current_page.data.title || site_title %></title>
A || Bは、優先順位を示す記述方式です。
current_page.data.titleは、現在ページのタイトルを表します。
####アイコンの変更
タイトル部分は、以下のファイルを編集します。具体的には、h1タグ内です。
<!-- Logo & Top Nav -->
<div class="row">
<div class="small-3 columns">
<h1 style="line-height:0px;font-weight:200;"><a href="<%= site_url %>"><span class="icon-phoenix-logo"></span></a><%= site_title %></h1>
syui's blog mba-hack3.
</div>
</div>
アイコンはいくつか用意されています。icon-phoenix-logoを変更してください。変更できるものは以下の通りです。
source/stylesheets/icomoon.css.scss
- icon-phoenix-logo
- icon-home
- icon-image
- icon-mobile
- icon-quotes-left
- icon-switch
- icon-menu
- icon-link
- icon-checkmark
- icon-radio-checked
- icon-embed
- icon-console
- icon-share
- icon-googleplus
- icon-twitter
- icon-vimeo2
####モバイル表示
モバイルに対応した表示は、個別に分けて書きます。
@media screen and (max-width: 650px) {
.column, .columns {
padding-left: 0;
padding-right: 0;
}
}
はみ出してしまう場合は、悪さをしている要素に対し以下を設定するとよいでしょう。あとは、marginなども見落としがちです。
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -webkit-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
word-break: break-all;
white-space: inherit;
Building Smartphone-Optimized Websites
####digest
digestにより設定がまとめられています。
<% if digest %>
<time datetime="<%= article.date.strftime('%Y-%m-%d') %>"><%= article.date.strftime('%Y-%m-%d') %></time>
<%= link_to article.title, article %>
<% else %>
<%= article.title %>
<% end %>
:degest => true
<%= partial '/blog/article', :locals => {:article => article, :digest => true} %>
ERB記法はなれませんので、slimに移行するかもしれません。
####datatime
日付の表示は、以下のタグになります。
<%= article.date.strftime('%Y-%m-%d') %>
###書いた記事
middleman-simple-template - MBA-HACK2
Middlemanのテンプレートを使うときのarticle.url - MBA-HACK2
Middlemanのブログテンプレートを使ってみた - MBA-HACK2
MiddlemanでGitHub Pagesを構築してみた - MBA-HACK2
###参照と謝辞
参考にさせていただいたページなどです。ありがとうございます。
###To-Do