プログラミング

Jekyllでブログを作成する

Jekyllを使ってブログを運営する方法について、完全かつ包括的に解説するシリーズの第2部では、Jekyllの設定や実際の運用についてさらに深く掘り下げていきます。前回の記事では、Jekyllの基本的なインストール方法や簡単な設定を紹介しましたが、今回は実際にブログを構築するために必要なステップ、そしてカスタマイズやデプロイの方法を詳しく説明します。

Jekyllのセットアップとディレクトリ構造

まず、Jekyllをインストールしてプロジェクトを作成する際に重要なのが、ディレクトリ構造です。Jekyllは、特定のファイルやディレクトリを必要とします。これらは、ブログを正常に動作させるために必須です。

1. ディレクトリ構造の理解

Jekyllのプロジェクトは、基本的に以下のようなディレクトリ構造になります:

perl
my-blog/ ├── _config.yml ├── _posts/ ├── _drafts/ ├── _site/ ├── assets/ ├── index.md └── about.md
  • _config.yml:Jekyllの設定ファイル。ブログの基本情報(タイトルやURLなど)をここで設定します。

  • _posts/:ブログ記事を格納するディレクトリです。記事は「YYYY-MM-DD-title.md」というフォーマットで作成します。

  • _drafts/:公開前の記事を保存するディレクトリです。ここに保存された記事は公開されません。

  • _site/:Jekyllが生成した静的なファイルが格納されるディレクトリです。このディレクトリは手動で編集しないようにしましょう。

  • assets/:CSS、JavaScript、画像などの静的ファイルを格納します。

  • index.md:ホームページとして表示されるファイルです。

  • about.md:ブログについてのページなど、静的なコンテンツを作成するためのファイルです。

2. 設定ファイルの編集

_config.ymlファイルは、Jekyllブログの中心的な設定ファイルです。このファイルには、サイトの基本的なメタデータを設定します。以下は、基本的な設定例です:

yaml
title: My Jekyll Blog description: 私のJekyllブログです author: あなたの名前 url: "https://example.com" baseurl: "" theme: "minima"
  • title:サイトのタイトル

  • description:サイトの説明

  • author:ブログの著者

  • url:サイトのURL

  • baseurl:サイトのベースURL(サブディレクトリを使用している場合に設定)

  • theme:使用するテーマ(例えば、minima

ブログ記事の作成

ブログ記事は、_posts/ディレクトリ内に保存されます。各記事は「YYYY-MM-DD-title.md」の形式でファイル名を設定します。例えば、2025年4月28日に投稿する記事の場合、ファイル名は「2025-04-28-my-first-post.md」となります。

記事のヘッダーには、YAML形式でメタデータ(タイトルや日付など)を記述します。以下はその例です:

yaml
--- layout: post title: "最初の投稿" date: 2025-04-28 categories: jekyll update tags: [Jekyll, ブログ] ---
  • layout:使用するレイアウト(postが一般的)

  • title:記事のタイトル

  • date:記事の公開日

  • categories:記事のカテゴリー

  • tags:記事に関連するタグ

ヘッダーの後には、記事の内容をMarkdownで書きます。たとえば:

markdown
# Jekyllでブログを作ろう Jekyllは静的サイトジェネレーターで、GitHub Pagesとも連携しやすく、非常にシンプルで高速なブログを作成できます。 ## Jekyllの特徴 - シンプルな設定 - Markdownをサポート - GitHub Pagesと連携 Jekyllでブログを始めるのは非常に簡単です。

これで、Jekyllが生成するブログの投稿が完成します。

テーマのカスタマイズ

Jekyllはテーマを使ってブログの見た目を変更することができます。デフォルトで提供されているテーマを変更するには、_config.ymlファイルのthemeの部分を変更します。例えば、minimaテーマを使う場合、次のように設定します:

yaml
theme: minima

さらに、テーマをカスタマイズするために、テーマのCSSファイルやテンプレートファイルを編集することもできます。例えば、assets/cssディレクトリに独自のスタイルを追加することができます。

Jekyllのビルドとプレビュー

Jekyllブログをローカルでプレビューするには、ターミナルで以下のコマンドを実行します:

bash
bundle exec jekyll serve

これにより、ローカルサーバーが起動し、http://localhost:4000でブログを見ることができます。記事を編集した後は、再度このコマンドを実行して、変更を反映させます。

GitHub Pagesへのデプロイ

JekyllはGitHub Pagesと簡単に統合できるため、公開するのが非常に簡単です。以下の手順で、JekyllサイトをGitHub Pagesにデプロイできます:

  1. GitHubで新しいリポジトリを作成します。

  2. ローカルのJekyllプロジェクトをGitHubリポジトリにプッシュします。

  3. GitHubのリポジトリ設定で、GitHub Pagesを有効にします。

これで、https://username.github.io/repository-name というURLで、Jekyllブログがインターネット上に公開されます。

結論

Jekyllは、シンプルで強力な静的サイトジェネレーターです。今回の記事では、Jekyllを使ってブログを作成するための基本的な手順、記事の作成方法、テーマのカスタマイズ方法、そしてGitHub Pagesへのデプロイ方法について説明しました。次回は、さらに進んだカスタマイズ方法やプラグインの導入について詳しく解説する予定です。

Back to top button