使用 VuePress 2.0 建立文件網站

建立專案

建立專案。

1
2
mkdir my-project
cd my-project

初始化資料夾。

1
2
git init
npm init

安裝套件。

1
npm install -D vuepress@next

修改 package.json 檔。

1
2
3
4
5
6
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}

新增 .gitignore 檔。

1
2
3
/node_modules
/docs/.vuepress/.cache
/docs/.vuepress/.temp

建立文章。

1
2
mkdir docs
echo '# Hello VuePress' > docs/README.md

啟動專案。

1
npm run docs:dev

修改配置

修改 docs/.vuepress/config.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import { defaultTheme } from '@vuepress/theme-default';

module.exports = {
base: '/my-project-docs/',
title: 'My Project',
locales: {
'/': {
lang: 'zh',
},
'/en/': {
lang: 'en',
},
},
displayAllHeaders: true,
theme: defaultTheme({
repo: 'memochou1993/my-project',
docsRepo: 'memochou1993/my-project-docs',
editLink: false,
locales: {
'/': {
selectLanguageName: '中文',
},
'/en/': {
selectLanguageName: 'English',
},
},
sidebar: {
'/': [
{
text: '文件',
children: [
{
text: '介紹',
link: '/',
},
'/getting-started/',
],
},
],
'/en/': [
{
text: 'Documentation',
children: [
{
text: 'Introduction',
link: '/en/',
},
'/en/getting-started/',
],
},
],
},
}),
};

修改樣式

新增 docs/.vuepress/styles/index.scss 檔。

1
2
3
code {
color: var(--c-text);
}

使用 GA 分析

安裝套件。

1
npm i -D @vuepress/plugin-google-analytics@next

修改 docs/.vuepress/config.js 檔。

1
2
3
4
5
6
7
8
9
10
import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'

module.exports = {
// ...
plugins: [
googleAnalyticsPlugin({
id: 'G-L8KJ2RLXX8',
}),
],
};

部署

部署到 GitHub 平台

修改 docs/.vuepress/config.js 檔。

1
2
3
4
module.exports = {
base: '/my-project/',
// ...
}

新增 .github/workflows/docs.yaml 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
name: docs

on:
push:
branches: [main]
workflow_dispatch:

jobs:
docs:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3

- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 18

- name: Cache dependencies
uses: actions/cache@v2
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-

- run: npm ci
- run: npm run build

- name: Deploy to GitHub Pages
uses: crazy-max/ghaction-github-pages@v2
with:
target_branch: gh-pages
build_dir: docs/.vuepress/dist
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

參考資料