はちびる日記

Tag: 'middleman'

Middleman + Foundation + Amazon S3 でのBlogサイト構築(9)Amazon S3へのデプロイ

前回まででBlogサイトの作成は完了したので、 今回はmiddlemanシリーズの最終回として作成したBlogサイトをAmazon S3のStatic Website Hostingでホストする方法を書きます。

S3 Static Website Hosting

イントロダクションでも触れましたが、Amazon S3はStatic Website Hostingの機能を使うことでS3が持つ堅牢性やスケーラビリティをそのままに、S3に保存したファイルを簡単にWebサイトとして公開すること...

Read more…

Middleman + Foundation + Amazon S3 でのBlogサイト構築(8)Syntax Highlightの機能の追加

前回は記事の検索機能とコメント機能を追加する方法について書きました。今回Syntax Highlightの機能を追加して、Blogサイトは完成です。

Syntax Highlightの追加

middleman-syntaxというmiddleman公式の拡張があるので、これを使います。 Gemfilemiddleman-syntaxを追加して、bundle installを実行します。

source 'http://rubygems.org'

gem "middleman", "~>...

Read more…

Middleman + Foundation + Amazon S3 でのBlogサイト構築(7)Blog記事の検索機能とコメント機能の追加

前回はFoundationを使ってBlogサイトのレイアウトを作成する方法について書きました。Blogサイトとしては記事の検索機能とコメント機能も欲しいところなので、今回はこれらの追加方法について書いていきます。

Blog記事の検索

検索と言えば、、、ということで、今回はGoogleカスタム検索を使うことにしました。これを使うと非常に簡単にサイト内検索機能を導入することができます。(要Googleアカウント)

まず、Googleカスタム検索のページにアクセスします。

▼ [Add]...

Read more…

Middleman + Foundation + Amazon S3 でのBlogサイト構築(6)Blogサイトのデザイン

前回はmiddleman本体やmiddlemanのblog拡張で使える便利なテンプレートヘルパについて記載しました。 前回まででBlogサイト構築の下準備が整ったので、いよいよというかようやくというか、今回はFoundationを使ってサイトのデザインを作成する部分について記載します。

Foundationとは

イントロダクションでも触れましたが、FoundationはレスポンシブWebデザインにしています。対応のCSSフレームワークです。一応スマホ対応もしたかったので、この分野ではBootstrap

Read more…

Middleman + Foundation + Amazon S3 でのBlogサイト構築(5)テンプレートヘルパの確認

前回はmiddlemanやBlogの設定について記載しました。これで下準備は整ったのでBlogサイトの作成(htmlやcssのコーディング)に入りたいところですが、その前にmiddleman本体やmiddlemanのblog拡張で使える便利なテンプレートヘルパについて確認しておきます。

middleman標準ではlink_toform_tagなどRailsのビューヘルパでお馴染みのもの(と同等のもの)が使えるようになっています。(正確にはこれらのヘルパはPadrinoによってmiddleman...

Read more…

© Yutaka Yawata 2014-2015. All right reserved.