--- title: "MarkdownでWebサイトを作る4つの方法｜公開経路の選び方と記法のずれ【2026年10月】" url: "https://www.issoh.co.jp/column/details/2566/" published: 2024-06-14 updated: 2026-10-26 categories: ["Webサイト"] publisher: "株式会社一創" --- # MarkdownでWebサイトを作る4つの方法｜公開経路の選び方と記法のずれ【2026年10月】 Markdownで書いた .md ファイルは、変換ツールを1つ通すだけでWebサイトとして公開できます。経路は「静的サイトジェネレーター」「GitHub Pages」「ビルド不要型のDocsify」「ホスティング型サービス」の4つで、どれを選ぶかで更新の手間も検索エンジンからの見え方も変わります。もう1つ見落とされやすいのが、同じ .md でも変換するパーサによって表や脚注の出方が違う点です。この記事では、4経路の選び方に加えて、同じファイルを6通りの設定で変換した実測結果と、2026年に前提が変わったMkDocs系の現状を整理します。 ## まとめ - 継続して更新するドキュメントやブログは静的サイトジェネレーター、リポジトリの .md を手早く公開するならGitHub Pages、コマンド操作を避けたい人はホスティング型サービスが向きます。Docsifyは検索流入を狙わない社内資料向けです。 - Markdownのパーサが返すのは `` も `` も無いHTML断片です。ページの枠（テンプレート）を被せて複数ページを書き出す工程が、静的サイトジェネレーターの仕事です。 - 同じ .md でも、表・タスクリスト・取り消し線・URLの自動リンク・脚注・front matterの扱いはパーサごとに違います。脚注に対応しないパーサでは、脚注の本文がURLとして扱われた壊れたリンクになりました。 - GitHub Pagesのネイティブビルドは、Jekyll 3.10.0とkramdown 2.4.0に固定されています。GitHubは現在、GitHub Actionsでのデプロイを推奨しています。 - Material for MkDocsは2027年5月5日にサポートを終えると告知されています。2026年10月24日公開の9.8.0からPython 3.11以上が必須になりました。 ## MarkdownがWebページになる仕組み：パーサが返すのはHTML断片 Markdownは見出しを `#`、箇条書きを `-` で表す軽量マークアップ言語で、ブラウザはそのままでは解釈しません。間に入るMarkdownパーサがHTMLへ変換し、その出力をブラウザが表示します。Python 3.14.6上でPython-Markdown 3.11.2を使うと、変換はコマンド1行で済みます（3.11系はPython 3.11以上が必要です）。 ``` $ pip install markdown==3.11.2 $ printf '# 見出し\n\n- 箇条書き\n\n**強調**\n' > page.md $ python -m markdown page.md

見出し

箇条書き

強調

``` 出力には文字コードの宣言もタイトルも無く、1ページを作るにも枠が要ります。静的サイトジェネレーターのEleventy 3.1.7を設定ファイル無しで実行しても、生成された `_site/index.html` の中身は `

` と `
` の2要素だけでした。次のようにテンプレート `_includes/base.njk` を作り、front matterでそれを指定すると、テンプレートの `` や `` の中へ本文が差し込まれ、ようやく1枚のWebページになります。 ``` $ npm i @11ty/eleventy@3.1.7 $ mkdir _includes $ cat _includes/base.njk <!doctype html> <html lang="ja"> <head><meta charset="utf-8"><title>{{ title }} {{ content | safe }} $ cat index.md --- layout: base.njk title: はじめてのページ --- # はじめてのページ Markdownから生成しました。 $ npx @11ty/eleventy [11ty] Writing ./_site/index.html from ./index.md (liquid) [11ty] Wrote 1 file in 0.39 seconds (v3.1.7) ``` テンプレートを適用して複数ページを一括で書き出すのが、静的サイトジェネレーターに共通する役割です。目次・サイト内検索・サイトマップは、標準で備える製品もあれば、Eleventyのようにプラグインで足す製品もあります。ビルドの仕組みやSSR・CSRとの違いは[SSGとは？静的サイトジェネレーターの仕組みと企業サイト採用の判断基準](/column/details/17699/)で扱っています。 ## Markdownを公開する4経路の比較と選び方判断の軸は「更新を続けるか」と「コマンド操作やGitをどこまで自分で引き受けるか」の2つです。機能の多さで選ぶと、更新が止まったときに運用だけが残ります。なお4つは技術の分類ではなく運用の経路で、静的サイトジェネレーターで書き出したHTMLをGitHub Pagesに置くように組み合わせることもできます。 | 経路 | 代表例（2026年10月の版） | 必要な操作 | 配信されるHTML | 向く用途 | | ------------ | -------------------------------------------- | --------------- | ----------- | ------------------ | | 静的サイトジェネレーター | Astro 7.4.2 / Hugo v0.168.0 / Eleventy 3.1.7 | CLI・Git | 本文入りの静的HTML | 継続更新するドキュメント・ブログ | | GitHub Pages | Jekyll 3.10.0（固定） | Git（ブラウザ操作で可） | 本文入りの静的HTML | READMEや単発資料の公開 | | ビルド不要型 | Docsify 5.0.0 | index.htmlを1枚置く | 本文なし（JSで描画） | 社内資料・検索流入が不要な文書 | | ホスティング型サービス | Flowershow / MarkdownAI（β） | ブラウザ操作 | サービス側の仕様による | 環境構築を避けたい個人・小規模サイト | ### 静的サイトジェネレーター：更新を続けるサイトの本命 .md ファイル群を入力にして、テーマ・目次・検索を適用した静的HTMLを一括で書き出す方式です。ページが数百に増えても構造が崩れず、Gitで差分を追える点が強みです。既存の .md をコンポーネントと混ぜて使いたいならAstro（7.4.2・2026年10月21日公開）、Go製の単一バイナリで動かしたいならHugo（v0.168.0・2026年10月13日公開）、設定ゼロから始めたいならEleventy（3.1.7）という分け方になります。Astroの特徴と使い方は[Astroフレームワークとは？特徴と使い方・Next.jsとの使い分けを解説【2026年版】](/tech/details/15369/)にまとめています。 APIリファレンスや製品マニュアルのように版管理と多言語化が要る文書なら、ドキュメント特化のDocusaurusが候補に入ります。構築手順は[Docusaurusとは：ドキュメントサイトの構築手順とバージョン管理・多言語・検索の設定【3.10対応】](/tech/details/18707/)を参照してください。書き出したHTMLの置き場は、GitHub PagesのほかCloudflare Pagesも選べます（[Cloudflare Pagesの使い方｜静的サイトの公開手順・独自ドメイン・商用利用とWorkers移行の判断【2026年10月】](/tech/details/3438/)）。 ### GitHub Pages：リポジトリの .md をそのまま公開リポジトリに .md を置き、Settingsの「Pages」で公開元のブランチを指定すれば公開できます。ローカルにRubyもNode.jsも要らず、ブラウザ操作だけで完結します。front matterの無い .md もページとして扱われます（既定で有効なプラグイン `jekyll-optional-front-matter` の働きです）。反映までの時間について、公式ドキュメントは [It can take up to 10 minutes for changes to your site to publish](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) と案内しています。注意したいのは版の固定です。[GitHub Pagesの依存バージョン一覧](https://pages.github.com/versions.json)では、ネイティブビルドで動くのはgithub-pages gem 232経由のJekyll 3.10.0とkramdown 2.4.0です。アップストリームの最新であるJekyll 4.4.1（2025年1月29日公開）や、一覧に無いプラグインは使えません。使うには、手元でビルドした静的ファイルをリポジトリへ送るか、GitHub Actionsのワークフローでビルドする必要があります。GitHubのJekyll解説ページは [GitHub Actions is now the recommended approach for deploying and automating GitHub Pages sites](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll) と明記しています。無料で使える範囲は[GitHub Pagesの利用制限](https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits)に定められており、公開サイトは1GBまで、デプロイは10分でタイムアウト、帯域は月100GBのソフトリミット、ビルドは1時間10回のソフトリミットです（ビルド回数の制限はGitHub Actionsのカスタムワークフローには適用されません）。同じページは、ネットショップやSaaSなど商取引を主目的とするサイトの無料ホスティングとしての利用を認めていません。料金・商用利用・SEO設定の詳細は[GitHub Pagesとは？料金・無料の範囲と容量制限、公開手順・商用利用・SEO設定【2026年】](/tech/details/5875/)で整理しています。 ### ビルド不要型（Docsify）：ブラウザ描画と検索流入の制約 Docsifyは、index.htmlを1枚置くだけで同じフォルダの .md をブラウザ側で読み込み、その場でページとして描画します。公式READMEも `it doesn't need to build HTML files` と説明しており、ビルド工程もCIも不要です。最新版は5.0.0（2026年7月23日公開）です。その代わり、サーバーが返すHTMLには本文が入りません。Docsify公式サイトのトップページをcurlで取得すると、7,918バイトのHTMLの中で本文の入るべき要素は空のままで、READMEにある「dynamically loads」の一文も0件でした。 ``` $ curl -s https://docsify.js.org/ | grep -o '
[^<]*
'
``` Googleはこの空のHTMLを受け取ったあと、JavaScriptを実行して描画した結果をインデックスします。ただし[Google検索セントラルのJavaScript SEOの解説](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)は、描画待ちのキューについて `it can take longer than that` と書き、サーバー側での描画を勧める理由に `not all bots can run JavaScript` を挙げています。JavaScriptを実行しないクローラーやSNSのリンクプレビューには、本文が届きません。URLの形にも癖があり、[Docsifyの設定リファレンス](https://github.com/docsifyjs/docsify/blob/develop/docs/configuration.md)では `routerMode` の既定値が `'hash'`（`#/` 付きのURL）です。検索エンジン向けの `'history'` に切り替えるには、どのパスにも `index.html` を返す書き換え設定がホスティング側に要ります。検索から集客したいサイトにDocsifyは選ばず、社内の手順書やチーム内の資料に限って使うのが無難です。 ### ホスティング型サービス：ブラウザ操作での公開と料金ブラウザやGitHub連携で .md を預け、URLを発行してもらう形式です。[Flowershowの料金ページ](https://flowershow.app/pricing)では、無料プランは flowershow.me のサブドメインで公開でき、ストレージ100MB・月5万訪問がソフトリミットです。独自ドメインと全文検索は有料のPremium（1サイト月5ドル、年払い50ドル）で使えます。対応記法は「CommonMark, GFM & extensions」で、GitHubとの自動同期とObsidianプラグインが無料プランにも含まれます。国内で名前が挙がるMarkdownAI（mdown.ai）は、2026年10月26日時点でも公式サイトのヘッダー表記が「MarkdownAI β」で、トップページに料金表はありません。同じページには「Markdown AI has been redesigned.」という告知と、別サービスのHyperCardBook（hypercardbook.org）へのリンクが載っています。この種のサービスを選ぶときは、機能の多さより「サービスが終わったときに原稿を持ち出せるか」を先に確認してください。原稿を .md として手元のGitにも残しておけば、静的サイトジェネレーターやGitHub Pagesへいつでも移せます。 ## 同じ .md でも表示が変わる：6つのパーサ設定で記法の対応を実測 Markdownには標準仕様の[CommonMark](https://spec.commonmark.org/)（現行0.31.2・2024年1月28日）と、表・タスクリスト・取り消し線・自動リンクの拡張を足した[GitHub Flavored Markdown（GFM）](https://github.github.com/gfm/)（0.29-gfm・2019年4月6日）があり、パーサごとにどこまで対応するかが違います。経路を乗り換えたり、ある環境で書いた .md を別のツールに載せたりすると、ここでずれが出ます。次の .md を用意し、Python-Markdown 3.11.2、markdown-it 15.0.3、marked 18.1.1、kramdown 2.4.0＋kramdown-parser-gfm 1.1.0（GitHub Pagesの依存一覧と同じ版）で変換しました。kramdownはJekyll 3.10.0の既定設定と同じ `input: GFM`・`hard_wrap: false` で動かしています。 ``` --- title: 料金表 --- # 料金表 | プラン | 月額 | |---|---| | 無料 | 0円 | - [x] 公開済み - [ ] 下書き旧価格詳細は https://example.com を参照。注記つきの文です。[^1] [^1]: 2026年10月時点の価格です。 ``` | パーサ（設定） | front matter | 表 | タスクリスト | 取り消し線 | URL自動リンク | 脚注 | | ---------------------------------- | ------------ | - | ------ | ----- | -------- | ------ | | Python-Markdown 3.11.2（既定） | h2見出しに化ける | × | × | × | × | 壊れたリンク | | Python-Markdown 3.11.2（extra＋meta） | ○ | ○ | × | × | × | ○ | | markdown-it 15.0.3（commonmark） | h2見出しに化ける | × | × | × | × | 壊れたリンク | | markdown-it 15.0.3（default） | h2見出しに化ける | ○ | × | ○ | × | 壊れたリンク | | marked 18.1.1（既定） | h2見出しに化ける | ○ | ○ | ○ | ○ | 壊れたリンク | | kramdown 2.4.0（GFM） | Jekyllが事前に除去 | ○ | ○ | ○ | × | ○ | 6つの設定のうち、6項目すべてを変換できたものはありませんでした。なお、kramdownのfront matter欄だけはパーサ単体ではなくJekyllの前処理を前提にした結果で、kramdown単体に渡すと先頭の `---` が水平線になり、閉じの `---` はダッシュ（—）に変換されて段落に残りました。目立ったのは2つの化け方です。 1つ目はfront matterです。front matterを自分で処理しないパーサに渡すと、先頭の `---` が水平線になり、`title: 料金表` と閉じの `---` がCommonMarkの「下線付き見出し」の規則に当たって `

title: 料金表

` が出力されました。静的サイトジェネレーターやJekyllはパーサに渡す前にfront matterを切り取るので、この問題はパーサを直接使ったときに起きます。 2つ目は脚注です。脚注に対応しないパーサは `[^1]: 2026年10月時点の価格です。` をリンクの参照定義として読み、本文の `[^1]` を `href` が「2026年10月時点の価格です。」のリンクに変えました。画面には「^1」というリンクが出て、押すと存在しないURLへ飛びます。 URLの自動リンクも揃いません。GFM仕様は `https://` で始まる文字列を自動でリンクにする拡張を定めていますが、GitHub Pagesと同じkramdownのGFMパーサ1.1.0ではリンクになりませんでした。GitHub上で読めていたREADMEをGitHub Pagesで公開すると、URLがただの文字列になる可能性があります。対策は、書く前に公開先のパーサを決め、使う記法をそのパーサが対応する範囲に絞ることです。経路を移すときは、.md 全体から `[^`（脚注）・`|`（表）・`- [ ]` と `- [x]`（タスクリスト）・`~~`（取り消し線）を正規表現ではなく文字列として検索し、新しい環境でその記法を含むページを1枚ずつ表示して確かめてください。URLは `` のように山括弧で囲むと、CommonMark準拠のパーサならどれでもリンクになります。 ## MkDocs系のサポート期限と新規採用の判断 Markdownからドキュメントサイトを作る定番だったMkDocsとMaterial for MkDocsは、2026年に前提が変わりました。テーマのMaterial for MkDocsは、[変更履歴](https://github.com/squidfunk/mkdocs-material/blob/master/CHANGELOG)で9.8.0（2026年10月24日公開）を主にセキュリティ対応のリリースと位置づけ、Python 3.11以上を必須にしました。同じ版でCLIの告知に2027年5月5日のサポート終了日が入り、PyPIの開発ステータスは「7 – Inactive」になっています。本体のMkDocsは、安定版が1.6.1（2024年8月30日公開）のまま止まっています。次期版の2.0は開発版（2.0.dev0〜dev6）がPyPIに出ていますが、プラグイン機構の削除と設定形式の変更が予告され、既存の `mkdocs.yml` がそのまま動く前提はありません。Materialの開発チームが後継として作るZensicalはMITライセンスで、最新は0.0.72（2026年10月23日公開）、開発ステータスは「3 – Alpha」です。既存のMkDocsサイトは今すぐ動かなくなるわけではありません。運用中なら当面は `mkdocs==1.6.1` と9.8系に固定して再現性を保ちつつ、終了日までに出るセキュリティ修正版は取り込み、2027年5月より前に移行を終えられるよう逆算して移行先（Zensicalか別のジェネレーター）を決めるのが現実的です。これから新しく作るなら、MkDocs系を避けてAstro・Hugo・Docusaurusなど更新が続いているものを選ぶほうが、移行の手戻りを抱えずに済みます。設定の詳細と移行の判断材料は[MkDocsとは？使い方とMaterial for MkDocsの設定・日本語検索・GitHub Pages公開【2026年版】](/tech/details/3675/)にまとめています。 ## 公開前に表示を確かめる3つの手段記法の比較で見たとおり、プレビューと公開先でパーサが違うと、表や脚注の表示が一致しないことがあります。確認は公開先に近い順に信頼できます。 - **静的サイトジェネレーターのローカルサーバー**：`npx @11ty/eleventy --serve` や `hugo server` は、テンプレート適用後の実際の姿を手元で表示します。公開時と同じパーサ・テーマ・設定でビルドした結果を確かめられます（同じビルド成果物を検証用のホスティングに置く方法でも同様です）。 - **VS Codeのプレビュー**：エディタの横に描画結果を並べられます。ただしVS Code内蔵のパーサで描いた姿なので、表や脚注の扱いは公開先と違うことがあります。 - **GitHubのファイル表示**：リポジトリの .md はGFMで整形表示されます。GitHub Pagesでの見た目とは別物として扱ってください。エディタ側の選び方は[Markdown Live Editorの使い方と注意点｜VS Code組み込みエディタとの違い【2026年10月】](/tech/details/11645/)、表の整形や目次生成を補う拡張機能は[Markdown All in Oneの使い方：ショートカット・目次・表整形と安全性の確認](/tech/details/18018/)で扱っています。 ## Markdownでのサイト構築を避けるべき場面避けたいのは、原稿を書く人がGitもコマンドも使わないのに、公開の手段を用意しないまま導入するケースです。更新のたびにエンジニアがプルリクエストを処理する形にするなら、誰がいつまでに反映するか、担当者が不在のときに誰が代わるかを決めておかないと、更新が担当者の手待ちで止まります。その体制を組めないなら、WordPressなどの管理画面を持つCMSか、ブラウザで公開まで完結するホスティング型サービスを選ぶべきです。ページごとにレイアウトが違うコーポレートサイトやランディングページも不向きです。Markdownは文書構造の記述に特化しており、段組みや装飾はテーマの作り込みに頼ります。ページ単位でデザインを変える要件が入れば結局HTMLとCSSを直接書くことになり、Markdownを挟む意味が薄れます。既存サイトの構成から見直すなら、[Webサイトリニューアルの支援](/service/web/renewal/)のように、CMSと静的サイトのどちらで作るかを要件から決める進め方が向いています。ログインや問い合わせ内容の保存など、サーバー側の処理が要件の中心にある場合も合いません。静的ファイルだけではフォームの送信を受け取れないため、外部のフォームサービスか、自前のAPIやサーバー側の実行環境を別に用意することになります。なお、Reactのアプリ画面の中でMarkdownを表示したいという要件はサイト構築とは別の話で、[react-markdownの使い方：rehype-sanitizeとrehype-rawで安全にHTMLを描画する](/tech/details/3660/)で扱うライブラリを使います。 ## よくある質問 ### Markdownで作ったWebサイトは無料で公開できますか？できます。GitHub Pagesは、無料プラン（GitHub Free）では公開元のリポジトリをpublicにする条件で、公開サイト1GBまで無料で使えます。Flowershowも flowershow.me のサブドメインなら無料プランで公開できます。どちらも帯域や訪問数にソフトリミットがあり、GitHub Pagesはネットショップなど商取引が主目的のサイトには使えません。独自ドメインを使う場合は、ドメインの取得費用が別にかかります。 ### Markdownファイル（.md）はどうやって作りますか？テキストエディタで本文を書き、拡張子を .md にして保存するだけです。文字コードはUTF-8にしてください。見出しは行頭に `#`、箇条書きは `-`、強調は `**` で囲むのが基本の書き方で、VS Codeなら `Ctrl+K V`（macOSは `⌘K V`）でエディタの横にプレビューを並べて表示できます。 ### 生成AIが出力したMarkdownをそのままサイトに載せられますか？載せられます。ChatGPTやClaudeの回答を .md として保存し、静的サイトジェネレーターの原稿フォルダかGitHubのリポジトリに置けば公開できる状態になります。ただしAIの出力には表や脚注が含まれることがあり、公開先のパーサが対応していないと崩れます。載せる前に、本文の「6つのパーサ設定で記法の対応を実測」の表で公開先が対応する記法かを確かめてください。 ### MarkdownAIは無料で使えますか？ 2026年10月26日時点で、公式サイト（mdown.ai）のトップページに料金表やプランの記載はなく、表記は「MarkdownAI β」のままです。トップページには作り直しの告知と、別サービスHyperCardBookへのリンクが出ています。費用と提供条件は公式サイトの最新の表示で確認してください。 ### 既存のPDFやWordの資料をMarkdownのサイトへ移せますか？変換ツールを使えば移せます。PDFは[Marker（marker-pdf）の使い方｜PDFをMarkdownに変換する手順と商用ライセンス【2.0.0対応】](/tech/details/12109/)、WordやExcelも含めるなら[MarkItDown（マークイットダウン）とは｜PDF・Word・ExcelをMarkdownに変換する使い方とインストール【0.1.8】](/tech/details/4810/)で手順を解説しています。変換後の .md は表の崩れが出やすいので、公開先のプレビューで1枚ずつ確認してから載せてください。 ## 関連記事 - [SSGとは？静的サイトジェネレーターの仕組みと企業サイト採用の判断基準](/column/details/17699/) - [MkDocsとは？使い方とMaterial for MkDocsの設定・日本語検索・GitHub Pages公開【2026年版】](/tech/details/3675/) - [GitHub Pagesとは？料金・無料の範囲と容量制限、公開手順・商用利用・SEO設定【2026年】](/tech/details/5875/) - [Docusaurusとは：ドキュメントサイトの構築手順とバージョン管理・多言語・検索の設定【3.10対応】](/tech/details/18707/) - [Markdown Live Editorの使い方と注意点｜VS Code組み込みエディタとの違い【2026年10月】](/tech/details/11645/) --- 出典: [MarkdownでWebサイトを作る4つの方法｜公開経路の選び方と記法のずれ【2026年10月】]()（株式会社一創）