搭建 VitePress 网站

创建 VitePress 项目、配置脚本、首页、博客列表和文章目录，先把一个可运行的网站骨架搭起来。

创建项目

mkdir my-site
cd my-site
npm init -y
npm install -D vitepress

在 package.json 中添加脚本：

{
  "scripts": {
    "dev": "vitepress dev",
    "build": "vitepress build",
    "preview": "vitepress preview",
    "serve": "node server/index.js",
    "start": "node server/index.js"
  },
  "type": "module"
}

创建基础文件

mkdir -p .vitepress/theme
mkdir -p blog/posts
touch index.md

首页可以先写一个普通 Markdown 页面：

# My Site

Hello VitePress.

创建博客列表页

创建 blog/index.md：

---
aside: false
sidebar: false
prev: false
next: false
auth: false
---

<ClientOnly>
<Blog />
</ClientOnly>

auth: false 表示这个页面不需要登录即可完整访问。

创建文章

创建 blog/posts/example.md：

---
date: 2026-01-01
title: 示例文章
description: 这是一篇示例文章
hero: example
category: Notes
tags:
  - VitePress
---

# 示例文章

这里是文章内容。

如果设置了 hero: example，对应图片可以放在：

public/assets/post-hero/example.png

本地开发

npm run dev

默认访问：

http://localhost:5173

构建：

npm run build

构建结果在：

.vitepress/dist