使用 VuePress 建立文件網站

建立專案

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

npx create-vuepress-site my-project

修正資料夾結構。

cd my-project
mv docs/* .
rm -rf docs
mv src docs

安裝依賴套件。

npm install

修改 package.json 檔。

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

啟動服務。

npm run dev

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

部署

部署到 GitHub 平台

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

module.exports = {
  base: '/my-project/',
  dest: 'public',
  // ...
}

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

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 檔。

module.exports = {
  base: '/my-project/',
  dest: 'public',
  // ...
}

新增 .gitlab-ci.yml 檔。

image: node:10.22.0
pages:
  cache:
    paths:
    - node_modules/
  script:
  - npm install
  - npm run build
  artifacts:
    paths:
    - public
  only:
  - main

參考資料

• VuePress