├── posts/ │ ├── post-page-name.md │ └── series-page-name/ │ ├── meta.json │ ├── 1.md │ ├── 2.md │ └── any-name.md ├── img/ │ └── sample.png └── profile/ └── index.md

2026

当ブログシステム構築方法

当ブログ(NextjsBlogWithGitPAT)の構築方法の解説記事ですわ！！

LINKGitHub - isirmt/Next...Markdown blog u...https://github.com/isirmt/NextjsBlog...

前提

GitHubアカウント
Vercelアカウント(SSOでGitHubアカウントから作成可能)
Node.js
pnpm v9~
GitHubにてフォーク済みのisirmt/NextjsBlogWithGitPAT

おすすめはmainブランチをフォーク元のリポジトリからSyncするためにそのままにしておき、deployブランチなどを作りマージする形式にするとアップデートを反映しやすいかなと

開発環境にて

ローカルで動作確認や内容書き換えを行う際の話です。フォークリポジトリをクローンして、ルートディレクトリで次を実行し、依存関係を解決します。

pnpm i

また、開発環境を起動する際は、次を実行します。

pnpm dev

ただ、環境変数ファイルを設定していない状態なので、恐らく動作しません。環境変数の設定築を参照してから戻ってきてください。

記事データ格納リポジトリの作成

このブログシステムで一番触るであろう、記事用リポジトリを用意します。

LINKGitHub - isirmt/Dire...Contribute to i...https://github.com/isirmt/DirectoryG...

↑のテンプレートリポジトリを用意しているので使っていただいて問題ありません。(privateがいいかも)

各ファイルやディレクトリの説明

ディレクトリ構造

├── posts/
│   ├── post-page-name.md
│   └── series-page-name/
│       ├── meta.json
│       ├── 1.md
│       ├── 2.md
│       └── any-name.md
├── img/
│   └── sample.png
└── profile/
    └── index.md

これが基本的なディレクトリ構成になります。

posts: 投稿記事のマークダウンファイル(.md)が格納されるディレクトリです。「記事のURL名.md」で「https://your-domain.com/posts/記事のURL名」でサイトが生成されます。
post-page-name.md: /posts/post-page-nameに対応した記事を作るためのファイルです。

---
title: "ブログの表示タイトル"
date: "2026/2/25"
tags: ["GitHub","ブログ","フォーク"]
thumbnail: "/img/thumbnail-path.png"
---

ここからが本文

## 見出し

ファイルの中身は↑に従っていただくと正しく動作します。(最初にYAMLフォーマットでメタデータの差し込み)

title: 必須
date: 任意だが絶対あった方が良い
tags: 任意、書き方は上のとおり
thumbnail: 任意、ない場合は既定のフォーマットで自動生成されます。後述の画像格納ディレクトリを含めたリポジトリからの相対パス
series-page-name: ブログシステムの「シリーズ」にあたる入れ子構造を作成するためのディレクトリです。postsディレクトリ配下に作られた場合に機能します。このディレクトリ内に.mdを作成すると、/posts/series-page-name/title.mdのようにリンクが続くようになります。
meta.json: シリーズの詳細情報を格納可能です。(任意)

ファイル名は固定ですので変えないようにお願いします。

meta.json

{
  "name": "シリーズ表示名",
  "description": "シリーズに関する説明文"
}

このファイルが無い場合は表示名としてseries-page-nameが用いられます。

img: 画像格納のためのディレクトリです。サブディレクトリは作っていただいても大丈夫です。対応フォーマット{jpg(jpeg)/png/gif/webp/bmp/svg}(執筆時点)

ファイルサイズは5MB未満を推奨しています。

また、推奨画像サイズは1200x630です。

profile/index.md: プロフィールページ用(https://your-domain.com/profile)のマークダウンファイルです。

仕様は通常の記事と変わりありません。(コメント機能が無いくらい)

デプロイ環境の構築

開発環境も本番環境も共に必要なステップばかりですので

GitHub Tokenの作成

このシステムは記事リポジトリを公式のAPIを通して取得・操作することで実現しています。

LINKBuild software bette...GitHub is where...https://github.com/settings/tokens

ログインした状態でこちらにアクセスし、「Generate new token」から、classicのトークンを作成します。

(Expirationは、無期限でいいと思います)

repo
user

にチェックをつけた上で、tokenを生成すると、発行されますのでコピーして保管してください。

登録必須の環境変数

Vercelではプロジェクトを新規作成した設定画面内のEnvironment Valuesタブ、ローカルの開発環境はリポジトリのルート直下の.envファイルに登録する環境変数が多くあります。

NEXT_PUBLIC_URL: 公開URL名

開発環境ならhttp://localhost:3000、本番環境はhttps://your-domain.comを設定してください

NEXT_PUBLIC_STORAGE_FAVORITE_TAGS: お気に入りタグのlocalStorage保存名
GIT_USERNAME: 記事リポジトリのユーザー名(組織名)
GIT_REPO: 記事リポジトリ名
GIT_POSTS_DIR: 記事リポジトリの記事ディレクトリ名(今回はposts)
GIT_IMAGES_DIR: 記事リポジトリの画像格納ディレクトリ名(今回はimg)
GIT_PROFILE_PATH: 記事リポジトリのプロフィールマークダウンファイル格納パス(profile\index.md)
GIT_TOKEN: GitHub Tokenの作成のトークン

任意で追加する環境変数

無い場合もサイトは動作します。

コメント機能有効化

NEXT_PUBLIC_RECAPTCHA_SITE_KEY: サイトキー
RECAPTCHA_SECRET_KEY: シークレットキー

LINKログイン - Google アカウントhttps://www.google.com/recaptcha/adm...

こちらのサイトでreCAPTCHAを登録し、サイトキーとシークレットキーを追加します。

ドメインリストは、開発と本番の両方を登録しておくと作業しやすいと思います。

ダッシュボード機能の有効化

AUTH_GITHUB_ID: OAuthクライアントキー
AUTH_GITHUB_SECRET: OAuthシークレットキー
AUTH_SECRET: ランダムな文字列

ダッシュボードへはSSOにて認証します。

注意点として、ログイン可能なユーザーは記事リポジトリの所有ユーザーのみなのでOrganizationで管理する場合は現在利用できません。

LINKBuild software bette...GitHub is where...https://github.com/settings/develope...

こちらで、開発環境バージョンと本番環境バージョンの2つを用意してください。

Homepage URLはドメイン名ですが、Authorization callback URLは、ドメイン名/api/auth/callback/githubとなるようにしてください。

AUTH_SECRETは、次のコマンドを実行することで作成可能です。

pnpm dlx auth secret

GitHubへpushと同時にサイトを更新

GITHUB_WEBHOOK_SECRET: ランダムな文字列

次のコマンドで取得可能です。

openssl rand 256 | base64

On-demand ISRを有効にします。

(執筆時点では有効化しない場合、更新に最大30日を要するので推奨しています。)

Google Tag Manager(GTM)の導入

GTM_ID: GTM-***などから始まるタグ

On-demand ISRによる記事更新のセットアップ

任意で追加する環境変数でも述べましたが、記事をpushした後に、即座にサイトのAPIとWebhookを通して更新するシステムが導入されています。

記事リポジトリの設定のWebhook項目から、次の項目を入力します。

Payload URL: https://your-domain.com/api/webhooks/github
Content type: application/json
Secret: GITHUB_WEBHOOK_SECRET と同じ値
Events: Just the push event

ブログサイトのmetaデータ編集

一応、呼び出し元はできるだけ揃えています。

フォーク済みのリポジトリのsrc\static\constant.tsを編集していただくことで殆どのデータを編集可能です。

siteName: サイト名
siteDescription: サイト説明文
author.name: 著者名
author.url: ホームページURL
enableShowGitHubProfile: trueで記事リポジトリのGitHubユーザーのプロフィールを表示します
enableShowXProfile: trueでGitHubアカウントのプロフィールに登録したXアカウントが表示されます。
headerMovPath: トップページと404ページの上部に表示される動画です。""と無くても大丈夫です。

アイコンやOpen Graph画像の修正は/publicやsrc\components\layout\Header.tsx(アイコン)を直接修正してください。

コミット時について

当リポジトリはGitHub ActionsによるCI(lint, fmt --check)を取り入れております。

コミット前に、ぜひ実行してください。

pnpm check

もし、formatやlintを実行する場合は下からどうぞ。

フォーマット

pnpm fmt

pnpm lint
pnpm lint:fix

最終確認

Vercelのプロジェクトの構築段階で本番環境用の環境変数を登録している

localhost:3000系が紛れてないかだけ確認してください。

さいごに

不明な点はコメントにてお聞きしていただければと思います。

また、システムの不具合・バグはIssueにてお願いします。

自動更新

コメントはまだありません

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.