How to Set Up a Continuous Deployment Pipeline in 2 Hours Using Vercel and GitHub Actions

If you're a solo developer or indie hacker, the idea of setting up a continuous deployment (CD) pipeline can feel overwhelming. But it doesn’t have to be. In fact, you can have a robust pipeline up and running in just two hours. This guide will walk you through using Vercel and GitHub Actions to automate your deployments, allowing you to focus on building rather than deploying.

Prerequisites: What You Need Before You Start

Before diving in, ensure you have the following:

• A GitHub account (Free tier is sufficient)
• A Vercel account (Free tier available)
• A basic understanding of Git and GitHub
• Node.js installed on your local machine (version 14 or higher recommended)

Step 1: Create a New Project on Vercel

1. Sign in to Vercel: If you don’t have an account, you can sign up for free.
2. Create a New Project: Click on ‘New Project’ and import your repository from GitHub.
3. Configure Your Project: Choose the framework you’re using (like Next.js, React, etc.) and click ‘Deploy’. Vercel will automatically set up the initial deployment.

Expected Output:

Your project should be live on a Vercel URL like your-project-name.vercel.app.

Step 2: Set Up GitHub Actions for Continuous Deployment

1. Create a .github/workflows Directory: In your project repository, create the directory .github/workflows.

2. Add a Deployment YAML File: Create a file named deploy.yml in that directory. Here’s a basic setup:

   name: Deploy to Vercel
   
   on:
     push:
       branches:
         - main
   
   jobs:
     deploy:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout repository
           uses: actions/checkout@v2
   
         - name: Deploy to Vercel
           uses: amondnet/vercel-action@v20.0.0
           with:
             vercel-token: ${{ secrets.VERCEL_TOKEN }}
             vercel-args: '--prod'
             working-directory: './'
   

3. Set Up GitHub Secrets: Go to your repository settings in GitHub, click on Secrets, and add your Vercel token as VERCEL_TOKEN. You can get this token from your Vercel account settings.

Expected Output:

Every time you push to the main branch, GitHub Actions will automatically deploy your app to Vercel.

Step 3: Testing Your Pipeline

1. Make a Change: Edit a file in your project, commit the changes, and push to main.
2. Check GitHub Actions: Navigate to the ‘Actions’ tab on GitHub. You should see your deployment running.
3. Verify Deployment: Once the action completes, check your Vercel URL to see the changes live.

Troubleshooting:

• Common Issues: If the GitHub Action fails, check the logs for any error messages. Make sure your Vercel token is correct and that your project builds locally.

What Could Go Wrong

• Build Failures: If your project doesn’t build correctly, you might see errors in your GitHub Actions logs. Ensure all dependencies are correctly installed and your project builds locally.
• Environment Variables: If your app relies on environment variables, make sure they are set in Vercel’s dashboard.

What's Next: Enhancing Your Pipeline

Once your pipeline is set up, consider enhancing it with:

• Testing: Add a testing stage in your GitHub Actions workflow to run tests before deployment.
• Notifications: Set up notifications (like Slack or email) to alert you when deployments succeed or fail.

Conclusion: Start Here

Setting up a continuous deployment pipeline with Vercel and GitHub Actions can significantly streamline your development process. For solo developers, this automation allows you to focus on building features rather than worrying about manual deployments.

If you follow these steps, you’ll have a CD pipeline running in about two hours.

What We Actually Use:

We use Vercel for hosting and GitHub Actions for automation in our projects. It’s straightforward, cost-effective, and works great for projects up to around 1000 users before you might need to consider scaling solutions.