VitePress 入门

VitePress 是一个基于 Vite 和 Vue 的静态站点生成器。

快速开始

npm init
npm install vitepress
npx vitepress dev

目录结构

.
├── .vitepress/          # 配置目录
│   └── config.mjs       # 站点配置
├── public/              # 静态资源
├── posts/               # 博客文章
└── index.md             # 首页

文章分类

在 posts/ 下按分类建子目录即可。例如：

posts/tech/ — 技术文章
posts/life/ — 生活随笔

然后在 .vitepress/config.mjs 中的 sidebar 配置相应分组。

构建与部署

构建

npx vitepress build

构建产物在 .vitepress/dist/ 目录下。

上传到服务器

使用 scp 将构建产物上传到 Nginx 站点目录：

scp -r .vitepress/dist/* user@your-server:/var/www/blog/

Nginx 配置

nginx

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/blog;
    index index.html;

    # SPA 路由 fallback
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Docker 镜像部署

项目根目录已包含 Dockerfile 和 nginx.conf，支持一键打包为 Docker 镜像：

dockerfile

# 阶段一：构建
FROM node:20-alpine AS builder
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npx vitepress build

# 阶段二：运行（Nginx 静态服务）
FROM nginx:alpine
COPY --from=builder /app/.vitepress/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建与运行：

# 构建镜像
docker build -t my-blog .

# 运行容器
docker run -d -p 8080:80 --name blog my-blog

之后访问 http://localhost:8080 即可看到博客。

常用操作：

# 更新博客后重新构建
docker build -t my-blog .
docker stop blog && docker rm blog
docker run -d -p 8080:80 --name blog my-blog

# 查看运行状态
docker ps
docker logs blog

# 导出镜像传输到服务器
docker save my-blog | gzip > my-blog.tar.gz
# 在服务器上加载
docker load < my-blog.tar.gz
docker run -d -p 80:80 --name blog my-blog

VitePress 入门 ​

快速开始 ​

目录结构 ​

文章分类 ​

构建与部署 ​

构建 ​

上传到服务器 ​

Nginx 配置 ​

Docker 镜像部署 ​