MarkdownとJekyllの連携で簡単ブログ構築―初心者向け使い方ガイド - マークダウン入門ナビ

MarkdownとJekyllを組み合わせると、コードを書くだけでブログを簡単に公開できます。この記事では、初めてWebサイトを作る方でもわかりやすく、実際に手を動かしてブログを構築するまでをステップごとに解説します。

Markdownとは？

Markdownは、プレーンテキストで簡単に見出し・箇条書き・リンクなどを記述できる軽量マークアップ言語です。

書きやすさ：HTMLを直接書くよりずっとシンプル。
可搬性：テキストファイルなので、どんなエディタでも編集可能。
変換の柔軟性：JekyllやGitHub PagesがMarkdownを自動でHTMLに変換してくれるため、手間がほぼゼロ。

Jekyllとは？

JekyllはGitHub Pagesを支えている静的サイトジェネレータです。

静的サイト：サーバー側の処理がなく、HTMLだけを配信するため高速。
テーマとレイアウト：簡単にデザインを変更できるテーマが豊富。
拡張性：プラグインで機能追加も可能。
無料運用：GitHub Pagesでホスティングすればコストはほぼゼロ。

なぜMarkdownとJekyllを組み合わせるのか

編集の自由度：Markdownで記事を書けば、構文エラーを心配せずに集中できる。
自動生成：JekyllがMarkdownを読み込んでHTMLを生成。記事追加・変更はファイルを更新すれば完了。
バージョン管理：全ファイルがGitで管理できるので、改行や誤字も差分で追跡。
ホスティングの簡易化：GitHub Pagesと連携すればCI/CDが自動化され、手動でサーバー構築不要。

事前準備

項目	内容	備考
OS	Windows/macOS/Linux	すべて対応
Git	バージョン管理に必須	Git公式サイトからインストール
Ruby	JekyllはRubyで動く	Ruby + RubyGems のセットアップが必要
Jekyll	公式 gem	`gem install jekyll bundler` でインストール
テキストエディタ	VS Code・Sublime・Atom など	Markdown + Ruby の高機能エディタが便利

ステップ 1：Jekyll プロジェクトを作成

コマンドラインで作業ディレクトリへ移動
```
mkdir myblog && cd myblog
```
Jekyll の新規サイトを生成
```
jekyll new .
```
package.json でnpmモジュールを初期化（オプション）
```
npm init -y
```
ビルドして確認
```
bundle exec jekyll serve
```
ブラウザで http://localhost:4000 を開くとデフォルトのサンプルが表示される。

ステップ 2：テーマを変更（好きなデザインに）

ここでは「Minima」を例にします。

Gemfile にテーマを追加
```
gem "jekyll-theme-minima"
```
bundle install を実行
_config.yml にテーマ設定
```
theme: minima
```
再度 bundle exec jekyll serve で確認

ステップ 3：設定ファイル（_config.yml）のカスタマイズ

キー	例	説明
`title`	`My First Blog`	サイト全体のタイトル
`description`	`Jekyll + Markdownで作る静的ブログ`	SEO用の簡単説明
`url`	`https://username.github.io`	本番URL（GitHub Pagesの場合）
`baseurl`	`/myblog`	サブディレクトリ配下で公開する場合
`author`	`Your Name`	作者情報
`defaults`	`- scope: {path: "", type: "posts"} layout: post`	デフォルトレイアウト

ステップ 4：記事を書く

_posts/ ディレクトリ内にファイルを作成
YYYY-MM-DD-title.md の形式で名前を付ける。例: 2025-12-10-hello-world.md

ファイルの先頭に Front Matter（YAML）を書く

---
layout: post
title: "Hello, Markdown!"
date: 2025-12-10
categories: [markdown, jekyll]
tags: [初心者, ガイド]
---

記事本文を Markdown で記述

# はじめに

コンテンツを簡単に作成できる **Markdown** と Jekyll を使ってブログを構築する流れを紹介します。

## 見出し

- こう書くとリストが出来ます
- さらにネストも可能

保存後に bundle exec jekyll serve でローカル確認

ステップ 5：カスタムレイアウトを作る

_layouts/post.html を編集

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>{{ page.title }}</title>
  <meta name="description" content="{{ page.description }}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/blueprintcss/css/blueprint.min.css">
</head>
<body>
  <header><h1>{{ site.title }}</h1></header>
  <article>
    {{ content }}
  </article>
  <footer>© {{ site.author }}</footer>
</body>
</html>

好きな CSS フレームワークを読み込むとデザインが変わる。
layout: post を Front Matter で指定しておけば自動的に適用。

ステップ 6：デプロイ（GitHub Pagesを例に）

GitHub で新規リポジトリ作成（例: your-username.github.io）

プロジェクトを Git で初期化

git init
git add .
git commit -m "Initial commit"

GitHub リモートを設定

git remote add origin https://github.com/your-username/your-username.github.io.git
git push -u origin master

GitHub で「Settings → Pages」から公開ブランチを master または main に設定。
完了すると https://your-username.github.io でブログが公開される。

よくあるトラブルと対処法

事象	原因	対策
`bundle exec jekyll serve` が動かない	Ruby/Gems がインストールされていない	`ruby -v`、`gem -v` を確認し、公式インストール手順に従う
Markdown がそのまま表示される	`layout` が正しく設定されていない	Front Matter の `layout: post` が書けているか確認
画像が表示されない	パスが間違っている	`assets/img` 配下に配置し、`![alt](../assets/img/xyz.png)` など相対パスで指定
デプロイ時に「Invalid Page URL」	`/` ブランチで `baseurl` を設定	`_config.yml` の `baseurl` を空にするか、本番URLを合わせる
コンパイル時に `undefined method` などのエラー	Gem のバージョン不一致	`bundle update` を実行し依存関係を整理

さらに発展させると？

コメント機能：Disqus などを埋め込む
検索：lunr.js や Algolia で全文検索
SEO：jekyll-seo-tag プラグインでメタ情報を自動生成
多言語化：jekyll-multiple-languages-plugin で複数言語対応
データベース不要のポートフォリオ： _data ディレクトリに YAML/JSON を置き、レポートやポートフォリオを生成

まとめ

Markdown と Jekyll の組み合わせは、**「手軽に始められて自由に拡張できる」**という強みがあります。

Markdown が書く側の作業を軽くし、Jekyll がその Markdown を静的サイトへと変換。
GitHub Pages などで無料・簡単に公開できるため、個人ブログやポートフォリオ、チームのドキュメントサイトに最適。
初心者でも数ステップで動くサイトを手に入れられますし、慣れてくれば自分好みのカスタマイズも可能。

ぜひこのガイドを参考に、あなたの Markdown と Jekyll でブログを作り、世界に発信してみてください。 Happy blogging!