So you want to deploy your website on Vercel?

Hey there! 😊 Been meaning to write about this for a while, especially after the roller coaster ride I had deploying my first site on Vercel. Honestly, it took me weeks to figure this out. I mean, if you're like me, you've probably wondered, 'How hard can it be to deploy a simple site for free?' Spoiler: it's not rocket science, but it does have its quirks. Let me walk you through it and hopefully save you some time.

Why Vercel?

First things first, why choose Vercel? Well, for starters, it's free (yep, you heard that right)! Plus, it's super easy to integrate with GitHub. When I first tried deploying on Vercel, I made this stupid mistake of not linking my GitHub repo correctly 🤦‍♂️. Don't worry, I'll guide you through every step.

Getting Started

Alright, let's dive right in. Here's what worked for me after tons of trial and error:

1. Create a GitHub repository for your project. If you're new to GitHub, check out my intro guide to GitHub.
2. Push your code to this repository. Make sure your code is clean and your dependencies are up-to-date.
3. Sign up on Vercel. It's pretty straightforward, just your email, a password, or you can sign in with your GitHub or Google account for less hassle.

Deploying Your Site

Here's the fun part! 😉 Follow these steps:

1. Connect your GitHub account to Vercel. This is as easy as clicking a button. Pro tip: Review the permissions carefully. You might want to limit access to your specific repo if you're cautious.
2. Select the repository you want to deploy from the list.
3. Now, configure your deployment settings. For most projects, the default settings work perfectly. But, if you're using a custom setup, like with Next.js, you might need to tweak a few things. Btw, I wrote about customizing Next.js deployments last week.
4. Click 'Deploy'. That's it! 🎉 Your site will be live in a few moments. Now grab a coffee while Vercel does its magic.

Troubleshooting Tips

Okay, time for some real talk. Things can go sideways. For instance, I had this issue where my styles weren't loading. Turns out, it was just a missing dependency in package.json. Double-check your build logs if something like this happens.

Final Thoughts

Deploying on Vercel is super intuitive once you get the hang of it. In my latest project, I used this to rapidly test changes and it saved me a ton of time 🚀. I'm not an expert by any means, but I hope this helps you get started with deploying your projects for free. Try this out and let me know how it goes! Drop a comment if you get stuck anywhere. I'll update this post if I find something better. 😊 If you enjoyed this, you might like my post on optimizing web performance.