使用 VuePress 2.0 建立文件網站

VuePress
, , ,

建立專案

建立專案。

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 }}

參考資料