三水

Appearance

使用vitepress搭建博客 ​

前置准备 ​

  • Node.js 18 及以上版本。
  • 通过命令行界面 (CLI) 访问 VitePress 的终端。
  • 支持 Markdown 语法的编辑器。

步骤 ​

1.初始化项目

bash
pnpm vitepress init

文件结构

bash
.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

2.修改配置文件

js
// .vitepress/config.js
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'My Blog',
  description: 'Just playing around',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' }
    ],
    sidebar: {
      '/guide/': [
        {
          text: 'Guide', items: [
            { text: 'Index', link: '/guide/' },
            { text: 'Markdown Examples', link: '/guide/markdown-examples' },
            { text: 'API Examples', link: '/guide/api-examples' }
          ]
        }
      ]
    }
  }
})

3.启动项目

bash
pnpm docs:dev

4.打包项目

bash
pnpm docs:build