📘 技術ブログ

GithubPagesでブログ記事をJekyllを使ってMarkDownで書いてみる

2026/03/11

目次

1. はじめに

レンタルサーバーは契約せずにサイトはGithubPagesで無料公開し、ブログ記事を追加していこうと思います。 HTMLを自分でゴリゴリと書いていくのは大変なので、 Markdown記法を使って書いていくことにしました。 この記事では、Jekyllを使ってMarkDownで静的ページを作る方法を紹介しています。

2. そもそもMarkdownって何？

Markdown（読み方：マークダウン）記法とは、簡単な記号で文章の構造や装飾を指定できるマークアップ言語です。

  • ##​ で見出し
  • ** で強調
  • ​-​ で箇条書き

などのように、タグなどの難しい知識がなくても読みやすく綺麗なレイアウトなHTML文章が簡単に書けます。

3. なぜ Jekyll を採用したのか

Jekyll（読み方：ジキル）は、GitHubPagesに標準で組み込まれている静的サイトジェネレータで、アップロードしたMarkdownファイル（.mdファイル）を自動でHTMLに変換して配信してくれます。

  • 環境構築が不要: GitHubが標準でサポートしているため、特別なツールを自分で入れる必要がありません。
  • Markdownとの親和性: 書いたMarkdownファイルをリポジトリにアップロードするだけで、ブログとしていい感じの見た目になります。
  • 目次の自動生成: 特にプラグインを追加しなくても、{:toc} と魔法の言葉を書くだけで目次を自動生成してくれる機能（kramdown）なんて便利なものがあります。

4. Markdown用のファイルを作成する

では早速、GithubPagesでMarkdownを生成（ジェネレート）してもらう為の準備を行います。

設定ファイル_config.ymlを作成する

GithubPagesでMarkdownファイルからHTML静的ファイルを生成する為には設定が必要となります。 まずは、そのための設定ファイルを_config.ymlというファイル名で作成します。

[_config.ymlの例]

url: "https://benritools.github.io" # 自分のサイトURL
baseurl: "/tools"                   # リポジトリ名
permalink: /blog/:title/            # 記事のURL構造

作成した_config.ymlファイルをGithubリポジトリのルートディレクトリにアップロードします。

設定ファイル作成

記事を書くファイルを作成する

あとは、記事用のMarkdownファイル（.mdファイル）を作成して記事の内容を書くだけです。 これを知っておくと管理が簡単になる点が2つあります。

💡 記事ファイル名のルール

Jekyllでは、記事ファイルの名前を以下の形式にしなければなりません。

YYYY-MM-DD-title.md

YYYY-MM-DD部分は更新日、titleの部分は記事のタイトルを半角英数で指定します。 ※日付の部分は、ブログの投稿日として自動的に認識されます。

例）2026-03-11-markdown.md

💡 記事ファイル名とURLのルール

前述の_config.xmlで設定した記事のURL構造が関係してきます。 もし記事のURL構造を何も設定しない場合、ブログ記事ページのURLは以下のようになります。

https://ユーザー名.github.io/リポジトリ名/年度/月/日/タイトル.html

これだとURLがとても長く、最後に .html がついてしまうのがなんだか少し気になりますよね…

一方、記事のURL構造に

permalink: /blog/:title/

を指定した場合、permalinkを指定した記事のURLはこんな風になります。

https://ユーザー名.github.io/リポジトリ名/タイトル/

例）
https://benritools.github.io/tools/blog/markdown/

どうですか？とてもすっきりして覚えやすいURLになりました。 シンプルで美しいURLはSNSでシェアされた時や検索結果に表示された時の印象がぐっと良くなります！

作成した記事ファイルをアップロードする

記事用のMarkdownファイルを作成したら、Githubリポジトリの下記のディレクトリにファイルをアップロードします。

例) リポジトリ/_posts/2026-03-11-markdown.md

記事ファイル作成

5. Markdownファイルから記事ページを生成する

アップロードしたMarkdownで書いた記事ページからHTMLを生成する時にすることは、なんと何もありません！

ファイルをGithubにコミットすると、Actionsが自動的に動き、pages build and deploymentが実行されて記事が自動生成されます。

ややこしい操作もなく、自動ですべてやってくれるので本当に簡単で驚きです😱

💡 反映されない場合は？

もしも正しく反映されない場合は、記事をアップロードしたディレクトリ名（_posts）や、設定ファイル（_config.yml）のファイル名などに間違いがないかご確認ください。 ちなみに私は、何度アップロードしても全然反映されずに悩んでいたところ、ディレクトリ名を間違って _post にしていました…😂