Vault Blog Core を用いて自分だけのブログを作る方法を説明します。

現時点では、主に以下の4つのカスタマイズを想定しています。

1. 環境変数の設定
2. 投稿条件の変更
3. ルーティングの変更
4. 見た目の変更

1. 環境変数の設定

これについてはVault Blog Core の導入手順で説明しています。

2. 投稿条件の変更

ここでは、どのMarkdownファイルを「記事として公開するか」の条件をカスタマイズする方法を説明します。

Vault Blog Core の導入手順やVault Blog Core による記事投稿までの手順などで少し言及しましたが、Vault Blog Core は POST_SOURCE_DIR 下にある Markdown ファイルを収集して、記事として投稿します。

初期設定では、POST_SOURCE_DIR 以下の Markdown ファイルのうち、フロントマターに published: true が指定されたものだけを収集して投稿しますが、この条件は自由にカスタマイズできます。

カスタマイズするには、./config/can-publish.ts にある canPublish() 関数を編集してください。

現時点でのファイルの内容は下記の通りです。
関数の説明はコメントを参照してください。

/**
 * 投稿を公開してよいかを判定する関数
 *
 * @param frontMatter - フロントマターの内容
 * @returns 投稿を公開する場合は true、それ以外は false
 *
 * @example
 * const frontMatter = {
 *   slug: "sample",
 *   createdAt: "2000-01-01",
 *   tags: ["tag1", "tag2"],
 *   thumbnail: "[[sample.jpg]]",
 *   description: "This is sample data",
 *   published: true,
 *   customField: "foobar",
 * };
 *
 * const result = canPublish(frontMatter); // true
 */
export const canPublish = (frontMatter: Record<string, unknown>): boolean => {
  const val = frontMatter.published;
  return typeof val === "boolean" && val === true;
};

例えば「特定のタグが付いた記事だけ公開したい」場合などは、下記のように canPublish() を書き換えることもできます。

export const canPublish = (
  frontMatter: Record<string, unknown>
): boolean => {
  return Array.isArray(frontMatter.tags) && frontMatter.tags.includes("public");
};

3. ルーティングの変更

Vault Blog Core では、ルーティングに App Router を用いています。

Next.js Docs: App Router | Next.js

The App Router is a file-system based router that uses React's latest features such as Server Components, Suspense, Server Functions, and more.

nextjs.org

したがって、./src/app を編集することでルーティングの変更が可能です。
Vault Blog Core は ./src/app への外部からの参照をしていないので、お好きに編集してください。

ただし一箇所だけ ./src/lib/routes.ts に、各ページのURLを返す関数をまとめています。
この関数を書き換えておくと便利だと思います。

// ...

/**
 * 各ページのURL生成
 */
export const getHomeUrl = () => `/`;

export const getPostsUrl = () => `/posts`;

export const getPostsPageUrl = (page: number) => `/posts/page/${page}`;

export const getPostUrl = (slug: string) => `/posts/${slug}`;

export const getTagsUrl = () => `/tags`;

export const getTagUrl = (tag: string) => `/tags/${encodeForURI(tag)}`;

export const getAboutUrl = () => `/about`;

/**
 * RSS / フィードなど
 */
export const getRssUrl = () => `/feed.xml`;
export const getRssFilePath = () => path.join(PUBLIC_DIR, "feed.xml");

4. 見た目の変更

先述の通り、App Router を使用していて、かつ ./src/app への外部からの参照はないので、./src/app/layout.tsx や各ページの page.tsx などを書き換え、スタイリングを行うことで、見た目を自由に変更可能です。

同様に ./src/components も好きに編集して構いません。
こちらに関しては、開発者が手を加えて git push する可能性がありますが、コンフリクトしたとしても大きな問題にはならないと思います。各自良いように管理してください。

まとめ

• 環境変数の設定
  POST_SOURCE_DIR や SITE_URL などを設定することで、ブログ全体の挙動や参照先を変更できます。
• 投稿条件の変更
  ./config/can-publish.ts の canPublish() を編集することで、どのMarkdownファイルを記事として公開するか自由に制御できます。
• ルーティングの変更
  App Router (./src/app) を編集することで、ページ構成やURL設計を自由に変更可能です。
  ./src/lib/routes.ts にURL生成関数をまとめておくと便利です。
• 見た目の変更
  layout.tsx や各ページの page.tsx、./src/components を編集することで、ブログのデザインやスタイルを自由にカスタマイズできます。

これらのポイントを押さえることで、Vault Blog Core を用いた自分だけのブログを柔軟に構築・運用できます。

各ディレクトリの役割や依存関係についてはVault Blog Core の各ディレクトリの説明を読んでください。