feed

2013年11月13日, 編集履歴

Jekyllを使ってウェブサイトを再構築

 Jekyllという静的ウェブサイト&ブログ生成システムとGitHub Pagesを用いて、ウェブサイトを再構築しました。
 以前からウェブページのホスティングにはGitHubが提供するGitHub Pagesというホスティングサーヴィスを利用してローカルで作成したHTML等をアップロードしていましたが、今回はそれに加えてJekyllという静的ウェブサイト&ブログ生成システムを用いました。

 GitHub Pagesでは、完全なウェブページをそのままアップロードする他にも、Jekyllというシステムを用いる方法が提供されています。
 JekyllはテンプレートとなるHTMLのガワを用意しておき、Markdown等を用いたコンテンツ文書を(HTML断片に変換して)流し込むことで静的なウェブページを生成します。ブログ等のように同じデザインのページを多く生成する必要がある場合に役立ちます。
 GitHub PagesのホスティングサーヴィスはJekyllを内蔵しており、構成ファイルをリポジトリィにプッシュすることで、自動的に静的なウェブサイトを生成してくれます。

 Jekyllを使ってウェブサイトの再構築をしようと思ったきっかけは、ブログを以前から使用していたGoogleのBloggerから移行し、新しく別のブログを始めたかったからです。Bloggerから離れたい理由はGoogleへの不信感ですが、それ以外にもブラウザ上のウェブインターフェイスで文章を書くのがやりづらいという理由もあります。しょーもないことをたくさん書いてある過去のブログ記事を抹消したいという思いもあります(なので旧ブログはそのうち閉鎖します)。
 他のよくあるブログサーヴィスに移行したところで、ウェブインターフェイスからは離れられません。であれば、元々利用していたGitHub Pagesが内蔵するJekyllを用いてブログを書こう、ブログをJekyllで書くならばウェブサイトの方もJekyllで管理しよう、というのが今回の再構築の理由です。

余談

 Jekyllの使い方を紹介しているページ等では、コンテンツ文書をMarkdown等の軽量マークアップ言語で書き、それをテンプレートに流し込んでいます。テンプレートではHTMLのガワを記述し、複数のテンプレート間で共通する構成要素があればそれを部品化してincludeしています。それがJekyllの基本的な使い方なので、当然そのように書きます。
 ブログ記事以外のページを書くときに、そこではたと困りました。テンプレートに流し込むシンプルな構成のブログ記事であればMarkdownで書けますが、ペラいちのページを単純なMarkdownの流し込みで表現するのは難しいです。Markdownはシンプルな構成の文書を書く際には有用ですが、HTMLの表現力を100%使うことはできません。
 異なるデザインの複数ページを作る場合(このウェブサイトの場合は各アプリケーションの紹介ページのような)はテンプレートを使い回しにくいので、各ページごとに専用のテンプレートを作成しなければならないのだろうか? それとも完全にふつうのHTMLを書くしかないのだろうか?

 悩むことしばし。

ヘウレーカ! JekyllでコンテンツをHTMLで書いて良いことと、レイアウト側だけではなくコンテンツ側でも include が使えることに気がついて、蒙が啓けた気がする

— Genji (@genji_tw) November 7, 2013

 コンテンツ文書を書くのにMarkdownではなく、HTMLが使えることに気づきました。さらに、includeコマンドをテンプレート文書だけではなく、コンテンツ文書にも書くことができることに気付き、問題は解決しました。
 通常はテンプレート内で使うことが多いであろうincludeコマンドをHTMLで書くコンテンツ文書内でも多用して、アプリケーション紹介ページ等を作成しました。このウェブサイトはGitHub Pagesでホスティングしているので、リポジトリィを見れば、どういう設定でどういう構成になっているのかが解ります。