Setup Documentation Hub
← กลับหน้าหลัก

Setup Guide

คู่มือการติดตั้งและตั้งค่า Documentation Site

Setup Guide

คู่มือการติดตั้งและตั้งค่า Documentation Site แบบ Step-by-Step

ความต้องการของระบบ

ก่อนเริ่มติดตั้ง ตรวจสอบว่าคุณมีสิ่งต่อไปนี้:

  • Node.js version 18 หรือสูงกว่า
  • npm หรือ yarn package manager
  • Git (สำหรับ clone repository)
  • Text Editor (แนะนำ VS Code)

ขั้นตอนการติดตั้ง

1. Clone หรือ Download โปรเจค

ถ้ามี repository อยู่แล้ว:

git clone <your-repository-url>
cd document-blog

หรือสร้างโปรเจคใหม่:

mkdir my-docs-site
cd my-docs-site

2. ติดตั้ง Dependencies

npm install

คำสั่งนี้จะติดตั้ง packages ที่จำเป็น:

  • astro - Framework หลัก
  • @astrojs/mdx - สำหรับเขียน MDX files
  • fuse.js - Fuzzy search สำหรับค้นหาเอกสาร
  • katex, rehype-katex, remark-math - รองรับสูตรคณิตศาสตร์
  • tailwindcss - CSS framework

3. ตรวจสอบโครงสร้างโปรเจค

หลังติดตั้งเสร็จ ควรมีโครงสร้างแบบนี้:

/
├── src/
│   ├── content/
│   │   ├── config.ts
│   │   └── docs/
│   │       └── {project-name}/
│   │           └── *.mdx
│   ├── types/
│   │   ├── index.ts
│   │   └── navigation.ts
│   ├── layouts/
│   │   ├── Layout.astro
│   │   └── DocsLayout.astro
│   ├── components/
│   │   ├── Sidebar.astro
│   │   ├── Toc.astro
│   │   ├── CodeBlock.astro
│   │   ├── Navbar.astro
│   │   ├── Breadcrumb.astro
│   │   └── SearchModal.astro
│   ├── styles/
│   │   └── global.css
│   └── pages/
│       ├── index.astro
│       └── [project]/
│           └── [...slug].astro
├── package.json
└── astro.config.mjs

4. เริ่มต้น Development Server

npm run dev

Server จะทำงานที่ http://localhost:4321

5. ทดสอบการทำงาน

เปิดเบราว์เซอร์ไปที่:

http://localhost:4321

จะเห็นหน้าแรกที่แสดงรายการ Documentation ทั้งหมด

หรือเข้าถึงเอกสารโดยตรง:

http://localhost:4321/docs/project-guide/setup

ถ้าเห็นหน้าเอกสาร แสดงว่าติดตั้งสำเร็จแล้ว!

การตั้งค่าเพิ่มเติม

แก้ไขชื่อเว็บไซต์

แก้ไขไฟล์ src/layouts/Layout.astro:

<title>ชื่อเว็บไซต์ของคุณ</title>

เปลี่ยนภาษา

แก้ไข <html lang="th"> เป็นภาษาที่ต้องการ

ปรับแต่ง Styles

แก้ไข CSS ใน:

  • src/styles/global.css - Styles หลักของเว็บ
  • src/layouts/DocsLayout.astro - Layout ของหน้าเอกสาร
  • src/components/*.astro - Components ต่างๆ

ฟีเจอร์หลัก

  • Search - กด Ctrl+K หรือ Cmd+K เพื่อค้นหา (ใช้ Fuse.js fuzzy search)
  • Math Support - รองรับสูตรคณิตศาสตร์ด้วย KaTeX
  • Breadcrumb - แสดงตำแหน่งปัจจุบันในเอกสาร
  • Table of Contents - สารบัญอัตโนมัติจาก headings

คำสั่งที่ใช้บ่อย

คำสั่งความหมาย
npm run devเริ่ม development server
npm run buildBuild สำหรับ production
npm run previewPreview production build
npm run astro -- --helpดูคำสั่ง Astro CLI

การแก้ไขปัญหาที่พบบ่อย

Port 4321 ถูกใช้งานอยู่

# หา process ที่ใช้ port
lsof -i :4321

# หรือเปลี่ยน port
npm run dev -- --port 3000

Module Not Found Error

# ลบและติดตั้งใหม่
rm -rf node_modules package-lock.json
npm install

MDX Files ไม่แสดง

  1. ตรวจสอบว่าไฟล์อยู่ใน src/content/{project-name}/{section-title}/
  2. ตรวจสอบ frontmatter (title, description, order, category)
  3. ตรวจสอบว่า collection ถูกกำหนดใน src/content/config.ts
  4. Restart dev server

ขั้นตอนถัดไป

  • 📖 อ่าน Usage Guide เพื่อเรียนรู้วิธีเพิ่มเอกสาร
  • 🎨 ปรับแต่ง styles ตามความต้องการ
  • 🚀 Deploy ไปยัง hosting platform

ทรัพยากรเพิ่มเติม