セットアップ
# クローン後、依存関係をインストール
npm install
# 開発サーバー起動(http://localhost:4321)
npm run dev
# 本番ビルド(Pagefind検索インデックスも同時生成)
npm run build
# ビルド結果のプレビュー
npm run preview
ページの作成
src/content/wiki/ にMarkdownファイルを置くだけでページになります。
---
title: "ページタイトル"
description: "短い説明(任意)"
tags: ["タグ1", "タグ2"]
category: "カテゴリ名"
date: 2024-01-01
updated: 2024-06-01
---
本文をここに書きます。[[他のページ]] へのWikiLinkも使えます。
frontmatter の主なフィールド
| フィールド | 型 | 説明 |
|---|---|---|
title | string | ページタイトル(必須) |
description | string | 短い説明文(任意) |
tags | string[] | タグの配列 |
category | string | カテゴリ名 |
date | date | 作成日 |
updated | date | 更新日 |
draft | bool | true で下書き(非公開) |
WikiLink の使い方
[[ページ名]] → ページへのリンク
[[ページ名|表示テキスト]] → カスタムテキストでリンク
[[サブフォルダ/ページ名]] → サブフォルダのページへリンク
バックリンク(そのページへのリンク一覧)はページ下部に自動表示されます。
ディレクトリ構成
コンテンツは src/content/wiki/[lang]/ 配下のリソースとして管理されます。
サブディレクトリでさらに整理することも可能です。
src/content/wiki/
├── ja/ → 日本語 (ルート)
│ ├── index.mdx → /wiki/ja
│ ├──入门.mdx → /wiki/ja/getting-started
│ └── recipes/
│ └── pasta.mdx → /wiki/ja/recipes/pasta
└── en/ → 英語
└── index.mdx → /wiki/en
src/content/wiki/templates/ 内のファイルはテンプレート扱いとなり、通常ページとしては公開されません。
多言語対応 (i18n)
詳細は サンプル:多言語対応(i18n) を参照してください。 自動フォールバック機能により、翻訳がない場合は日本語版が自動的に表示されます。
サイドバーのカスタマイズ
src/data/sidebar-nav.ts を編集してサイドバー構成を変更できます。
// 手動でリンクを並べる
{
title: 'ガイド',
icon: 'fa-solid fa-book',
items: [
{ slug: 'getting-started', label: 'はじめかた' },
{ slug: 'shortcode-reference', label: 'ショートコード' },
],
},
// カテゴリを自動収集
{
title: 'レシピ',
icon: 'fa-solid fa-utensils',
category: 'レシピ',
autoSort: 'title',
},
GitHub Pages への公開
- GitHubリポジトリを作成し、コードをpush
- Settings → Pages → Source で
GitHub Actionsを選択 - サブパス(
/repo-name)を使う場合は Settings → Variables に以下を設定:SITE_URL:https://username.github.ioBASE_PATH:/repo-name
mainブランチにpushすると自動デプロイ
カスタムドメインや username.github.io をルートで使う場合は BASE_PATH の設定は不要です。
サンプル:ショートコードリファレンス へ続く →