セットアップ

# クローン後、依存関係をインストール
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 の主なフィールド

フィールド説明
titlestringページタイトル(必須)
descriptionstring短い説明文(任意)
tagsstring[]タグの配列
categorystringカテゴリ名
datedate作成日
updateddate更新日
draftbooltrue で下書き(非公開)
[[ページ名]]                 → ページへのリンク
[[ページ名|表示テキスト]]    → カスタムテキストでリンク
[[サブフォルダ/ページ名]]    → サブフォルダのページへリンク

バックリンク(そのページへのリンク一覧)はページ下部に自動表示されます。

ディレクトリ構成

コンテンツは 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 への公開

  1. GitHubリポジトリを作成し、コードをpush
  2. Settings → Pages → SourceGitHub Actions を選択
  3. サブパス(/repo-name)を使う場合は Settings → Variables に以下を設定:
    • SITE_URL : https://username.github.io
    • BASE_PATH : /repo-name
  4. main ブランチにpushすると自動デプロイ

カスタムドメインや username.github.io をルートで使う場合は BASE_PATH の設定は不要です。

サンプル:ショートコードリファレンス へ続く →