blog

初めての Middleman シリーズ初めてのMiddleman:Middleman-blogのシングルブログを前提としたSkeletonを作った

    • Ryuichi Nonaka
    この記事は書かれてから1年以上経過しており、内容が古い場合があります。

    個人用にシングルブログを前提とした真っ新なSkeletonMiddleman Blog Skeletonを作った。少し前に作ったMiddleman SkeletonをベースにMiddleman-blogを入れて、WordpressやJekyll等と同様にトップページがアーカイブとなるようになっている。

    使い方

    まずはSkeletonのダウンロード。

    $ cd ~/.middleman
    $ git clone https://github.com/nukos/middleman-blog.skeleton.git
    Cloning into 'middleman-blog.skeleton'...
    remote: Counting objects: 24, done.
    remote: Compressing objects: 100% (15/15), done.
    remote: Total 24 (delta 2), reused 24 (delta 2), pack-reused 0
    Unpacking objects: 100% (24/24), done.
    Checking connectivity... done.
    

    スケルトンからプロジェクトを作成する。

    $ middleman init text.middleman-blog.skeleton --template=middleman-blog.skeleton
          create  text.middleman-blog.skeleton/Gemfile
             run  bundle install from "."
    Fetching gem metadata from https://rubygems.org/.........
    Fetching version metadata from https://rubygems.org/...
    Fetching dependency metadata from https://rubygems.org/..
    Resolving dependencies...
    Using i18n 0.7.0
    Using json 1.8.2
    Using minitest 5.5.1
    Using thread_safe 0.3.4
    Using tzinfo 1.2.2
    Using activesupport 4.1.9
    Using bundler 1.8.3
    Using hitimes 1.2.2
    Using timers 4.0.1
    Using celluloid 0.16.0
    Using chunky_png 1.3.4
    Using coffee-script-source 1.9.1
    Using execjs 2.3.0
    Using coffee-script 2.3.0
    Using multi_json 1.10.1
    Using sass 3.4.13
    Using compass-core 1.0.3
    Using compass-import-once 1.0.5
    Using rb-fsevent 0.9.4
    Using ffi 1.9.6
    Using rb-inotify 0.9.5
    Using compass 1.0.3
    Using eventmachine 1.0.7
    Using http_parser.rb 0.6.0
    Using em-websocket 0.5.1
    Using erubis 2.7.0
    Using tilt 1.4.1
    Using haml 4.0.6
    Using hike 1.2.3
    Using uber 0.0.13
    Using hooks 0.4.0
    Using kramdown 1.6.0
    Using listen 2.8.5
    Using padrino-support 0.12.4
    Using padrino-helpers 0.12.4
    Using rack 1.6.0
    Using rack-test 0.6.3
    Using thor 0.19.1
    Using middleman-core 3.3.10
    Using sprockets 2.12.3
    Using sprockets-helpers 1.1.0
    Using sprockets-sass 1.3.1
    Using middleman-sprockets 3.4.2
    Using uglifier 2.7.1
    Using middleman 3.3.10
    Using rack-livereload 0.3.15
    Using middleman-livereload 3.1.1
    Bundle complete! 4 Gemfile dependencies, 47 gems now installed.
    Use `bundle show [gemname]` to see where a bundled gem is installed.
          create  text.middleman-blog.skeleton/.gitignore
           exist  text.middleman-blog.skeleton
          update  text.middleman-blog.skeleton/.gitignore
          create  text.middleman-blog.skeleton/.ruby-version
          update  text.middleman-blog.skeleton/Gemfile
          create  text.middleman-blog.skeleton/README.md
          create  text.middleman-blog.skeleton/config.rb
          create  text.middleman-blog.skeleton/data/.gitkeep
          create  text.middleman-blog.skeleton/source/articles/2015-03-03-example-01.html.md
          create  text.middleman-blog.skeleton/source/articles/2015-03-03-example-02.html.md
          create  text.middleman-blog.skeleton/source/articles/2015-03-03-example-03.html.md
          create  text.middleman-blog.skeleton/source/articles/2015-03-03-example-04.html.md
          create  text.middleman-blog.skeleton/source/articles/2015-03-03-example-05.html.md
          create  text.middleman-blog.skeleton/source/articles/2015-03-03-example-06.html.md
          create  text.middleman-blog.skeleton/source/assets/css/style.css.scss
          create  text.middleman-blog.skeleton/source/assets/fonts/.gitkeep
          create  text.middleman-blog.skeleton/source/assets/images/.gitkeep
          create  text.middleman-blog.skeleton/source/assets/js/script.js
          create  text.middleman-blog.skeleton/source/calendar.html.erb
          create  text.middleman-blog.skeleton/source/feed.xml.builder
          create  text.middleman-blog.skeleton/source/index.html.erb
          create  text.middleman-blog.skeleton/source/layouts/layout.erb
          create  text.middleman-blog.skeleton/source/layouts/post.erb
          create  text.middleman-blog.skeleton/source/partials/.gitkeep
          create  text.middleman-blog.skeleton/source/tag.html.erb
          create  text.middleman-blog.skeleton/source/templates/.gitkeep
    

    最後に、ダウンロードしきれていないGemをダウンロードさせる。

    $ bundle install
    

    これで$ middleman serverできるようになります。静的なサイトだけではなくブログも作れるようになりますね。そのうちJekyllからの移行なんかも試してみたいと思います。

    次回:初めてのMiddleman:Middleman-blogでマルチブログを試してSkeletonを作った

    シリーズ

    1. 初めてのMiddleman:rbenv, bundler 環境でMiddlemanを使ったHello World
    2. 初めてのMiddleman:レイアウト機能でレイアウトとコンテンツを分離する
    3. 初めてのMiddleman:パーシャルを使ったコンテンツのモジュール化
    4. 初めてのMiddleman:SCSSのコンパイルとテンプレートの基礎
    5. 初めてのMiddleman:Sass MixinライブラリのBourbon, Neatを導入してみる
    6. 初めてのMiddleman:データファイルとデータファイルを使った動的ページ生成
    7. 初めてのMiddleman:サイトにブログ機能を追加する
    8. 初めてのMiddleman:Amazon S3にビルドされたファイルを同期する
    9. 初めてのMiddleman:HTML/CSS/JS/画像をビルド時に圧縮する
    10. 初めてのMiddleman:設定について
    11. 初めてのMiddleman:静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ
    12. 初めてのMiddleman:Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について
    13. 初めてのMiddleman:Helperを使ってGravatarのアイコンを表示する
    14. 初めてのMiddleman:アセットパイプラインを使った外部アセットファイルの読み込みと結合
    15. 初めてのMiddleman:Bowerを使ってjQueryなどのライブラリをロードする
    16. 初めてのMiddleman:スケルトンを自作する方法
    17. 初めてのMiddleman:Middleman Blogの記事データを使いやすく管理する方法
    18. 初めてのMiddleman:Middleman-blogのシングルブログを前提としたSkeletonを作った
    19. 初めてのMiddleman:Middleman-blogでマルチブログを試してSkeletonを作った
    20. 初めてのMiddleman:Markdown EngineをkramdownからRedcarpetに切り替える
    21. 初めてのMiddleman:RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト
    22. 初めてのMiddleman:Middleman-Syntaxを使ったシンタックスハイライト
    23. 初めてのMiddleman:Middleman-Blogで記事毎に画像を管理する方法
    24. 初めてのMiddleman:Gulpを使ってサムネイル画像を生成する
    25. 初めてのMiddleman:Middleman-OGPのOGP画像指定を相対パスで設定する
    26. 初めてのMiddleman:Middleman-OGPでMiddleman-BLogにOGPを設定する
    27. 初めてのMiddleman:Middleman-Titleでタイトルタグを手軽に設定する
    28. 初めてのMiddleman:多言語化 - 言語ファイルの作成とヘルパーの埋め込み
    29. 初めてのMiddleman:Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法
    30. 初めてのMiddleman:Bowerで管理されているフォントファイルをインポートする

    コメント・フィードバック