blog/source/_posts/Build-Vuepress.md

170 lines
5.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: 构建 VuePress 2.0.0 并部署到 Vercel
date: 2022-01-31
#cover: https://pic.rmb.bdstatic.com/bjh/0bcca2ae4fb6934fb9390def048d4740.png
cover: https://pic1.58cdn.com.cn/nowater/webim/big/n_v26f90263d006e4bf0bffbf47c638ffa4a.png
tags:
- VuePress
- Vercel
categories:
- 写 BUG 日常
- 野生技术协会
toc: true
---
使用 Vercel 来构建最新最热的 VuePress 2.0
把任务交给 CI解放你的双手
<!--more-->
## 使用 vuepress-examples 来构建(推荐)
得益于 Vercel你只需要点点按钮就可以直接构建出来一个带有基础功能的 VuePress 文档。
首先找到 [vuepress-examples](https://github.com/Nofated095/vuepress-examples),拉到最后,你可以根据需要来选择构建方式,以及主题。
分为三个选项,保留 `docs` 目录的传统主题、 `theme-hope` 主题和无 `docs` 目录的选项,点击对应的按钮即可直接跳转到 Vercel 并构建。再根据后面的图片修改构建方式即可。
真的非常简单也非常方便,但是再 `config.ts` 提供的自定义参数并不多,你可以参考[文档](https://v2.vuepress.vuejs.org/zh/guide/getting-started.html)对构建出来的文档做更多的自定义优化。
这里是一个 [demo](https://vuepress-examples.9595095.xyz/)。
## 使用传统方式构建 VuePress
### 构建 package.json
有两种办法,一种比较方便的是按照官网跑一遍指令,再稍加修改,这种方法全程可以根据[文档](https://v2.vuepress.vuejs.org/zh/guide/getting-started.html)来安装 VuePress。
当然第二种方法就是手搓。这里将详细介绍(
首先,在一个文件夹里,或者仓库里,创建`package.json`,并编辑。
``` json package.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 /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 配置得到更好的类型提示。
如上是一个比较基本的自定义配置,确实很基础,你可以在[官方文档](https://v2.VuePress.vuejs.org/zh/reference/default-theme/config.html)查看更多。
### 一些 VuePress 实例
```
├─ docs
│ ├─ .VuePress
│ │ └─ config.ts
│ ├─ category
│ │ └─ README.md
│ │ └─ 1.md
│ │ └─ 2.md
│ └─ README.md
├─ .gitignore
└─ package.json
```
就可以像这样编辑 `/docs/.VuePress/config.ts` 加上 Navbar 和 Side
``` typescript /docs/.VuePress/config.ts
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 官方文档](https://v2.VuePress.vuejs.org/zh/guide/configuration.html),文章里说的仅仅是 VuePress 中极小的一部分。
## 部署到 Vercel
[登录 Vercel](https://vercel.com/dashboard),并把你上一步构建好的 VuePress 上传到 Github 仓库中(如果一开始就在仓库中编辑则无需此操作)
[新建 Vercel 项目](https://vercel.com/new)Import 你刚刚的仓库,但在 「Configure Project」 中要修改 「Build and Output Settings」。
- 「BUILD COMMAND」 中填入 `yarn docs:build`(当然 `npm run docs:build` 也没问题)
- 「OUTPUT DIRECTORY」 中填入 `docs/.vuepress/dist`
点击「Deploy」即可完成部署