1. ติดตั้ง dependencies

สร้างไฟล์ package.json แล้วติดตั้ง dependencies

package.json

{
	"name": "my-vitepress-project",
	"dependencies": {
		"vitepress": "^1.5.0"
	}
}

2. สร้าง project เริ่มต้น

npm

npx vitepress init

pnpm

pnpm vitepress init

yarn

yarn vitepress init

bun

bun vitepress init

เมื่อสร้างแล้วจะได้ folder structure ดังด้านล่าง

Project Structure

├─ docs                  # โฟลเดอร์หลักสำหรับเนื้อหาเว็บไซต์
│ ├─ .vitepress          # โฟลเดอร์สำหรับการตั้งค่าและธีมของ VitePress
│ │ └─ cache             # แคชของ VitePress (สร้างโดยอัตโนมัติ)
│ │ └─ dist              # ไฟล์ที่สร้างขึ้นสำหรับการ build (สร้างโดยอัตโนมัติ)
│ │ └─ theme             # การกำหนดค่าธีมแบบกำหนดเอง (ถ้ามี)
│ │ └─ config.mts        # ไฟล์การตั้งค่าหลักของ VitePress
│ ├─ api-examples.md     # หน้าตัวอย่าง API
│ ├─ markdown-examples.md # หน้าตัวอย่าง Markdown
│ └─ index.md            # หน้าแรกของเว็บไซต์
└─ package.json          # ไฟล์ package.json สำหรับการจัดการ dependencies

และใน package.json จะมีสคริปต์ที่สนับสนุนการทำงานดังนี้

package.json

{
	"scripts": {
		"docs:dev": "vitepress dev docs",
		"docs:build": "vitepress build docs",
		"docs:preview": "vitepress preview docs"
	}
}

3. run

npm

npm run docs:dev

pnpm

pnpm run docs:dev

yarn

yarn docs:dev

bun

bun run docs:dev

::: tips

เราสามารถเปลี่ยน script ได้ เช่น เปลี่ยนเปลี่ยน docs:dev เป็น dev แล้วเมื่อใช้ npm run dev หรือ pnpm run dev หรือ yarn run dev หรือ bun run dev

:::