Jekyllで静的サイト制作

20130825 0

Jekyllで静的サイト制作

以前別のブログで「Jekyllでブログ制作」という記事を書いて紹介したことのある「 Jekyll 」を再度紹介します。

タイトルに「Simple, blog-aware, static sites」と書かれているように、ルールに従って書かれたテキストファイルやMarkdown形式のテキストファイルをHTMLに変換してくれるという優れもの!!

何故、いきなりJekyllに注目したのかというと、軽いサイトの制作で「WordPress等のCMSを使うまでもないけれども、テンプレートは使いたいな。CMSで書きだしたHTMLをFTPするような方法でサイト制作しようか?」と思った瞬間に「Jekyllがあるじゃん!!」と思い出したわけです。

まだ採用するかどうか迷っているところですが、別のサイトでも使った経験はあるので、使い方を再度まとめてみようと思います。

インストール方法

gemが入っている環境であれば

だけでインストールされます。

プロジェクトの制作

で「xxx」というプロジェクトが制作されます。サイト制作の作業は以降はこの「xxx」フォルダの中でおこないます。

フォルダ構成は以下のようになります。

静的ページの生成

「_posts」フォルダ以下に「 YEAR-MONTH-DAY-title.MARKUP 」(YEAR-MONTH-DAY-title.md)形式のファイル名で記事を制作します。これはテキストファイルかMarkdownで書きます。

記事を書き終えたら以下のコマンドを実行して下さい。HTMLファイルが生成されます。

ページの書式

ページを正確に生成するためのルールとしては、記事の書かれたテキストファイルの先頭に「—」を2行書く必要があります。この「—」〜「—」の間に書かれた内容をベースにJekyllはHTMLファイルを生成します。

テンプレートの制作

テンプレートは「_layouts」フォルダに保存されているファイルを元に制作します。

他の部品を読み込むには以下の様な書式で読み込みを指定することができます。この場合のファイルは「_includes」フォルダに入れておいて下さい。

FTP

jekyll buildで作られたHTMLファイルは「_site」フォルダにつくられるので、このファイル群をFTPすれば静的サイトとして公開される…はず!!

実際こういった使い方は自分たちでもまだおこなっていないので、模索しながらになりますがCMSを使う程でもないけれどテンプレートを使ったサイトを作りたいという時に Jekyll が使えるかもしれないですね。

必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意
コグレマサト するぷ
インプレスジャパン
売り上げランキング: 1,536
たのしいRuby 第4版
たのしいRuby 第4版
posted with amazlet at 13.08.25
高橋 征義 後藤 裕蔵
ソフトバンククリエイティブ
売り上げランキング: 25,159