搭建VUEPRSS文档+Github+腾讯云EdgeOne

1353 字

7 分钟

搭建VUEPRSS文档+Github+腾讯云EdgeOne

2026-04-06

日新月异

建站笔记

本教程以自用为主，使用的是基于Vuepress的plume主题。预览网站：yunriver.com

本地安装#

安装教程详见官方文档，以pnpm为例，在本地运行以下命令：

1
pnpm create vuepress-theme-plume@latest

本地调试：

1
pnpm run docs:dev

设立专题/集合#

plume主题支持集合的概念，即一个项目下可以有多个子文档库，子文档库之间使用独立的导航栏。

集合有两种类型，分别是post类型和doc类型。post类型实现博客功能，doc类型实现文档库功能、带有侧边栏。

打开 .vuepress/collections.ts 文件，以设置“生活记”、“投资记”、“健康记”三个专题为例，修改代码如下：

1
import { defineCollection, defineCollections } from 'vuepress-theme-plume'
2

3
//const blog = defineCollection({
4
  // post 类型，这里用于实现 博客功能
5
  //type: 'post',
6
  // 文档集合所在目录，相对于 `docs`
7
  //dir: 'blog',
8
  // 文档标题，它将用于在页面的面包屑导航中显示
9
  //title: 'Blog',
10
  // 文章列表页的链接，如果 `linkPrefix` 未定义，它也将作为 相关的文章的 //permalink 的前缀
11
  //link: '/blog/',
12
  //   linkPrefix: '/article/', // 相关文章的链接前缀
13
  //   postList: true, // 是否启用文章列表页
14
  //   tags: true, // 是否启用标签页
15
  //   archives: true, // 是否启用归档页
16
  //   categories: true, // 是否启用分类页
17
  //   postCover: 'right', // 文章封面位置
18
  //   pagination: 15, // 每页显示文章数量
19
//})
20

21
const lifeDoc = defineCollection({
22
  // doc 类型，该类型带有侧边栏
23
  type: 'doc',
24
  // 文档集合所在目录，相对于 `docs`
25
  dir: 'lifedoc',
26
  // `dir` 所指向的目录中的所有 markdown 文件，其 permalink 需要以 `linkPrefix` 配置作为前缀
27
  // 如果 前缀不一致，则无法生成侧边栏。
28
  // 所以请确保  markdown 文件的 permalink 都以 `linkPrefix` 开头
29
  linkPrefix: '/lifedoc',
30
  // 文档标题，它将用于在页面的面包屑导航中显示
31
  title: '生活记',
32
  // 手动配置侧边栏结构
33
  //sidebar: ['', 'foo', 'bar'],
34
  // 根据文件结构自动生成侧边栏
35
  sidebar: 'auto',
36
})
37

38
const investDoc = defineCollection({
39
  // doc 类型，该类型带有侧边栏
40
  type: 'doc',
41
  // 文档集合所在目录，相对于 `docs`
42
  dir: 'invest',
43
  // `dir` 所指向的目录中的所有 markdown 文件，其 permalink 需要以 `linkPrefix` 配置作为前缀
44
  // 如果 前缀不一致，则无法生成侧边栏。
45
  // 所以请确保  markdown 文件的 permalink 都以 `linkPrefix` 开头
46
  linkPrefix: '/invest',
47
  // 文档标题，它将用于在页面的面包屑导航中显示
48
  title: '投资记',
49
  // 手动配置侧边栏结构
50
  //sidebar: ['', 'foo', 'bar'],
51
  // 根据文件结构自动生成侧边栏
52
  sidebar: 'auto',
53
})
54

55
const health = defineCollection({
56
  // doc 类型，该类型带有侧边栏
57
  type: 'doc',
58
  // 文档集合所在目录，相对于 `docs`
59
  dir: 'health',
60
  // `dir` 所指向的目录中的所有 markdown 文件，其 permalink 需要以 `linkPrefix` 配置作为前缀
61
  // 如果 前缀不一致，则无法生成侧边栏。
62
  // 所以请确保  markdown 文件的 permalink 都以 `linkPrefix` 开头
63
  linkPrefix: '/health',
64
  // 文档标题，它将用于在页面的面包屑导航中显示
65
  title: '健身记',
66
  // 手动配置侧边栏结构
67
  //sidebar: ['', 'foo', 'bar'],
68
  // 根据文件结构自动生成侧边栏
69
  sidebar: 'auto',
70
})
71

72
/**
73
 * 导出所有的 collections
74
 * (blog 为博客示例，如果不需要博客功能，请删除)
75
 * (demoDoc 为参考示例，如果不需要它，请删除)
76
 */
77
export default defineCollections([
78

79
//blog
80
lifeDoc,
81
investDoc,
82
health,
83
])

上述三个专题的对应访问页面分别是

https://你的域名/lifedoc

https://你的域名/invest

https://你的域名/health

个性化配置#

打开 .vuepress/config.ts 文件，取消对应功能的注释，实现主题的各类功能，包括：自动添加 frontmatter 配置、启用嵌入 bilibili视频语法 @bilibili、启用数学公式、启用图片懒加载等功能。

内容写作#

在部署之后，后续只需要使用Typora等Markdown编辑器，撰写文档内容，专注写作。

markdown文件存放在/docs目录下的对应专题文件夹，图片可以通过Typora的自动复制图片至指定目录的功能，全部存放于docs/.vuepress/public目录下，集中统一管理。

markdown文件的YAML参考如下：

1
title: 文章标题
2
createTime: 2026/03/11 10:53:30
3
permalink: /专题名字/xx/xxxx/

文档结构如下：

1
├── docs
2
│   ├── 专题1
3
│   │   ├── 示例1.md
4
│   │   └── 示例2.md
5
│   ├── 专题2
6
│   │   ├── 示例3.md
7
│   └── README.md

托管至GitHub仓库#

通过Github Desktop或者其他Git工具，将本地文件PUSH到Github的仓库中。

部署到腾讯云EdgeOne#

对于备案域名，使用腾讯云EdgeOne部署能够带来不错的访问体验。

选择导入Git仓库。

构建设置填写如下方案：

1
框架预设 Other
2

3
根目录 ./
4

5
输出目录 docs/.vuepress/dist
6

7
编译命令 npm run docs:build
8

9
安装命令 npm install

开始部署即可。

可选：接入Waline评论#

在VUEPRESS根目录安装Waline前端，运行如下命令：

1
pnpm add -D @waline/client

再打开 .vuepress/config.ts 文件，在 plumeTheme 的配置对象中加入 plugins.comment 模块。

1
import { defineUserConfig } from 'vuepress'
2
import { plumeTheme } from 'vuepress-theme-plume'
3

4
export default defineUserConfig({
5
  theme: plumeTheme({
6
    // 其他的主题配置...
7

8
    plugins: {
9
      comment: {
10
        provider: 'Waline', // 指定服务提供商为 Waline
11
        comment: true, // 全局默认开启评论
12
        serverURL: 'https://你的Waline后端地址', // 填写你现有的 Waline 后端 URL
13

14
        // 以下是 Waline 的可选扩展配置：
15
        // dark: 'html.dark', // 适配 Plume 主题的夜间模式
16
        // emoji: ['https://unpkg.com/@waline/emojis@1.1.0/weibo'], // 自定义表情包
17
      }
18
    }
19
  })
20
})