blog/source/_drafts/Build-Vuepress.md

5.0 KiB
Raw Blame History

title date cover tags categories toc
构建 VuePress 2.0.0 并部署到 Vercel 2022-01-31 https://xgjalbum.oss-cn-hangzhou.aliyuncs.com/43cb7c243eab49d55b481gb8/4708A2D8-A84C-11ED-89C6-C03EBA168291.png?x-oss-process=image/format,webp
VuePress
Vercel
写 BUG 日常
野生技术协会
true

使用 Vercel 来构建最新最热的 VuePress 2.0 把任务交给 CI解放你的双手

使用 vuepress-template 来构建

得益于 Vercel你只需要点点按钮就可以直接构建出来一个带有基础功能的 VuePress 文档。

首先找到 vuepress-template,拉到最后,你可以根据需要来选择构建方式,以及主题。

分为三个选项,保留 docs 目录的传统主题、 theme-hope 主题和无 docs 目录的选项,点击对应的按钮即可直接跳转到 Vercel 并构建。再根据后面的图片修改构建方式即可。

真的非常简单也非常方便,但是再 config.ts 提供的自定义参数并不多,你可以参考文档对构建出来的文档做更多的自定义优化。

这里是一个 demo

使用传统方式构建 VuePress

构建 package.json

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

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

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

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "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

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 实例

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

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

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,并把你上一步构建好的 VuePress 上传到 Github 仓库中(如果一开始就在仓库中编辑则无需此操作)

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

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

点击「Deploy」即可完成部署