Jimmyのブログ

Next.js 15+ をベースに構築されたミニマルな個人ブログシステムです。

技術スタック

• フレームワーク: Next.js 13+ (App Router)
• スタイル: Tailwind CSS
• アイコン: Lucide Icons
• テーマ: ダーク/ライトモード切替対応
• デプロイ: Vercel

機能特徴

• 📝 Markdown記事対応
• 🌓 ダーク/ライトテーマ切替
• 📱 レスポンシブデザイン
• ⚡ 高速読み込み
• 📅 記事タイムライン表示
• 🔐 オンライン管理画面（GitHub APIで直接記事作成）

プロジェクト構成

.
├── app/
│   ├── lib/           # 工具函数和数据处理
│   ├── posts/         # 博客文章
│   └── page.tsx       # 首页
├── content/
│   ├── notes/         # 随笔
│   └── posts/         # 文章
├── components/        # React 组件
├── public/            # 静态资源
└── styles/            # 全局样式

インストールと実行

• プロジェクトをクローンする

git clone https://github.com/Lily-404/blog.git
cd jimmy-blog

npm install

npm run dev

npm run build

---
title: 文章标题
date: YYYY-MM-DD
tags: ["标签1","标签2","标签3"]
---

---
date: YYYY-MM-DD
---

• GitHub 設定 > 開発者設定 > OAuth Apps にアクセス
• 「New OAuth App」をクリック
• 情報を入力：
• Application name: Jimmy Blog Admin（または任意の名称）
• Homepage URL: https://あなたのドメイン.com（本番環境）または http://localhost:3000（ローカル開発）
• Authorization callback URL:
• 本番環境: https://あなたのドメイン.com/api/auth/github/callback
• ローカル開発: http://localhost:3000/api/auth/github/callback
• 「Register application」をクリック
• Client ID を記録
• 「Generate a new client secret」をクリックし、Client secret を記録

2. 環境変数の設定

Vercel プロジェクト設定で以下の環境変数を追加：

• GITHUB_CLIENT_ID: GitHub OAuth App の Client ID
• GITHUB_CLIENT_SECRET: GitHub OAuth App の Client Secret
• GITHUB_OWNER: GitHub ユーザー名（デフォルト: Lily-404、ユーザー権限の検証用）
• GITHUB_REPO: リポジトリ名（デフォルト: blog）
• GITHUB_REDIRECT_URI: OAuth コールバック URL（任意、デフォルトは自動生成）
• NEXT_PUBLIC_BASE_URL: サイトの URL（コールバック URL 生成用、本番環境では必須）
• 本番環境: https://www.jimmy-blog.top
• ローカル開発: http://localhost:3000

3. ローカル開発用設定

プロジェクトのルートディレクトリに .env.local ファイルを作成：

GITHUB_CLIENT_ID=你的Client_ID
GITHUB_CLIENT_SECRET=你的Client_Secret
GITHUB_OWNER=Lily-404
GITHUB_REPO=blog
NEXT_PUBLIC_BASE_URL=http://localhost:3000

4. 本番環境の設定（Vercel）

Vercel プロジェクト設定で、以下を必ず設定してください：

NEXT_PUBLIC_BASE_URL=https://www.jimmy-blog.top

⚠️ 注意:

• .env.local ファイルは .gitignore に追加されており、Git にコミットされません
• ローカル開発時は、OAuth App のコールバック URL を http://localhost:3000/api/auth/github/callback に設定してください
• 本番環境では NEXT_PUBLIC_BASE_URL を https://www.jimmy-blog.top に設定してください
• 本番環境の OAuth App コールバック URL は次のように設定してください: https://www.jimmy-blog.top/api/auth/github/callback`

デプロイ

本プロジェクトは Vercel デプロイが設定されており、自動デプロイをサポートしています。コードを GitHub リポジトリにプッシュするだけで、Vercel が自動でビルドとデプロイを行います。

管理画面を使う利点

• ✅ ローカル開発環境が不要
• ✅ いつでもどこでも記事を追加できる
• ✅ Vercel の再デプロイを自動トリガー
• ✅ 完全無料（GitHub OAuth と Vercel は無料枠内）
• ✅ 安全（GitHub OAuth 認証、リポジトリ所有者・協力者のみアクセス可能）
• ✅ パスワード管理不要、GitHub アカウントでログイン可能

コントリビュート

Issue や Pull Request の提出を歓迎します！

ライセンス

MIT ライセンス

--- Tranlated By Open Ai Tx | Last indexed: 2026-01-30 ---