Jekyll（ジキル）とは？無料でブログやWebサイトを作れる最強ツールの完全活用ガイド

Web

「WordPressは重いし複雑…でも、HTMLを手書きするのも大変…」そんな悩みを解決するのがJekyll（ジキル）です。

Jekyllは、テキストファイルから美しいWebサイトを自動生成してくれる「静的サイトジェネレーター」という魔法のようなツール。しかも、GitHubが開発しているので、GitHub Pagesと組み合わせれば完全無料でWebサイトを公開できるんです。

データベース不要、サーバー管理不要、それなのにブログ機能も備えている。まさに、シンプルさとパワフルさを兼ね備えた理想的なツールなんですよ。

この記事では、Jekyllの基本から応用まで、プログラミング初心者でもWebサイトが作れるように詳しく解説していきます。

スポンサーリンク

1. Jekyllの基本概念：静的サイトジェネレーターって何？

動的サイトと静的サイトの違い

まず、Webサイトには大きく分けて2種類あります。

動的サイト（WordPress、Drupalなど）：

訪問者がアクセス
    ↓
サーバーがデータベースから情報を取得
    ↓
PHPなどでHTMLを生成
    ↓
ブラウザに表示

メリット：リアルタイムで更新、ユーザーごとに内容変更可能
デメリット：サーバー負荷が高い、セキュリティリスク、管理が複雑

静的サイト（Jekyllで生成）：

事前にHTMLファイルを生成
    ↓
訪問者がアクセス
    ↓
HTMLファイルをそのまま配信
    ↓
ブラウザに表示

メリット：超高速、セキュア、管理が簡単、無料ホスティング可能
デメリット：リアルタイム更新は苦手、ユーザー認証などは別途必要

Jekyllが選ばれる5つの理由

1. 完全無料で運用可能

  • GitHub Pagesで無料ホスティング
  • 独自ドメインも設定可能
  • SSL証明書も無料

2. 圧倒的な表示速度

  • データベースアクセスなし
  • 純粋なHTMLを配信
  • CDNとの相性抜群

3. セキュリティが強固

  • PHPやデータベースの脆弱性なし
  • ハッキングのリスクが極めて低い
  • 静的ファイルだけなので安全

4. Markdownで記事が書ける

  • HTMLタグ不要
  • シンプルな記法で執筆
  • プレビューしながら編集可能

5. バージョン管理が簡単

  • Gitで全履歴を管理
  • 過去の状態に簡単に戻せる
  • チームでの共同編集も可能

Jekyllでできること・できないこと

できること：

✓ ブログサイト構築
✓ 企業サイト作成
✓ ドキュメントサイト
✓ ポートフォリオサイト
✓ プロジェクトページ
✓ 多言語サイト
✓ RSS/Atomフィード生成

できないこと（工夫が必要）：

△ コメント機能（Disqusなど外部サービス利用）
△ 検索機能（Algolia、Lunr.jsなどを追加）
△ お問い合わせフォーム（Formspreeなど利用）
△ 会員制サイト（別途認証システムが必要）
△ ECサイト（Snipcartなどと連携）

2. Jekyllのインストール：環境構築から始めよう

Windows環境でのインストール

Step 1: Rubyをインストール

Jekyllは Ruby で動作するので、まずRubyが必要です。

1. RubyInstaller for Windowsをダウンロード
   https://rubyinstaller.org/
   
2. Ruby+Devkit版を選択（例：Ruby+Devkit 3.1.4-1）

3. インストール時の設定：
   ☑ Add Ruby executables to your PATH
   ☑ Associate .rb and .rbw files
   
4. インストール後、MSYS2をインストール（自動で聞かれる）
   → 1,2,3 を順番に実行

Step 2: Jekyllをインストール

コマンドプロンプトまたはPowerShellを開いて：

# Jekyllとbundlerをインストール
gem install jekyll bundler

# バージョン確認
jekyll -v
# 出力例：jekyll 4.3.2

Mac環境でのインストール

Homebrewを使った方法：

# Homebrewがない場合はインストール
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Rubyをインストール（macOSデフォルトのRubyは古いため）
brew install ruby

# PATHを通す
echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

# Jekyllをインストール
gem install jekyll bundler

Linux環境でのインストール

Ubuntu/Debianの場合：

# 依存パッケージをインストール
sudo apt-get update
sudo apt-get install ruby-full build-essential zlib1g-dev

# gemのインストール先を設定（sudoを避けるため）
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

# Jekyllをインストール
gem install jekyll bundler

3. 最初のJekyllサイトを作ってみよう

サイトの作成と起動

新しいサイトを作成：

# サイトを作成
jekyll new my-awesome-site

# ディレクトリに移動
cd my-awesome-site

# サーバーを起動
bundle exec jekyll serve

# ブラウザでアクセス
# http://localhost:4000

たったこれだけで、ブログサイトが立ち上がります！

ディレクトリ構造を理解する

Jekyllサイトの基本構造を見てみましょう。

my-awesome-site/
├── _config.yml      # サイトの設定ファイル
├── _posts/          # ブログ記事を置くフォルダ
├── _layouts/        # ページのテンプレート
├── _includes/       # 再利用可能な部品
├── _sass/           # Sassスタイルシート
├── _site/           # 生成されたサイト（触らない）
├── assets/          # CSS、JS、画像など
├── about.md         # Aboutページ
├── index.md         # トップページ
└── Gemfile          # Rubyの依存関係

最初のブログ記事を書く

_posts フォルダに記事を作成：

ファイル名は必ず YYYY-MM-DD-タイトル.md の形式にします。

---
layout: post
title:  "私の最初のJekyll記事"
date:   2024-01-15 10:30:00 +0900
categories: jekyll ブログ
---

# こんにちは、Jekyll！

これは私の**最初の記事**です。

## Markdownで書けるから簡単

- リストも
- 簡単に
- 書ける

コードブロックもOK：

```ruby
def hello
  puts "Hello, Jekyll!"
end

リンクも簡単です。


保存すると、自動的にHTMLに変換されてサイトに表示されます。


## 4. 設定ファイル（_config.yml）を使いこなす

### 基本的な設定項目

`_config.yml`はサイト全体の設定を管理する重要ファイルです。

```yaml
# サイトの基本情報
title: 私の素敵なブログ
email: your-email@example.com
description: >-
  Jekyllで作った技術ブログです。
  プログラミングやWebデザインについて書いています。
baseurl: "" # サブディレクトリの場合は "/blog" など
url: "https://example.com" # 本番環境のURL

# SNS情報
twitter_username: jekyllrb
github_username:  jekyll

# ビルド設定
theme: minima # 使用するテーマ
plugins:
  - jekyll-feed
  - jekyll-seo-tag
  - jekyll-sitemap

# Markdown設定
markdown: kramdown
kramdown:
  input: GFM # GitHub Flavored Markdown
  syntax_highlighter: rouge

# パーマリンク設定
permalink: /:year/:month/:day/:title/

# 除外ファイル
exclude:
  - Gemfile
  - Gemfile.lock
  - node_modules
  - vendor

環境ごとの設定分け

開発環境と本番環境で設定を分ける方法：

# _config.yml（共通設定）
title: My Blog

# _config_dev.yml（開発環境用）
url: "http://localhost:4000"
show_drafts: true

# 起動コマンド
# 開発環境
jekyll serve --config _config.yml,_config_dev.yml

# 本番ビルド
jekyll build --config _config.yml

5. テーマを変更してデザインをカスタマイズ

Gemベースのテーマをインストール

人気のテーマを追加：

# Gemfileに追加
gem "jekyll-theme-minimal"
gem "jekyll-theme-hacker"
gem "jekyll-theme-cayman"

# または美しいテーマ
gem "minimal-mistakes-jekyll"

# インストール
bundle install

# _config.ymlでテーマを指定
theme: minimal-mistakes-jekyll

# サーバー再起動
bundle exec jekyll serve

テーマをカスタマイズする

テーマファイルを上書き：

# テーマのファイル構造を確認
bundle info --path minimal-mistakes-jekyll

# 必要なファイルをコピーして編集
cp $(bundle info --path minima)/_layouts/default.html _layouts/

CSSをカスタマイズ：

assets/main.scssを作成：

---
# Front matterが必要（この3行は必須）
---

// テーマのスタイルをインポート
@import "minima";

// カスタムスタイルを追加
.site-header {
  background-color: #2c3e50;
  
  .site-title {
    color: #ecf0f1;
    font-size: 2rem;
    
    &:hover {
      text-decoration: none;
      color: #3498db;
    }
  }
}

// カスタムクラス
.highlight-box {
  background: #f39c12;
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
}

リモートテーマの使用（GitHub Pages対応）

# _config.yml
# theme: minima # コメントアウト
remote_theme: mmistakes/minimal-mistakes

# プラグインに追加
plugins:
  - jekyll-remote-theme

6. GitHub Pagesで無料公開する方法

GitHubリポジトリの作成

個人サイトの場合：

リポジトリ名：username.github.io
（usernameは自分のGitHubユーザー名）

URL：https://username.github.io

プロジェクトサイトの場合：

リポジトリ名：任意（例：my-blog）

URL：https://username.github.io/my-blog/

デプロイの手順

方法1：直接pushする

# Gitリポジトリを初期化
git init
git add .
git commit -m "Initial commit"

# GitHubリポジトリを追加
git remote add origin https://github.com/username/username.github.io.git

# mainブランチにpush
git branch -M main
git push -u origin main

方法2：GitHub Actionsを使う

.github/workflows/jekyll.ymlを作成：

name: Deploy Jekyll site to Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.1'
          bundler-cache: true
      
      - name: Build with Jekyll
        run: bundle exec jekyll build
        env:
          JEKYLL_ENV: production
      
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

カスタムドメインの設定

独自ドメインを使う：

  1. CNAMEファイルを作成
echo "www.example.com" > CNAME
  1. DNSレコードを設定
Aレコード：
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

CNAMEレコード：
www → username.github.io

7. プラグインで機能を拡張する

GitHub Pages対応プラグイン

GitHub Pagesで使える公式プラグイン：

# _config.yml
plugins:
  - jekyll-feed          # RSSフィード生成
  - jekyll-seo-tag       # SEO最適化
  - jekyll-sitemap       # サイトマップ生成
  - jekyll-paginate      # ページネーション
  - jekyll-redirect-from # リダイレクト設定
  - jemoji              # GitHub絵文字対応

プラグインの活用例

SEO最適化（jekyll-seo-tag）：

<!-- _layouts/default.html のheadタグ内 -->
{% seo %}

<!-- 記事のFront Matter -->
---
title: 記事タイトル
description: 記事の説明文
image: /assets/images/cover.jpg
author: あなたの名前
---

ページネーション（jekyll-paginate）：

# _config.yml
paginate: 5
paginate_path: "/page:num/"

<!-- index.html -->
{% for post in paginator.posts %}
  <article>
    <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
    <p>{{ post.excerpt }}</p>
  </article>
{% endfor %}

<!-- ページネーションリンク -->
{% if paginator.previous_page %}
  <a href="{{ paginator.previous_page_path }}">前へ</a>
{% endif %}
{% if paginator.next_page %}
  <a href="{{ paginator.next_page_path }}">次へ</a>
{% endif %}

カスタムプラグインの作成

_plugins/reading_time.rb：

module Jekyll
  module ReadingTimeFilter
    def reading_time(input)
      words_per_minute = 200
      words = input.split.size
      minutes = (words / words_per_minute).ceil
      "約#{minutes}分で読めます"
    end
  end
end

Liquid::Template.register_filter(Jekyll::ReadingTimeFilter)

使用方法：

{{ post.content | reading_time }}

8. Liquidテンプレート言語をマスター

Liquidの基本文法

変数の出力：

{{ site.title }}
{{ page.title }}
{{ post.date | date: "%Y年%m月%d日" }}

条件分岐：

{% if page.comments %}
  <div class="comments">
    <!-- コメント表示 -->
  </div>
{% elsif page.draft %}
  <p class="draft-notice">下書き</p>
{% else %}
  <p>コメントはありません</p>
{% endif %}

繰り返し処理：

{% for post in site.posts limit:5 %}
  <h3>{{ post.title }}</h3>
  <p>{{ post.excerpt | strip_html | truncatewords: 30 }}</p>
{% endfor %}

よく使うLiquidパターン

カテゴリー別記事一覧：

{% assign categories = site.categories | sort %}
{% for category in categories %}
  <h2>{{ category[0] }}</h2>
  <ul>
    {% for post in category[1] %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
  </ul>
{% endfor %}

関連記事の表示：

{% assign related_posts = site.posts | where: "category", page.category | limit: 3 %}
{% for post in related_posts %}
  {% if post.url != page.url %}
    <a href="{{ post.url }}">{{ post.title }}</a>
  {% endif %}
{% endfor %}

インクルードファイルの活用

_includes/social-share.html：

<div class="social-share">
  <a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ page.url }}"
     target="_blank">
    Twitterでシェア
  </a>
  
  <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}"
     target="_blank">
    Facebookでシェア
  </a>
</div>

使用方法：

{% include social-share.html %}

9. 高度な機能と最適化テクニック

データファイルの活用

_data/members.yml：

- name: 田中太郎
  role: エンジニア
  bio: フロントエンド開発が得意
  avatar: tanaka.jpg
  
- name: 佐藤花子
  role: デザイナー
  bio: UI/UXデザインを担当
  avatar: sato.jpg

表示方法：

{% for member in site.data.members %}
  <div class="member">
    <img src="/assets/images/{{ member.avatar }}" alt="{{ member.name }}">
    <h3>{{ member.name }}</h3>
    <p>{{ member.role }}</p>
    <p>{{ member.bio }}</p>
  </div>
{% endfor %}

コレクションの作成

# _config.yml
collections:
  projects:
    output: true
    permalink: /projects/:path/
  
  tutorials:
    output: true
    sort_by: difficulty

_projects/website-redesign.md：

---
title: Webサイトリニューアル
client: ABC株式会社
date: 2024-01-01
technologies: [Jekyll, Tailwind CSS, JavaScript]
---

プロジェクトの詳細...

ビルドの最適化

増分ビルドの活用：

# 変更されたファイルのみビルド
jekyll serve --incremental

# プロファイリング
jekyll build --profile

キャッシュの活用：

# _config.yml
sass:
  style: compressed
  sass_dir: _sass
  cache: true

# Jekyll 4.0以降
incremental: true

検索機能の実装

assets/js/search.js：

// Simple-Jekyll-Searchの設定
SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results'),
  json: '/search.json',
  searchResultTemplate: '<li><a href="{url}">{title}</a></li>',
  noResultsText: '検索結果がありません'
})

search.json：

---
layout: null
---
[
  {% for post in site.posts %}
    {
      "title": "{{ post.title | escape }}",
      "url": "{{ post.url }}",
      "date": "{{ post.date | date: '%Y-%m-%d' }}",
      "content": {{ post.content | strip_html | jsonify }}
    }{% unless forloop.last %},{% endunless %}
  {% endfor %}
]

10. トラブルシューティングとよくある質問

よくあるエラーと解決方法

エラー1：Dependency Error

Dependency Error: Yikes! It looks like you don't have jekyll-paginate

解決：

# Gemfileに追加
gem 'jekyll-paginate'

# インストール
bundle install

エラー2：Liquid Exception

Liquid Exception: undefined method

解決：

  • 変数名のタイポをチェック
  • nilチェックを追加：{% if variable %}

エラー3：Build Warning

Build Warning: Layout 'post' requested in _posts/... does not exist.

解決：

  • _layouts/post.htmlが存在するか確認
  • テーマのレイアウトファイルをチェック

パフォーマンス問題の解決

ビルド時間が長い：

# _config.yml
# 不要なファイルを除外
exclude:
  - node_modules
  - vendor
  - .sass-cache
  - Gemfile
  - Gemfile.lock
  - package.json
  - README.md

# プラグインを最小限に
plugins:
  - jekyll-feed  # 必要なものだけ

サイトが重い：

<!-- 画像の遅延読み込み -->
<img src="placeholder.jpg" 
     data-src="actual-image.jpg" 
     loading="lazy" 
     alt="説明">

<!-- CSSの最適化 -->
<link rel="preload" href="/assets/css/main.css" as="style">
<link rel="stylesheet" href="/assets/css/main.css">

Windows特有の問題

文字化け対策：

# _config.yml
encoding: utf-8

# コマンドプロンプトで
chcp 65001

タイムゾーン問題：

# Gemfile
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw]

まとめ：Jekyllで始める新しいWeb開発

Jekyllは、シンプルさと強力さを兼ね備えた素晴らしい静的サイトジェネレーターです。

Jekyllを使いこなすための3つのステップ：

  1. まず基本を押さえる
    • Markdownで記事を書く
    • _config.ymlで設定
    • GitHub Pagesで公開
  2. 徐々に高度な機能を追加
    • テーマのカスタマイズ
    • プラグインの活用
    • Liquidテンプレートの習得
  3. 自分のニーズに合わせて拡張
    • カスタムプラグイン作成
    • CI/CDの構築
    • 外部サービスとの連携

WordPressのような複雑さはなく、純粋なHTMLの速さと、モダンな開発体験を同時に得られるJekyll。

最初は戸惑うかもしれませんが、一度慣れてしまえば、その快適さから離れられなくなるはずです。

さあ、今すぐjekyll newコマンドを実行して、あなただけのWebサイトを作り始めましょう！

静的サイトの新しい可能性が、きっとあなたを待っています。

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました