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 License

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