How to integrate netlify preview in gihub actions ??

[Ayushmore1214]

Select Topic Area

Question

Body

I was working on repo , which needs a github action wokflow , which runs whenever a pull request is added, and shows the preview of that pr in netlify , Help needed , Thank You!

[Joshkihiu]

Go to your Netlify site settings.

Under Site Settings > Build & Deploy > Continuous Deployment:

Connect your GitHub repo.

Enable Deploy Previews under "Deploy Contexts".

Netlify will automatically deploy previews on every PR.

You’ll see the preview link right in the PR page like this:

arduino
Copy
Edit
🟢 Deploy Preview ready!
🔗 https://your-site-example.netlify.app

or go to domain management you'll get the link right there ,anytime you update anything on your repo it will be automatically updated to your domain

[uiahan]

Hi! 👋 You can achieve this using a GitHub Actions workflow that triggers on pull_request and builds your project, then deploys it to Netlify (as a preview).

Here’s a step-by-step setup to help you:

✅ 1. Enable Deploy Previews in Netlify
Make sure your site is already connected to Netlify. Netlify has built-in Deploy Previews for pull requests.

You can just push your PR and Netlify will auto-generate a preview if:

The repo is connected to Netlify.

You gave Netlify access to your GitHub repo.

No custom GitHub Action is needed if this is set up.

🛠 2. (Optional) Custom GitHub Action + Netlify CLI
If you want full control, you can use the Netlify CLI in GitHub Actions:

yaml
Salin
Edit

.github/workflows/deploy-preview.yml

name: Deploy Preview to Netlify

on:
pull_request:
branches:
- main

jobs:
build-and-deploy:
runs-on: ubuntu-latest

steps:
  - name: Checkout code
    uses: actions/checkout@v3

  - name: Install dependencies
    run: npm install

  - name: Build project
    run: npm run build

  - name: Install Netlify CLI
    run: npm install -g netlify-cli

  - name: Deploy to Netlify Preview
    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
    run: |
      netlify deploy --dir=dist --site=$NETLIFY_SITE_ID --auth=$NETLIFY_AUTH_TOKEN --message="Preview for PR #${{ github.event.pull_request.number }}" --json --alias=pr-${{ github.event.pull_request.number }}

🔐 3. Secrets Setup
Add the following secrets to your repo:

NETLIFY_AUTH_TOKEN: Get it from your Netlify user settings.

NETLIFY_SITE_ID: Found in your Netlify site dashboard.

📦 4. Where to See the Preview
Once deployed, Netlify will give you a unique URL like:

arduino
Salin
Edit
https://pr-123--yoursite.netlify.app
You can also print that link in the workflow logs or even post it as a PR comment using github-script.