GitHub Action that automatically builds your project, deploys it to GitHub Pages and creates a PR preview.

• Build, Deploy to GitHub Pages and Deploy PR Preview Action
  • Table of Contents
  • About
  • Usage
    • Vite
    • Docusaurus
  • Configuration
  • License
  • Contributing

This action will automatically build your project, deploy it to GitHub Pages and also create a PR preview.

Usage is very simple and can be done with just a few steps.

If you are using Vite, it is very easy to use this action. This action will automatically configure the base URL for you.

First, you need to create a workflow file in your repository. For example, you can create a file called build-deploy-and-preview.yml in the .github/workflows directory of your repository with the following contents:

name: Build, Deploy to GitHub Pages and Deploy PR Preview

on:
  push:
    branches: [main, master]
  pull_request:
    types:
      - opened
      - reopened
      - synchronize
      - closed

permissions:
  contents: write
  pull-requests: write

concurrency: ci-${{ github.ref }}

jobs:
  build-deploy-and-preview:
    name: Build, Deploy to GitHub Pages and Deploy PR Preview
    runs-on: ubuntu-latest
    steps:
      - name: Build, Deploy to GitHub Pages and Deploy PR Preview
        uses: chvmvd/[email protected]
        with:
          type: vite

Second, you need to ensure that your GitHub repository is configured to use GitHub Pages. You can do this by going to the Settings tab of your repository and selecting the Pages section. You can then select the branch that you want to use for GitHub Pages(The gh-pages is used by convention and is used by this action by default).

First, since GitHub Pages deploys your project to https://<owner>.github.io/<repo>, you have to configure the base URL for your project.

You can do this by editing the docusaurus.config.js file in the root directory of your project.

Inside docusaurus.config.js, add the following line to the baseUrl property of the config object(This action provides the BASE_URL environment variable that contains the base URL of your project):

baseUrl: process.env.GITHUB_ACTIONS ? `${process.env.BASE_URL}/` : "/",

Second, you need to create a workflow file in your repository. For example, you can create a file called build-deploy-and-preview.yml in the .github/workflows directory of your repository with the following contents:

name: Build, Deploy to GitHub Pages and Deploy PR Preview

on:
  push:
    branches: [main, master]
  pull_request:
    types:
      - opened
      - reopened
      - synchronize
      - closed

permissions:
  contents: write
  pull-requests: write

concurrency: ci-${{ github.ref }}

jobs:
  build-deploy-and-preview:
    name: Build, Deploy to GitHub Pages and Deploy PR Preview
    runs-on: ubuntu-latest
    steps:
      - name: Build, Deploy to GitHub Pages and Deploy PR Preview
        uses: chvmvd/[email protected]
        with:
          type: docusaurus

Third, you need to ensure that your GitHub repository is configured to use GitHub Pages. Please refer to the Vite section for more information.

The following configuration options are available:

Currently, only Vite and Docusaurus are supported. I will add support for other frameworks in the future.

This project is licensed under the terms of the MIT license.

Issues and pull requests are always welcome.