制作・開発

マークダウンを静的ページに変換してくれるJekyll

Jekyllとは

Jykill

Jekyll(ジキル)とは、データベースが不要なのにブログライクな静的サイトをビルドできる、RubyGemsで配布されているRuby製のツールです。
テキストファイルがそのまま記事化するようなイメージ。もう随分ご無沙汰ですが、Movable Typeの再構築に通じるものを感じました。

そもそもを知らなかったのですが、Github PageはJekyllで動いているそうで、GitHubでデプロイすることできるそうです。

Jekyllの特徴

HTMLとCSSに通じる人であれば、比較的簡単に始められてカスタムもできます。

WordPressを運営しているとわかると思いますが、コメントモデレーションやアップデートが不必要なのは、静的サイトならでは。シンプルなコンテンツ発信ができるのが特徴的です。

サイト内で使い回すテンプレートや、バナーやグローバルナビなどの共通要素のHTMLはインクルードし、コンテンツ(ブログ含め)の記事はMardownで記述できて、最終的に静的WEBサイトを構成するファイル一式を出力してくれます。
それらのファイルをサーバに置くだけでいいので、CGIやPHP、データベースなどが使えないレンタルサーバでも動作するのが特徴でしょうか。

ちょっと前に灰色ハイジさんのポートフォリオがMarkdownで作成されていると伺い、その元々のアイデアがFront Matterだったところから。
Jekyllを初めて触ってみました。

1分でローカルサーバまで立ち上がる

クイックスタートで紹介されている通りなんですが、、
ターミナルもしくはコマンドプロンプトでjekyllインストールします。

gem install bundler jekyll

新しいサイトを作成

jekyllのインストールが済んだら、jekyll newのコマンドで新しくサイトを作成します。ここでは、hello-siteという名前にしてみました。
以下のコマンドを入力後、しばらくするとhello-siteというフォルダが作成され、サイトができあがってきます。

jekyll new hello-site

ローカルサーバ立ち上げ

サイトができたといっても今の状態ではどんなものか確認できないので、ローカルサーバを立ち上げます。
先程新しくつくったサイトディレクトリに移動してから、

cd hello-site

ローカルサーバを立ち上げます。

bundle exec jekyll serve

ブラウザでhttp://localhost:4000 みてみると、以下のようなサイトができあがってます。はー、便利。

その他、jekyllのコマンドはCommand Line Usageに掲載されています。