使用 VuePress 建立文件網站

建立專案

使用 create-vuepress-site 套件初始化專案。

1
npx create-vuepress-site my-project

修正資料夾結構。

1
2
3
4
cd my-project
mv docs/* .
rm -rf docs
mv src docs

安裝依賴套件。

1
npm install

修改 package.json 檔。

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

啟動服務。

1
npm run dev

前往 http://localhost:8080/ 瀏覽。

部署

部署到 GitHub 平台

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

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

新增 .github/workflows/deploy.yml 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
name: Build and Deploy
on: [push]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
ACCESS_TOKEN: ${{ secrets.GITHUB_TOKEN }}
TARGET_REPO: memochou1993/my-project
TARGET_BRANCH: gh-pages
BUILD_SCRIPT: npm ci && npm run build
BUILD_DIR: .

部署到 GitLab 平台

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

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

新增 .gitlab-ci.yml 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
image: node:10.22.0
pages:
cache:
paths:
- node_modules/
script:
- npm install
- npm run build
artifacts:
paths:
- public
only:
- main

參考資料