第1章 セクション3　Jekyllによるビルドとは

ディレクトリ_site

前回、bundle exec jekyll serveで、ソースをビルドし、ローカル・サーバを起動するところまでやりました。 ところで、ソースのビルドの前後で、my-blogディレクトリにある変化があったことに気づいたでしょうか。 それは、新たに_siteというディレクトリができたということです。

Jekyllはソースディレクトリのファイルから、ウェブページを組み立て（これをビルドといいます）、作られたリソース（HTMLやCSS、画像など）を_siteに保存していたのです。 ビルド前のファイルを「ソースファイル」、ビルド後のファイルを「生成ファイル」といいます。 ユーザが編集するのはソースファイルの方です。 逆に、ユーザが_site内を編集することはありません。 ビルドの直前に、_site内のすべてのファイルは削除されるからです。

ソースファイルと生成ファイルのパスを比べてみましょう。

ソースファイル 生成ファイル
404.html _site/404.html
Gemfile 生成されない
Gemfile.lock 生成されない
_config.yml 生成されない
_posts/2026-01-26-welcome-to-jekyll.markdown _site/jekyll/update/2026/01/26/welcome-to-jekyll.html
about.md _site/about/index.html
index.md _site/index.html

この表でソースファイルと生成ファイルを比較してみると、次のことがわかります。

ファイルの変換

ビルドによるファイルの変換について、さらに見ていきましょう。

変換は、ファイルの種類によって異なります。

ファイルの種類 変換
Markdown Liquidの展開=>MarkdownからHTMLへ変換
HTML Liquidの展開
SCSS CSSへ変換
その他（画像など） 変換せずそのまま出力

この表からJekyllのソースファイルを書くには、次のことの理解が望ましいことがわかります。

Liquidについては、セクション15で学習します。 MarkdownとSCSSについては、このチュートリアルではとくに説明しません。 必要に応じ、インターネット上の解説サイトを参照してください。

テーマ

前項で述べたように、Jekyllのソースファイルを書くには、「Liquid」「Markdown」「SCSS」の理解が必要ですが、それらの理解が十分でなくてもある程度ソースコードを書くことができます。 それは、Jekyllにはテーマというものがあり、それがLiquidやSCSSの複雑な部分を肩代わりしてくれ、開発の大きな手助けになるからです。

今回作成しているmy-blogではMinimaというテーマを使います。 MinimaはJekyllのデフォルトのテーマで、基本的な機能に限ったシンプルなものです。 Jekyllの基本が理解できたら、テーマの機能についても学習してみてください。 その際は、まずはシンプルなMinimaのソースを読むことから始めると良いと思います。

ところで、GitHub Pagesで使えるテーマは他にもあり、GitHub Pagesのドキュメントページで公開されています。 異なるテーマを使うと、レイアウトが変わるだけでなく、サイトの構成も変わります。 サイト構築の実践段階では、いろいろなテーマを試してみると良いでしょう。