构建 VuePress 2.0.0 并部署到 Vercel

Jan 31 2022

帮助每一个懒得跑 vuepress build docs 的人。

前段时间主页和 REMS 的官网换到了基于 VuePress 的页面，并且挂载到了 Vercel 部署，调教好了后终于可以在云端编辑并自动部署，再也不用费劲跑 build 再 deploy 啦！

构建 VuePress

构建 package.json

有两种办法，一种比较方便的是按照官网跑一遍指令，再稍加修改，这种方法全程可以根据文档来安装 Vuepress。

当然第二种方法就是手搓。这里将详细介绍（

首先，在一个文件夹里，或者仓库里，创建package.json，并编辑。

json

{
  "name": "vuepress_example",
  "version": "1.0.0",
  "description": "An example of Vuepress",
  "main": "index.ts",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "keywords": [],
  "author": "Your Name Here",
  "license": "CC BY-NC-SA 4.0",
  "devDependencies": {
    "vuepress": "^2.0.0-beta.35"
  }
}

这里面只安装了 VuePress 的 2.0.0 版本，没有任何额外的插件和主题。

构建 VuePress 目录

最基本的网站肯定不够我们玩，所以下面我们可以来自定义。请按照下图构建目录和文件。

├─ docs
│  ├─ .vuepress
│  │  └─ config.ts
│  └─ README.md
├─ .gitignore
└─ package.json

自定义文档

编辑 /docs/.vuepress/config.ts

typescript

import { defineUserConfig } from 'vuepress'
import type { DefaultThemeOptions } from 'vuepress'

export default defineUserConfig<DefaultThemeOptions>({
  // 站点配置
  lang: 'en-US',
  title: 'Hello VuePress',
  description: 'Just playing around',

  // 主题和它的配置
  theme: '@vuepress/theme-default',
  themeConfig: {
    logo: 'https://vuejs.org/images/logo.png',
  },
})

当然你也可以使用 JavaScript，但是按官网说法，TypeScript 可以让 VuePress 配置得到更好的类型提示。

如上是一个比较基本的自定义配置，确实很基础，你可以在官方文档查看更多。

一些 VuePress 实例

Nofated095/docs

其文件目录和下面类似

├─ docs
│  ├─ .vuepress
│  │  └─ config.ts
│  ├─ category
│  │  └─ README.md
│  │  └─ 1.md
│  │  └─ 2.md
│  └─ README.md
├─ .gitignore
└─ package.json

就可以像这样编辑 /docs/.vuepress/config.ts 加上 Navbar 和 Side

typescript

import { defineUserConfig } from ’vuepress‘
import type { DefaultThemeOptions } from ’vuepress‘

export default defineUserConfig<DefaultThemeOptions>({
  // 站点配置
  lang: ’zh-CN‘,
  title: ’A VuePress Example‘,
  description: ’The Description‘,

  // 主题和它的配置
  theme: ’@vuepress/theme-default‘,
  themeConfig: {
    logo: ’https://pic.rmb.bdstatic.com/bjh/2d44fc3e673283cbbd6f8f97974c0340.png‘,
    head: [
      [’link‘, { rel: ’icon‘, href: ’https://pic.rmb.bdstatic.com/bjh/c0f70aee81771615db8599a0fb93cc3e.png‘ }],
    ],
    navbar: [
      // NavbarItem
      {
        text: ’Home‘,
        link: ’/‘,
      },
      // NavbarGroup
      {
        text: ’Category‘,
        children: [’/category/README.md‘, ’/category/1.md‘, ’/category/2.md‘],
      },
    ],
    sidebar: {
      ’/category/‘: [
        {
          text: ’Category‘,
          children: [’/category/README.md‘, ’/category/1.md‘, ’/category/2.md‘],
        },
      ],
    },
  },
})

更多配置详情还请参考 VuePress 官方文档，文章里说的仅仅是 VuePress 中极小的一部分。

部署到 Vercel

新建 Vercel 项目，Import 你刚刚的仓库，但在「Configure Project」中要修改「Build and Output Settings」。

「BUILD COMMAND」中填入 yarn docs:build（当然 npm run docs:build 也没问题）
「OUTPUT DIRECTORY」中填入 docs/.vuepress/dist

点击「Deploy」即可完成部署！

构建 VuePress 2.0.0 并部署到 Vercel ​

构建 VuePress ​

构建 package.json ​

构建 VuePress 目录 ​

自定义文档 ​

一些 VuePress 实例 ​

部署到 Vercel ​