บล็อกของ 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

• ติดตั้ง Dependencies

npm install

• รันเซิร์ฟเวอร์สำหรับการพัฒนา

npm run dev

• สร้างเวอร์ชันสำหรับการผลิต

npm run build

การเพิ่มบทความใหม่

วิธีที่หนึ่ง: ผ่านระบบจัดการออนไลน์ (แนะนำ)

• เข้าหน้า /admin
• เข้าสู่ระบบด้วยรหัสผ่านผู้ดูแล
• กรอกข้อมูลบทความแล้วส่ง
• บทความจะถูกสร้างผ่าน GitHub API โดยอัตโนมัติ และ Vercel จะทำการรีดีพลอยโดยอัตโนมัติ

วิธีที่สอง: เพิ่มไฟล์ด้วยตนเอง

• สร้างไฟล์ Markdown ใหม่ในโฟลเดอร์ content/posts
• รูปแบบการตั้งชื่อไฟล์: xxx.md
• เพิ่มข้อมูลเมตาที่หัวไฟล์:

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

เพิ่มบันทึก

• สร้างไฟล์ Markdown ใหม่ในไดเรกทอรี content/notes
• รูปแบบการตั้งชื่อไฟล์: YYYY-MM-DD-title.md
• เพิ่มข้อมูลเมตาที่ส่วนหัวของไฟล์:

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

การตั้งค่าหน้าแอดมิน

หน้าแอดมินใช้ GitHub OAuth สำหรับการยืนยันตัวตน เฉพาะเจ้าของหรือผู้ร่วมงานของรีโปเท่านั้นที่สามารถเข้าถึงได้

1. สร้าง GitHub OAuth App

• ไปที่ GitHub Settings > Developer settings > 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 Project Settings:

• GITHUB_CLIENT_ID: Client ID ของ GitHub OAuth App ของคุณ
• GITHUB_CLIENT_SECRET: Client Secret ของ GitHub OAuth App ของคุณ
• GITHUB_OWNER: ชื่อผู้ใช้ GitHub (ค่าเริ่มต้น: Lily-404 สำหรับตรวจสอบสิทธิ์ผู้ใช้)
• GITHUB_REPO: ชื่อรีโป (ค่าเริ่มต้น: blog)
• GITHUB_REDIRECT_URI: OAuth Callback URL (ไม่บังคับ ค่าเริ่มต้นจะสร้างให้อัตโนมัติ)
• NEXT_PUBLIC_BASE_URL: URL เว็บไซต์ของคุณ (ใช้สำหรับสร้าง Callback 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
• ในการพัฒนาแบบ local ให้แน่ใจว่าได้ตั้งค่า Callback URL ของ OAuth App เป็น http://localhost:3000/api/auth/github/callback
• ในสภาพแวดล้อมจริง ต้องตั้งค่า NEXT_PUBLIC_BASE_URL เป็น https://www.jimmy-blog.top
• Callback URL ของ OAuth App ในสภาพแวดล้อมจริงควรตั้งเป็น: https://www.jimmy-blog.top/api/auth/github/callback`

การปรับใช้งาน

โปรเจกต์นี้ได้ตั้งค่าให้ใช้ Vercel สำหรับการ deploy แล้ว รองรับการ deploy อัตโนมัติ เพียงแค่ push โค้ดไปที่ GitHub repository, Vercel จะสร้างและ deploy ให้อัตโนมัติ

ข้อดีของการใช้ระบบหลังบ้าน

• ✅ ไม่จำเป็นต้องมีสภาพแวดล้อมการพัฒนาในเครื่อง
• ✅ เพิ่มบทความได้ทุกที่ทุกเวลา
• ✅ กระตุ้นให้ Vercel deploy ใหม่โดยอัตโนมัติ
• ✅ ฟรีทั้งหมด (GitHub OAuth และ Vercel อยู่ในโควต้าฟรี)
• ✅ ปลอดภัย (ตรวจสอบด้วย GitHub OAuth เฉพาะเจ้าของ/ผู้ร่วมงาน repo เท่านั้นที่เข้าถึงได้)
• ✅ ไม่ต้องจัดการรหัสผ่าน ใช้บัญชี GitHub ในการเข้าสู่ระบบ

การมีส่วนร่วม

ยินดีต้อนรับทุก Issue และ Pull Request!

ใบอนุญาต

MIT License

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