Skip to main content

Pull request previews for any static site

Here's a step-by-step guide to help you install PushPreview in your static site.


Before you begin, you'll need to have the following:

  • A PushPreview account. If you don't have one, sign up for free.
  • An static site (HTML) created.

1. Add the workflow to your repository

To set up the PushPreview workflow in your project:

  1. Go to the .github/workflows directory in your repository.

  2. Create a new file named pushpreview.yml.

  3. Copy the following content into pushpreview.yml:

    name: PushPreview

    - labeled

    runs-on: ubuntu-latest
    if: == 'preview'
    - uses: actions/checkout@v3
    - name: Comment
    run: |
    gh pr comment ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --body "⚙️ Hang tight! PushPreview is currently building your preview. We'll share the URL as soon as it's ready."
    GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

    - name: Setup environment
    uses: actions/setup-node@v3
    node-version: 18

    - name: Set BASE_URL
    run: echo "BASE_URL=/github/${{ github.repository }}/${{ github.event.number }}/" >> $GITHUB_ENV

    - name: Build site
    run: |
    cd docs
    yarn install --frozen-lockfile
    yarn build

    - name: Generate preview
    uses: PushLabsHQ/pushpreview-action@1.0.6
    source-directory: ./docs/build
    github-token: ${{ secrets.GITHUB_TOKEN }}
    pushpreview-token: ${{ secrets.PUSHPREVIEW_TOKEN }}
  4. Modify the Setup environment and Build site steps to match your specific static site build process.

  5. Ensure the source-directory in the Generate preview step points to where your HTML files are located after the build.

  6. Save your changes and push the updated pushpreview.yml file to your repository.

2. Configure the GitHub secret

To configure the GitHub secret, follow these steps:

  1. Generate a PushFeedback token. For more information, see Authentication.

  2. Go to the Settings tab of your GitHub repository or organization.

  3. In the Settings menu, navigate to Secrets and chose Actions.

  4. Click on New repository secret or New organization secret, depending on your choice in the previous step.

  5. Use the following details to create a new token:

    • Token: The token you have generated.
  6. Click Add secret.

3. Verify the installation

To ensure proper functioning of the PushPreview integration in your GitHub repository, follow these steps:

  1. Create a new pull request in your GitHub repository.

  2. Add the preview label to your new pull request. If the label doesn’t exist, create a new one.

    Preview changes

  3. Wait briefly for PushPreview to process the pull request and post a comment in the pull request thread.

  4. Look for a comment from PushPreview containing a preview link. Click this link to view the changes.

Congratulations on setting up PushPreview! Your users can now view live previews of changes in pull requests, enhancing collaboration and review efficiency.