Build a PR Preview Workflow: Publish Pull Request Demos with GitHub Actions and htmlfile.cloud

Ship faster code reviews: publish a preview URL for every PR with GitHub Actions and htmlfile.cloud

Hook: If your reviewers keep asking “Can you share a build?” or you’re juggling DNS, SSL and a slow deploy pipeline just to show a tiny change, you need per‑PR previews that are instant, secure and easy to share. This tutorial shows a practical workflow—using GitHub Actions and htmlfile.cloud—to publish an isolated preview URL for every pull request and delete it automatically when the PR closes.

Why per‑PR previews matter in 2026

Preview environments were already mainstream by 2024. In 2026 they’ve become mission‑critical for high‑velocity teams as edge CDNs and serverless runtimes made ephemeral sites fast and cheap. Teams that use instant preview links reduce context switching, accelerate UI feedback, and let non‑technical stakeholders click a URL instead of pulling and building locally.

“A preview link is the single most powerful artifact you can attach to a PR—no screenshots, no ambiguous repro steps, just the real thing.”

What you’ll get by following this guide

• A reproducible GitHub Actions workflow that builds static assets and uploads them to htmlfile.cloud
• An automated PR comment with a shareable preview URL
• Secure cleanup when the PR is closed or merged
• Best practices for size, caching, and access control in 2026

Prerequisites

• A GitHub repository with your static site or single HTML file(s)
• An htmlfile.cloud account and API key (store it in GitHub Secrets as HTMLFILE_API_KEY)
• Basic familiarity with GitHub Actions YAML

High‑level flow

1. On pull_request (opened, synchronize): run a build that produces a directory of static files.
2. Package and upload files to htmlfile.cloud via its preview API.
3. Read the response and post the preview URL in the PR as a comment.
4. On pull_request (closed): delete the preview resource so previews don’t linger.

GitHub Actions workflow (complete example)

Place this file at .github/workflows/pr-preview.yml. It shows a minimal, production‑ready flow that handles creation and cleanup.

# .github/workflows/pr-preview.yml
name: PR Preview

on:
  pull_request:
    types: [opened, synchronize, reopened, closed]

permissions:
  contents: read
  issues: write   # needed to comment on PR

jobs:
  preview:
    runs-on: ubuntu-latest
    if: "github.event.pull_request.user.type != 'Bot'"
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Set up Node.js (if you use a static builder)
        uses: actions/setup-node@v4
        with:
          node-version: '18'

      - name: Install deps
        run: npm ci

      - name: Build site
        run: npm run build

      - name: Archive build output
        if: ${{ github.event.action != 'closed' }}
        run: |
          cd dist
          zip -r ../preview.zip .

      - name: Upload preview to htmlfile.cloud
        if: ${{ github.event.action != 'closed' }}
        env:
          HTMLFILE_API_KEY: ${{ secrets.HTMLFILE_API_KEY }}
          PR_NUMBER: ${{ github.event.number }}
          REPO: ${{ github.repository }}
          COMMIT: ${{ github.sha }}
        run: |
          RESPONSE=$(curl -s -X POST "https://api.htmlfile.cloud/v1/previews" \
            -H "Authorization: Bearer $HTMLFILE_API_KEY" \
            -F "file=@preview.zip" \
            -F "meta={\"repo\":\"$REPO\",\"pr\":$PR_NUMBER,\"commit\":\"$COMMIT\"};type=application/json")
          echo "response=$RESPONSE" >> $GITHUB_OUTPUT
          # Extract the URL (jq is available on ubuntu-latest)
          PREVIEW_URL=$(echo "$RESPONSE" | jq -r '.url')
          echo "preview_url=$PREVIEW_URL" >> $GITHUB_OUTPUT

      - name: Comment preview URL on PR
        if: ${{ github.event.action != 'closed' }}
        uses: actions/github-script@v7
        with:
          result-encoding: string
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
            const url = process.env.PREVIEW_URL || core.getOutput('preview_url') || ''
            if (!url) return core.setFailed('Preview URL missing')
            const body = `Preview available: ${url}\n\nBuilt from commit: ${process.env.COMMIT}`
            await github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
              body
            })

      - name: Cleanup preview when PR is closed
        if: ${{ github.event.action == 'closed' }}
        env:
          HTMLFILE_API_KEY: ${{ secrets.HTMLFILE_API_KEY }}
          PR_NUMBER: ${{ github.event.number }}
        run: |
          # Tell htmlfile.cloud to delete the preview for this PR
          curl -s -X DELETE "https://api.htmlfile.cloud/v1/previews/pr/$PR_NUMBER" \
            -H "Authorization: Bearer $HTMLFILE_API_KEY" || true
  

How this workflow works (step by step)

• Build: npm run build places static assets into dist/ (adjust for your stack — Hugo, Jekyll, Eleventy, or a plain HTML file).
• Archive: create a zip so the upload step sends one artifact.
• Upload: the curl POST hits htmlfile.cloud’s preview API and returns a JSON object with a url.
• Comment: the action posts a comment to the PR with the preview link so reviewers and stakeholders can open the exact build that corresponds to the PR.
• Cleanup: when the PR is closed, a DELETE request removes the preview.

Security and best practices

Previews are convenient—but they must be secure and cost‑efficient. Use these rules:

• Store credentials securely: use GitHub Secrets for the htmlfile.cloud API key and never hard‑code it.
• Limit the token: create an API key on htmlfile.cloud scoped only to preview creation/deletion.
• Short TTL: configure previews to expire automatically after a short TTL (e.g., 7 days) to avoid accumulating storage and exposure.
• PR access control: if previews contain sensitive data, enable tokenized access or require a simple passphrase so only invited reviewers can view them.
• Sanitize builds: don’t include environment secrets in the static output. Use environment variables only at build time and avoid embedding server keys into client assets.

Advanced strategies and scaling tips

1) Use a branch‑or‑PR naming convention

Map preview URLs to a predictable pattern: https://pr-123.htmlfile.cloud/. That makes it easy to programmatically find or prefetch previews from a dashboard.

2) Preview multiple build artifacts

If your repo builds multiple sites (docs, admin UI, marketing), upload each artifact separately and include links in a single PR comment. Use JSON metadata when calling the upload API so htmlfile.cloud can surface the variants.

3) Add a status check with the preview URL

Beyond comments, you can post a commit status or a check with the preview URL. That surfaces the preview right in the Checks panel on GitHub and is accessible to CI integrations.

4) Cache assets and use CDN edge rules

Set cache headers on static assets and allow htmlfile.cloud to use a CDN (edge network) to ensure sub‑100ms response times worldwide. In 2026, edge CDNs are default; configure your CDN TTLs for fast performance during review and longer TTLs for merged releases.

5) Handle big files and binary assets

Split large uploads (e.g., >50MB) and use htmlfile.cloud’s chunked upload API, or store large binaries in an object storage bucket (S3) and reference them. Keep builds lean to keep previews fast.

Metrics to track (what to measure)

• Average time from PR open to preview published
• Number of preview views per PR (gauge reviewer engagement)
• Preview lifetime (how long previews live before deletion)
• Build success rate and time — spot flaky builds slowing reviews

Example: Team workflow and outcomes

Here’s a short, realistic example from a front‑end team integrating this flow in late 2025:

• Before previews: reviewers requested local builds, wasting ~20 minutes per review. Stakeholders asked for screenshots because they couldn’t run builds.
• After: every PR had a preview URL. Product managers opened a single link, left comments, and testers validated UI on devices. The team eliminated repetitive setup steps and shortened review cycles.

Result: fewer context switches, faster approvals, and clearer screenshots embedded in tickets and Docs. These qualitative wins mirror the industry trend toward ephemeral, link‑based reviews adopted across engineering orgs in 2024–2026.

Troubleshooting checklist

• No preview URL in comment: check that the upload step returns .url and ensure jq parsed it correctly.
• Preview not found: verify the PR number mapping and that the DELETE endpoint wasn’t called prematurely.
• Slow load times: check CDN cache control headers and asset sizes (images, fonts).
• Authentication errors: validate the API key and its permissions on htmlfile.cloud and confirm the secret name in GitHub matches.

2026 trends you should know

• Ephemeral environments as default: More platforms now provide ephemeral preview endpoints out of the box; teams expect instant links from CI systems.
• Edge compute + static hosting convergence: It’s common to host static previews on edge CDNs with functions for small dynamic hooks—great for feature toggles and secure preview gating.
• GitOps and observability: Preview artifacts are being tied to observability tools so reviewers can see performance metrics for the exact preview they opened.
• Cost optimization automation: Auto‑cleanup and TTL policies are standard to keep preview costs negligible for large orgs.

Checklist before you roll this out to teams

1. Store and rotate API keys; audit access.
2. Create a template PR comment format with the preview link and build metadata (commit SHA, date).
3. Decide on privacy: public preview links vs. tokenized access—choose per repo sensitivity.
4. Automate cleanup on merge or after a TTL to reduce cost and surface stale previews.
5. Provide a one‑click “open preview” in PR templates so reviewers see it immediately.

Final notes and pitfalls to avoid

Avoid turning previews into long‑term hosting—these are ephemeral. If a preview becomes a de‑facto staging environment, you’ll reintroduce the operational burden this pattern intends to remove. Keep previews small, isolated, and short‑lived.

Also, remember that a preview is only as useful as the build it represents: invest in reliable builds and deterministic assets so every preview accurately reflects the code under review.

Actionable takeaways

• Implement the GitHub Actions workflow above to publish a preview URL for each PR.
• Securely store and scope your htmlfile.cloud API key and enable automatic TTLs.
• Post the preview URL as a PR comment and optionally as a status/check for visibility.
• Automate cleanup on PR close and monitor preview metrics to optimize cost and performance.

Get started now

Ready to cut review friction? Create an htmlfile.cloud API key, add it to your repo secrets as HTMLFILE_API_KEY, drop the workflow above into .github/workflows/pr-preview.yml, and push a PR. You’ll have a shareable, fast preview URL in minutes.

Want a template repo or a CI badge to show preview health? Grab the official GitHub Actions template in the htmlfile.cloud docs or reach out to support to get a starter repo for your tech stack.

Call to action

Try this workflow on your next feature branch—publish previews for every PR, shorten review cycles, and give stakeholders something they can click. Sign up for htmlfile.cloud, add your API key to GitHub Secrets, and drop the YAML above into your repo. If you want a customized template (React, Vue, Hugo, or plain HTML), request one and we’ll tailor the workflow for your stack.

Related Reading

• Mini-Case: How a Microdrama Series Scaled via AI Editing to 10M Views (And How to Buy That Formula)
• Recreate Red Carpet Makeup at Home: Step‑by‑Step Looks Inspired by Oscars' Biggest Moments
• Matching Your Watch to Your Dogwalk Outfit: Mini-Me Style for Owners and Pets
• The Best 3-in-1 Chargers for Travelers: Save on Portable Power Without Sacrificing Speed
• Case Study: How a Lifelong Learner Used Gemini to Land a Marketing Internship