Jekyllは、静的なウェブサイトを生成するための人気のあるツールであり、特にブログやドキュメンテーションサイトに適しています。この記事では、Jekyllを使用して自分のブログを作成する方法を、初心者向けに段階的に解説します。
Jekyllとは？
Jekyllは、Rubyで書かれた静的サイトジェネレーターです。これを使用すると、Markdown形式で書かれたコンテンツからHTMLページを生成できます。Jekyllは主にGitHub Pagesと統合されており、無料でホスティングできるため、個人ブログやポートフォリオサイトに最適です。
Jekyllを使う準備
Jekyllを使い始めるには、いくつかの準備が必要です。
1. RubyとBundlerのインストール
JekyllはRubyで動作するため、まずはRubyをインストールする必要があります。公式サイトから自分のOSに適したRubyをインストールしてください。その後、BundlerというRubyの依存管理ツールをインストールします。BundlerはJekyllのインストールと依存関係の管理を簡単にしてくれます。
2. Jekyllのインストール
Bundlerがインストールできたら、Jekyllをインストールします。以下のコマンドを実行することで、Jekyllを簡単にインストールできます。
これで、Jekyllを使用する準備が整いました。
Jekyllで新しいサイトを作成する
Jekyllをインストールした後、新しいサイトを作成する手順を紹介します。
1. 新しいサイトの作成
まず、Jekyllのコマンドを使って新しいサイトを作成します。以下のコマンドを実行して、my-blogという名前の新しいサイトを作成します。
これで、my-blogというディレクトリが作成され、その中に基本的なJekyllサイトの構造が作られます。
2. サイトのビルド
新しいサイトが作成できたら、次にサイトをビルドしてローカルで確認することができます。以下のコマンドを実行して、ローカルサーバーを起動します。
これで、http://localhost:4000にアクセスすると、Jekyllで作成したサイトが表示されます。
Jekyllのファイル構成
Jekyllサイトのディレクトリ構成は以下のようになります。
-
_config.yml: サイトの設定ファイルです。サイトの名前やURL、テーマなどを設定します。 -
_posts/: ブログの投稿が格納されるディレクトリです。投稿はMarkdown形式で書きます。 -
_layouts/: サイトのレイアウトテンプレートが格納されるディレクトリです。例えば、default.htmlやpost.htmlなどがあります。 -
_includes/: 他のテンプレートファイルをインクルードするためのディレクトリです。ヘッダーやフッターなどの共通部分を管理します。 -
index.md: サイトのホームページに相当するMarkdownファイルです。
投稿の作成
Jekyllでブログ投稿を作成するのは簡単です。投稿はMarkdown形式で書き、ファイル名は日付とタイトルに基づいて命名します。例えば、2025年4月28日に「My First Post」というタイトルの投稿を作成する場合、以下のようにファイルを作成します。
投稿ファイルの例は以下の通りです。
Jekyllのカスタマイズ
Jekyllは非常に柔軟で、テーマやプラグインを使って簡単にサイトをカスタマイズできます。
1. テーマの変更
_config.ymlファイルでテーマを設定することで、Jekyllサイトの外観を簡単に変更できます。GitHub Pagesで利用できるテーマが多数公開されており、theme:の部分を設定するだけで簡単に切り替えが可能です。
例えば、minimalというテーマに変更する場合、_config.ymlに次のように記載します。
2. プラグインの利用
Jekyllでは、さまざまなプラグインを利用して機能を追加できます。例えば、SEO対策やRSSフィードの生成などを行うプラグインが存在します。Gemfileにプラグインを追加して、bundle installでインストールします。
まとめ
Jekyllを使えば、静的なブログやウェブサイトを簡単に作成できます。RubyとBundlerのインストールから始まり、新しいサイトの作成、投稿の作成、カスタマイズ方法まで、基本的な流れを理解することができました。次回は、Jekyllでさらに高度なカスタマイズを行う方法について詳しく解説します。