Deploy Your Website on Vercel for Free: Step-by-Step Guide

Been meaning to write about this for a while...

Hey folks! 😊 So, you want to learn about deploying your website using Vercel? Well, you're in luck because that's exactly what we're diving into today. I've personally struggled with deployment for months, making all the stupid mistakes you can think of. From missing dependencies to wrong configurations, I've seen it all. But don't worry, I'm here to share my journey and help you avoid the facepalm moments I had.

When I First Tried Vercel...

Honestly, when I first tried deploying a website on Vercel, I made this hilarious mistake of forgetting to initialize Git in my project folder. Spoiler: it took me 3 hours to debug what was essentially a typo! But let's not get ahead of ourselves. Here's a friendly guide to make sure your first deployment isn't as headache-inducing as mine was.

The Setup

First things first, you'll need a GitHub account and a Vercel account. Once you've got those, you can connect them together. When building my latest project TechBlog, this setup made my life so much easier by allowing effortless CI/CD.

Here's what you gotta do:

• Create a Vercel account: Go to vercel.com and sign up using your GitHub account. Linking it is super straightforward.
• Prepare your project: Make sure your project is in a GitHub repository, and it's ready to be deployed (e.g., production settings in package.json are configured).

If you're like me, you've probably wondered how others do this so smoothly. Trust me, it all starts with understanding the basics.

Deploying with Vercel

Now, let's get to the exciting part—deployment! 🎉

Here’s the code that finally worked for me:

npx vercel init my-nextjs-blog

Copy-paste this, trust me. It sets up everything for a Next.js app running on Vercel.

Here's what actually worked for me after tons of trial and error:

1. Link your project: In Vercel, click on the 'New Project' button. Select your GitHub repository. You’ll see a list of your repos; just select the one you want to deploy.
2. Configure the project: Vercel will suggest some default settings, but you can tweak them. For instance, I had to change the build command in my vercel.json like this:

{
  "builds": [{ "src": "package.json", "use": "@vercel/static-build", "config": { "distDir": "build" }}],
}

Don't make my mistake—here's the correct way. This snippet saved my project, hope it helps you too.

Pro Tips & Troubleshooting

If you face any hiccups, like deployment failures, make sure to check the logs in Vercel. They can be quite enlightening. When building QuickNotes last month, I realized I had an environment variable mishap that was only obvious once I checked the logs.

One more thing before I forget—if you're using environment variables, add them in the Vercel dashboard under 'Settings & Environments.'

Wrapping It Up

And there you go! Deploying with Vercel is like a breeze once you get the hang of it. I’m not an expert, but these steps got me through my projects without a hitch. 📈

Feel free to correct me in the comments if there's a better approach. This is based on my personal experience, not official docs. If you're interested in more about how I manage my deployments, check out my CI/CD workflows article. And if you're interested in exploring alternatives, I've also written about Heroku vs Vercel; maybe give that a shot.

Try this out and let me know how it goes! Drop a comment if you get stuck anywhere, and I’ll be more than happy to help you out.