amasok's blog

Articles tagged 'middleman'

middlemanのconfig.rb

2013/12/03 23:36 tags: middleman, このエントリーをはてなブックマークに追加

さて、今回はこのブログの現時点のconfig.rbを大公開 ほとんど他のところのコピペだけど。。

後、githubにもあがってるからわざわざ書く必要もないけど、一応備忘録的に。

config.rb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
### # Blog settings ### Time.zone = "Tokyo" activate :blog do |blog| blog.prefix = "blog/article" blog.default_extension = ".md" blog.tag_template = "blog/tag.html" blog.taglink = "categories/:tag.html" blog.calendar_template = "blog/calendar.html" blog.paginate = true blog.per_page = 5 blog.page_link = "page/:num" end page "blog/feed.xml", :layout => false page "blog/article/*", :layout => "layouts/article" ### # markdown settings ### activate :syntax, :line_numbers => true set :markdown, :tables => true, :autolink => true, :gh_blockcode => true, \ :fenced_code_blocks => true, :with_toc_data => true, :smartypants => true set :markdown_engine, :redcarpet ### # delecty settings ### set :css_dir, 'stylesheets' set :js_dir, 'javascripts' set :images_dir, 'images' activate :livereload ### # build settings ### configure :build do activate :minify_css activate :minify_javascript end ### # deploy settings ### activate :deploy do |deploy| deploy.method = :git deploy.remote = "deploy" deploy.branch = "master" end

言うほどたいした設定してない。 今日はとりあえず載っけただけにしとく。

今後、この記事をちまちま更新するようにする。

【middleman】ブログのカレンダーで月単位の表示

2013/11/30 12:20 tags: middleman, このエントリーをはてなブックマークに追加

久々にブログの構造自体をちょっといじったのでメモ

middleman-blogではテンプレートで年単位のカレンダーを表示してくれます。
しかし、一般的には月単位でのカレンダーになると思うので、その変更点を書きます。

対象

  • middleman blogのテンプレートを生成した人
  • 月単位のカレンダーを表示させたい人

方法

カレンダー部分で年単位表示をさせる部分があると思います。

source/layout.erb

1
2
3
4
5
6
<h2>By Year</h2> <ol> <% blog.articles.group_by {|a| a.date.year }.each do |year, articles| %> <li><%= link_to year, blog_year_path(year) %> (<%= articles.size %>)</a></li> <% end %> </ol>

修正後

1
2
3
4
5
6
7
8
9
10
11
<h2>By Year</h2> <ul> <% blog.articles.group_by {|a| a.date.year }.each do |year, articles_year | %> <li><%= link_to year, blog_year_path(year) %>(<%= articles_year.size %>)</li> <ul> <% blog.articles.group_by {|a| a.date.month }.each do |month, articles_month | %> <li><%= link_to month, blog_month_path(year, month) %> (<%= articles_month.size %>)</li> <% end %> </ul> <% end %> </ul>

簡単な修正だったけど久々にいじれてよかった。

参考

http://rubydoc.info/github/middleman/middleman-blog/master/Middleman/Blog/Helpers#blog_month_path-instance_method

bundlerによるgemの管理

2013/11/27 00:18 tags: bundle, middleman, このエントリーをはてなブックマークに追加

昨日書いたmiddlemanの導入の記事を見た友人から、

「gemをbundleで管理してないの?」
という話をされ、
「だってわざわざ"bundle exec"とかつけるのめんどくさいじゃんヾ(・д・` )」

と返したのですが、せっかくブログから生まれた話だし、やってみるかー。
ということで、やってみました。

対象者

  • コマンドラインに慣れてる
  • rubyをPC(Mac)にインストールできる
  • gemで何かしらをインストールしたことある
  • bundle installコマンドをわけわからずでも打ったことがある

実施環境

  • mac(Mountain Lion)
  • ruby(2.0.0p247)

bundlerとは

完全に憶測で書くので間違ってたらしれっと直すかもですが。。

bundleとはgemをPCに依存せずプロジェクト毎に管理できるツールです。。

例えば、あるrailsプロジェクトがあったとして、一つは4.0系一つは3.2系を使っていたとします。
リポジトリ管理されており、同じPC内で違うバージョンのプロジェクトをどう扱えばいいか?

そんな時にbundleが便利なようです(想像で書いてます)

あとは、共同開発しててAさんとBさんで入ってるgemのバージョンが違うとかかな。
こっちのほうがよくありそう。

bundlerのインストール

terminal

1
$ gem install bundler

これだけでOK

さすがに、gemを管理するのにbundlerは入れないと動かないです。

bundle initしてみる

プロジェクトのディレクトリを作って、とりあえずbundle initしてみましょう。
terminal

1
2
3
4
$ mkdir project $ cd project $ bundle init Writing new Gemfile to /Users/amasoktest3/Gemfile

するとGemfileファイルが出来上がると思います。

Gemfile

1
2
3
4
# A sample Gemfile source "https://rubygems.org" # gem "rails"

今はせっかくmiddlemanをやってるので、middlemanをインストールしてみましょう。

Gemfile

1
2
3
4
# A sample Gemfile source "https://rubygems.org" gem "middleman"

上記のように変更して、

terminal

1
$ bundle install --path vendor/boudle

上記コマンドでmiddlemanがインストールされます。

また、middlemanに必要な関連ファイルもすべてインストールされます。
それらはすべて、vendor/bundle配下に格納されています。
しかし、vendor/bundle配下はパスが通っていません。どう使うか?
(パスを通すって何?って人は別で調べてください。)

そこで、一番はじめに書いた"bundle exec"が登場します。

terminal

1
$ bundle exec middleman init .

“init ."のドットはカレントディレクトリをさします。 今回でいうところの"project"です。

後はmiddlemanコマンドの前に"bundle exec"を全部つければ middlemanの導入と同じにすればいいです。

また、rubyをrbenvでインストールしている方は"binstubs"てのを使って煩わしい"bundle exec"を省略できちゃうみたいです。

試してみてうまくいきそうなら、また別記事で書きます。

middlemanの導入

2013/11/25 12:47 tags: middleman, このエントリーをはてなブックマークに追加

前提知識

  • 簡単なコマンドライン操作ができる
  • rubyを自分のPCにインストールするこができる
  • gem,bundle installができる

実行環境

  • mac(Mountain Lion)
  • ruby(2.0.0p247)
  • middleman(3.2.0)

※windowsだとあんまりうまく動かないという話をよく目にします。

middlemanのインストール

gemからインストールするだけです。

terminal

1
$gem install middleman

middlemanのコマンド

1
2
3
4
5
6
7
middleman build [options] # 最終成果物を生成する middleman console [options] # irbが立ち上がり、rubyを直書きして実行できたり middleman extension NAME [options] # middlemanのプラグイン?をつくる時のやつ? middleman init NAME [options] # プロジェクトを生成する middleman server [options] # 開発時にプレビューする用のサーバをたてる middleman upgrade # bundle installされたものをアップグレードする middleman version # バージョンを表示

middleman init の実行

terminal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
> middleman init testProject create testProject/Gemfile run bundle install from "." Fetching gem metadata from http://rubygems.org/........ Fetching gem metadata from http://rubygems.org/.. Resolving dependencies... Using i18n (0.6.5) Using multi_json (1.8.2) Using activesupport (3.2.15) ・ ・ ・ ・bundle install の実行 ・ ・ ・ Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed. create testProject/.gitignore create testProject/config.rb create testProject/source/index.html.erb create testProject/source/layouts/layout.erb create testProject/source/stylesheets create testProject/source/stylesheets/all.css create testProject/source/stylesheets/normalize.css create testProject/source/javascripts create testProject/source/javascripts/all.js create testProject/source/images create testProject/source/images/background.png create testProject/source/images/middleman.png

bundle installが実行された後middlemanに必要なプロジェクトが生成されます。

よく触るファイルとディレクトリ

  • config.rb
  • sourceディレクトリ配下全部

config.rbで設定を行った後はsourceの中をごりごりいじっていきます。

middleman server の実行

上記のようにプロジェクトを作ったら、まずは開発環境でプロジェクトを実行してみる。

terminal

1
$ middleman server #middleman s でも可

http://localhost:4567/

middleman serverが立ち上がっている状態で上記URLを確認してみましょう。

画像

上記のように表示されたらOKです。

middleman build の実行

webサイトが完成したらこのコマンドで静的ファイルを生成します。

terminal

1
2
3
4
5
6
7
8
9
10
11
12
13
$ middleman build #middleman b でも可 WARN: Unresolved specs during Gem::Specification.reset: activesupport (~> 3.2.6) listen (~> 1.1) WARN: Clearing out unresolved specs. Please report a bug if this causes problems. create build/images/background.png create build/images/middleman.png create build/javascripts/all.js create build/stylesheets/normalize.css create build/stylesheets/all.css create build/index.html

なんかいろいろ作られてます。(WARNはほっといてください。めんどいだけです) このbuild配下を全部サーバにあげればwebサイトの完成。

こういう構造になってます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
. ├── Gemfile ├── Gemfile.lock ├── build #ここのファイルをサーバにUP │   ├── images │   │   ├── background.png │   │   └── middleman.png │   ├── index.html │   ├── javascripts │   │   └── all.js │   └── stylesheets │   ├── all.css │   └── normalize.css ├── config.rb └── source ├── images │   ├── background.png │   └── middleman.png ├── index.html.erb ├── javascripts │   └── all.js ├── layouts │   └── layout.erb └── stylesheets ├── all.css └── normalize.css

感想

ほんとrailsっぽいって思った。(あんまりrails知らないけど)

基本的な仕組みはそんなに難しくないし、練習用にどんどん書いていこうと思う。
ちなみに、今回この記事を書く上で一番はまった点は、このブログの記事がmiddlemanを利用した初めての画像投稿となった点でした。

markdownでの画像の投稿の仕方がわからない。
通常道理に記述したらどのようなパスになるのかがわからない。
等々まだまだ初心者丸出しですが、まがりなりにもブログを書くところまで至ったので、それができるようになるところまでは今後も書いていきたいと思います。

middlemanとは

2013/11/24 00:55 tags: middleman, このエントリーをはてなブックマークに追加

middlemanについて解説

markdwonやblogを書く作業に慣れるために、とりあえずmiddlemanについてちょっとずつ解説していこうと思います。

middlemanは一言で書いてしまうとruby製の静的サイトジェネレーターです。
ローカル内でhtml,css,javascriptを生成します。 本ブログはmiddlemanを使って静的なファイルで構成いますが、ブログとしてはとてもマイナーなやり方だと思います。

メリット

  • 運用するサーバにDBやruby,php等のプログラミング言語がいらない
  • つまり安いレンサバでいいのでコストパフォーマンスがいい
  • SQLインジェクション等アプリケーションレイヤーのサーバ攻撃には強い
  • 軽くなる(と思う)
  • github pageが使える
  • バージョン管理もしやすい
  • サイトの引っ越しもしやすい

デメリット

  • 単純にブログを始めようとかwebサイト作ってみようという人にとっては敷居が高い。
  • テーマが少ない。てか、ない(テーマが豊富なツールがいいならoctopressをおすすめします)

僕がmiddlemanを使っている理由

  • 流行ってるみたいだから( ・ㅂ・)و ̑̑

このgithub pageでブログ作るってのが流行ってるっぽいというのが僕がこのサイトを作った最大の理由です。
むしろ、メリットデメリットは( ´_ゝ`)フーンぐらいに流し見してとりあえずやってみた感が強いです。

次回からは、実際に導入編を書いていきたいと思います。