基于 VitePress 构建的个人博客系统。
- Node.js >= 18.0.0
- npm >= 9.0.0
推荐使用 Node.js v22.23.1 LTS 版本：
- Windows x64: node-v22.23.1-x64.msi
- 其他版本请访问 Node.js 官网
验证安装：
node -v
npm -vnpm installnpm run dev访问 http://localhost:5173 查看博客。
npm run build构建后的文件将输出到 docs/.vitepress/dist 目录。
npm run previewblog/
├── docs/ # 文档目录
│ ├── .vitepress/ # VitePress 配置
│ │ └── config.js # 配置文件
│ ├── posts/ # 博客文章
│ │ ├── index.md # 文章列表
│ │ ├── welcome.md # 欢迎文章
│ │ └── vitepress-guide.md # VitePress 指南
│ ├── public/ # 静态资源
│ ├── index.md # 首页
│ └── about.md # 关于页面
├── node_modules/ # 依赖包
├── .gitignore # Git 忽略文件
├── package.json # 项目配置
└── README.md # 项目说明
- ✅ 基于 VitePress 2.x
- ✅ 支持 Markdown 写作
- ✅ 本地搜索功能
- ✅ 深色模式支持
- ✅ 响应式设计
- ✅ 代码高亮
- ✅ 文章分类
- ✅ Google AdSense 集成
编辑 docs/.vitepress/config.js 文件可以自定义：
- 站点标题和描述
- 导航栏菜单
- 侧边栏结构
- 主题样式
- 社交链接
项目已集成 Google AdSense 自动广告，配置位于 docs/.vitepress/config.js 的 head 部分。
- 在
config.js中找到 AdSense 配置：
head: [
['link', { rel: 'icon', href: '/favicon.ico' }],
// ==================== Google AdSense ====================
[
'script',
{
async: true,
src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX',
crossorigin: 'anonymous'
}
],
],- 将
ca-pub-XXXXXXXXXXXXXXXX替换为你的 AdSense 发布商 ID
- 登录 Google AdSense
- 进入"账户" -> "账户信息"
- 找到"发布商 ID"（格式：ca-pub-XXXXXXXXXXXXXXXX）
- 开发环境：
npm run dev后查看页面源代码，确认<head>中包含 AdSense 脚本 - 生产环境：构建后检查
dist目录中的 HTML 文件
- 在
docs/posts/目录下创建新的.md文件 - 添加 Front Matter（可选）：
---
title: 文章标题
date: 2026-05-30
tags:
- 标签1
- 标签2
---- 在
docs/.vitepress/config.js的侧边栏配置中添加文章链接
VitePress 支持丰富的 Markdown 扩展：
- 容器（提示框、警告框等）
- 代码块高亮
- 表格
- Emoji
- 目录
- 自定义容器
详见 VitePress 文档
推荐使用高性能 VPS 服务器部署博客：
- 搬瓦工 VPS - 高性价比、稳定可靠的云服务器
推荐使用 Namesilo 购买域名，价格实惠、管理方便：
- Namesilo 域名注册（Affiliate）
- 优惠码：Tim2026
sudo apt update
sudo apt install nginx -y在本地执行：
npm run build将 docs/.vitepress/dist 目录的内容上传到服务器。
创建站点配置：
sudo nano /etc/nginx/conf.d/my.conf添加以下配置：
server {
listen 80;
server_name your-domain.com; # 替换为你的域名
root /var/www/blog; # 网站文件目录
index index.html;
location / {
try_files $uri $uri/ $uri.html;
}
# 启用 Gzip 压缩
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}# 测试配置
sudo nginx -t
# 重启 Nginx
sudo systemctl restart nginx
使用 Certbot 配置 HTTPS：
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your-domain.com- 在
config.js中设置base为你的仓库名 - 构建项目：
npm run build - 将
docs/.vitepress/dist目录部署到 GitHub Pages
- 连接你的 Git 仓库
- 设置构建命令：
npm run build - 设置输出目录：
docs/.vitepress/dist
ISC