Skip to content

GitHub Actions VuePress deployment

GitHub Actions VuePress deployment refers to the automation of building and publishing VuePress projects using continuous integration workflows. This approach allows developers to update content in a source repository and have the generated static site automatically deployed to a hosting service, such as GitHub Pages, upon pushing to the main branch.^[600-developer-blog-vuepress-blog-vuepress-init.md]

Workflow Configuration

A deployment workflow is typically defined in a YAML file within the .github/workflows directory.^[600-developer-blog-vuepress-blog-vuepress-init.md]

Triggers

The workflow is designed to run automatically when code is pushed to the main branch or triggered manually via workflow_dispatch.^[600-developer-blog-vuepress-blog-vuepress-init.md]

Environment Setup

The job runs on an ubuntu-latest environment.^[600-developer-blog-vuepress-blog-vuepress-init.md] It specifies a specific Node.js version (e.g., 16.3.0) to ensure build consistency.^[600-developer-blog-vuepress-blog-vuepress-init.md]

Deployment Steps

The workflow generally follows these steps:

  1. Checkout: The code is checked out using actions/checkout@v3.^[600-developer-blog-vuepress-blog-vuepress-init.md]
  2. History: To ensure features like "Last Updated" function correctly, the checkout step often includes fetch-depth: 0 to retrieve the full git history.^[600-developer-blog-vuepress-blog-vuepress-init.md]
  3. Installation: Dependencies are installed (e.g., npm install -D), often after cleaning previous build artifacts (e.g., rm -rf ./public).^[600-developer-blog-vuepress-blog-vuepress-init.md]
  4. Build: A specialized action, such as jenkey2011/vuepress-deploy, executes the build script and pushes the output to the target repository.^[600-developer-blog-vuepress-blog-vuepress-init.md]

Configuration Variables

Successful deployment requires specific environment variables to be configured within the workflow or repository secrets:

  • ACCESS_TOKEN: A Personal Access Token (PAT) stored in repository secrets, granting permission to push to the target repository.^[600-developer-blog-vuepress-blog-vuepress-init.md]
  • TARGET_REPO: The repository where the static files will be deployed (e.g., username/username.github.io).^[600-developer-blog-vuepress-blog-vuepress-init.md]
  • TARGET_BRANCH: The branch in the target repository to receive the build output (e.g., master).^[600-developer-blog-vuepress-blog-vuepress-init.md]
  • BUILD_SCRIPT: The command to generate the static site (e.g., npm run build).^[600-developer-blog-vuepress-blog-vuepress-init.md]
  • BUILD_DIR: The directory where the build output is generated, which must match the dest setting in the VuePress configuration (e.g., public).^[600-developer-blog-vuepress-blog-vuepress-init.md]

Sources

  • 600-developer-blog-vuepress-blog-vuepress-init.md