| ็ฑปๅซ | ๆๆฏ้ๅ |
|---|---|
| ่ฟ่ก็ฏๅข | Node.js |
| ๅ็ซฏๆกๆถ | React 19 |
| ๆๅปบๅทฅๅ ท | Vite |
| ๅผๅ่ฏญ่จ | TypeScript (ES2022) |
| ๆ ทๅผๆนๆก | Tailwind CSS |
| ๅจ็ปๅผๆ | Framer Motion |
| ๅพๆ ๅบ | Lucide React |
| Markdown ๆธฒๆ | react-markdown + remark-gfm + rehype-highlight |
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ ๅ็ซฏๅบ็จ โ
โ React SPA + Vite + TypeScript โ
โ ็ซฏๅฃ: 3000 โ
โโโโโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ HTTP ่ฏทๆฑ (/api/*)
โผ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ ๅ็ซฏๆๅก โ
โ Express.js API Server โ
โ ็ซฏๅฃ: 3002 โ
โโโโโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ ๆไปถ่ฏปๅ
โผ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ Markdown ๆไปถ โ
โ server/posts/*.md โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโ App.tsx # ๅบ็จๆ น็ปไปถ๏ผ็ฎก็่ทฏ็ฑไธๅ
จๅฑ็ถๆ
โโโ index.tsx # ๅบ็จๅ
ฅๅฃ๏ผ่ด่ดฃ DOM ๆ่ฝฝ
โโโ index.css # ๅ
จๅฑๆ ทๅผ๏ผๅซไปฃ็ ้ซไบฎไธป้ข
โโโ types.ts # TypeScript ็ฑปๅๅฎไน
โโโ i18n.ts # ๅฝ้
ๅ้
็ฝฎ
โโโ vite.config.ts # Vite ๆๅปบ้
็ฝฎ
โ
โโโ components/ # ้็จ็ปไปถ
โ โโโ GlitchElement.tsx # ๆ
้่บๆฏ่ง่งๆๆ็ปไปถ
โ โโโ Section.tsx # ๆ ๅๅๅธๅฑๅฎนๅจ
โ โโโ Navbar.tsx # ๅฏผ่ชๆ
โ โโโ Hero.tsx # ้ฆๅฑๅฑ็คบๅบ
โ โโโ About.tsx # ๅ
ณไบๆไปฌ
โ โโโ Projects.tsx # ้กน็ฎๅฑ็คบ
โ โโโ Blog.tsx # ๅๅฎข้ข่ง๏ผ้ฆ้กต๏ผ
โ โโโ Contact.tsx # ่็ณปๆนๅผ
โ โโโ Footer.tsx # ้กต่
โ
โโโ pages/ # ้กต้ข็ปไปถ
โ โโโ Home.tsx # ไธป้กต
โ โโโ BlogList.tsx # ๅๅฎขๅฝๆกฃ้กต
โ โโโ BlogPost.tsx # ๅๅฎขๆ็ซ ่ฏฆๆ
้กต
โ
โโโ services/ # API ๆๅกๅฑ
โ โโโ blog.ts # ๅๅฎข API ๅฎขๆท็ซฏ
โ
โโโ locales/ # ๅฝ้
ๅ่ตๆบ
โ โโโ zh.ts # ไธญๆ่ฏญ่จๅ
โ โโโ en.ts # ่ฑๆ่ฏญ่จๅ
โ
โโโ server/ # ๅ็ซฏๆๅก
โโโ index.js # Express ๆๅกๅ
ฅๅฃ
โโโ package.json # ๅ็ซฏไพ่ต้
็ฝฎ
โโโ posts/ # Markdown ๆ็ซ ๅญๅจ็ฎๅฝ
โโโ 1.md
โโโ 2.md
ๆฌ้กน็ฎ้ๆๅบไบๆไปถ็ณป็ป็ๅๅฎข็ฎก็ๅ่ฝ๏ผ่ฟ็ปดไบบๅๅฏ้่ฟๅจๆๅกๅจๆๅฎ็ฎๅฝๆพ็ฝฎ Markdown ๆไปถๅฎ็ฐๆ็ซ ๅๅธใ
- ๅ็ซฏๆๅกๆซๆๆๅฎ็ฎๅฝไธ็
.mdๆไปถ - ่งฃๆๆไปถๅคด้จ็ YAML Front Matter ๆๅๅ ๆฐๆฎ
- ๅ็ซฏ้่ฟ API ่ทๅๆ็ซ ๅ่กจๅๅ ๅฎน
- ไฝฟ็จ react-markdown ๆธฒๆ Markdown ๅ ๅฎน๏ผๆฏๆ่ฏญๆณ้ซไบฎ
ๆ็ซ ้กป้ตๅพชไปฅไธๆ ผๅผ๏ผ
---
title: ๆ็ซ ๆ ้ข
date: 2026-01-25
tags: [ๆ ็ญพ1, ๆ ็ญพ2]
---
# ๆญฃๆๅ
ๅฎน
ๆญคๅค็ผๅ Markdown ๆ ผๅผ็ๆญฃๆๅ
ๅฎนใFront Matter ๅญๆฎต่ฏดๆ๏ผ
| ๅญๆฎต | ็ฑปๅ | ๅฟ ๅกซ | ่ฏดๆ |
|---|---|---|---|
| title | string | ๆฏ | ๆ็ซ ๆ ้ข๏ผ็จไบๅ่กจๅ่ฏฆๆ ้กตๅฑ็คบ |
| date | string | ๆฏ | ๅๅธๆฅๆ๏ผๆ ผๅผไธบ YYYY-MM-DD๏ผ็จไบๆๅบ |
| tags | array | ๅฆ | ๆ็ซ ๆ ็ญพ๏ผ็จไบๅ็ฑปๅฑ็คบ |
| excerpt | string | ๅฆ | ่ชๅฎไนๆ่ฆ๏ผ้ป่ฎคๅๆญฃๆๅ 150 ๅญ็ฌฆ |
| ๅ่ฝ | ่ฏดๆ |
|---|---|
| ๆ ้ข | ๆฏๆ H1-H6 ๅค็บงๆ ้ข |
| ๆๆฌๆ ผๅผ | ็ฒไฝใๆไฝใๅ ้ค็บฟ |
| ๅ่กจ | ๆๅบๅ่กจใๆ ๅบๅ่กจใไปปๅกๅ่กจ๏ผๅธฆๅค้ๆก๏ผ |
| ไปฃ็ | ่กๅ ไปฃ็ ใไปฃ็ ๅ๏ผๆฏๆ่ฏญๆณ้ซไบฎ๏ผ |
| ่กจๆ ผ | GFM ้ฃๆ ผ่กจๆ ผ |
| ้พๆฅไธๅพ็ | ๆ ๅ Markdown ่ฏญๆณ |
| ๅผ็จ | ๅๅผ็จ |
| ๅ้็บฟ | ๆฐดๅนณๅ้็บฟ |
ๆ็ซ URL ไปฅๆไปถๅ๏ผไธๅซๆฉๅฑๅ๏ผไฝไธบๆ ่ฏ็ฌฆ๏ผ
| ๆไปถ่ทฏๅพ | ่ฎฟ้ฎ URL |
|---|---|
server/posts/1.md |
/blog/1 |
server/posts/guide.md |
/blog/guide |
server/posts/2026-01-news.md |
/blog/2026-01-news |
ๆ็ซ ๅญๅจ็ฎๅฝๅฏ้่ฟ็ฏๅขๅ้ POSTS_DIR ่ชๅฎไน๏ผ
POSTS_DIR=/var/www/blog/posts node server/index.js่ฅๆช่ฎพ็ฝฎ่ฏฅๅ้๏ผ้ป่ฎคไฝฟ็จ server/posts/ ็ฎๅฝใ
- Node.js 18.0 ๆๆด้ซ็ๆฌ๏ผๆจ่ไฝฟ็จ LTS ็ๆฌ๏ผ
- npm ๆ yarn ๅ ็ฎก็ๅจ
# ๅฎ่ฃ
ๅ็ซฏไพ่ต
npm install
# ๅฎ่ฃ
ๅ็ซฏไพ่ต
cd server && npm install้ๅๆถๅฏๅจๅ็ซฏๅผๅๆๅกๅจไธๅ็ซฏ API ๆๅก๏ผ
# ็ป็ซฏ 1๏ผๅฏๅจๅ็ซฏๆๅก๏ผ็ซฏๅฃ 3002๏ผ
cd server && npm run dev
# ็ป็ซฏ 2๏ผๅฏๅจๅ็ซฏๆๅก๏ผ็ซฏๅฃ 3000๏ผ
npm run devๅฏๅจๅฎๆๅ๏ผ่ฎฟ้ฎ http://localhost:3000 ๅณๅฏ้ข่ง็ฝ็ซใ
ๆง่กไปฅไธๅฝไปค็ๆไผๅๅ็้ๆ่ตๆบ๏ผ
npm run buildๆๅปบไบง็ฉ่พๅบ่ณ dist ็ฎๅฝใ
้ข่ง็ไบงๆๅปบ็ปๆ๏ผ
npm run previewๅ็ซฏๆๅกๆไพไปฅไธ RESTful API ๆฅๅฃ๏ผ
่ฏทๆฑ
GET /api/posts
ๅๅบ
{
"posts": [
{
"id": "1",
"title": "ๆ็ซ ๆ ้ข",
"date": "2026.01.25",
"excerpt": "ๆ็ซ ๆ่ฆ๏ผๅๆญฃๆๅ 150 ๅญ็ฌฆ...",
"tags": ["ๆ ็ญพ1", "ๆ ็ญพ2"]
}
]
}ๆ็ซ ๆๅๅธๆฅๆ้ๅบๆๅใ
่ฏทๆฑ
GET /api/posts/:id
ๅๅบ
{
"id": "1",
"title": "ๆ็ซ ๆ ้ข",
"date": "2026.01.25",
"content": "Markdown ๆ ผๅผ็ๅฎๆดๆญฃๆๅ
ๅฎน...",
"tags": ["ๆ ็ญพ1", "ๆ ็ญพ2"]
}้่ฏฏๅๅบ
{
"error": "Post not found"
}็ถๆ็ ๏ผ404
้กน็ฎ้
็ฝฎๆไปถ vite.config.ts ๅ
ๅซไปฅไธๅ
ณ้ฎ้
็ฝฎ๏ผ
- ่ทฏๅพๅซๅ๏ผ
@ๆๅ้กน็ฎๆ น็ฎๅฝ - ๅผๅๆๅกๅจ๏ผ็ซฏๅฃ 3000๏ผๅฏ็จ host ไปฅๆฏๆๅฑๅ็ฝ่ฎฟ้ฎ
- API ไปฃ็๏ผๅผๅ็ฏๅขไธ
/api่ฏทๆฑไปฃ็่ณๅ็ซฏๆๅกhttp://localhost:3002
ๆฌ้กน็ฎไธบไธๆ่ฝฏไปถ๏ผ็ๆๅฝ็ปๆซๅฐๅทฅไธไบบไบ้จๆๆใๆช็ปๆๆ๏ผ็ฆๆญขๅคๅถใไฟฎๆนๆๅๅใ