So you want to learn about deploying a website using Vercel? Honestly, I've been meaning to write about this for a while because, tbh, I struggled with it for months. 😅 Here's what I learned so you don't have to go through the same hassle.
The Vercel Journey Begins
When I first tried deploying my site using Vercel, I made this stupid mistake of not reading the docs thoroughly. Yeah, rookie mistake. But after countless of trial and error, here's what actually worked for me.
First things first: You need to have your code ready. Whether it's a static site or a full-blown react app, make sure it's all good to go. Next step, head over to Vercel and sign up if you haven't already. Here's what the dashboard looks like:
Deploy Like a Pro
Once you're signed in, hit the 'New Project' button. Now, here's a sneaky bit - Vercel integrates seamlessly with GitHub, GitLab, and Bitbucket. So, if you've got your project on any of these, you're golden. 😊
After linking your repo, Vercel will detect your project type. If it's a Next.js app, you're in for a treat because it supports it out-of-the-box. But if you're like me, with a custom setup, here's the setup I used:
vercel.json
{
"builds": [{ "src": "index.html", "use": "@vercel/static" }],
"routes": [
{ "src": "/(.*)", "dest": "/index.html" }
]
}Copy-paste this, trust me, it saved my project. Make sure to adjust the src and dest paths according to your setup. This is based on my personal experience, not the official docs, but it works!
Deploying and Troubleshooting
Click 'Deploy', and watch the magic happen. But beware, if it fails, the error logs are your best friends. Spoiler: it took me 3 hours to debug what was a typo. 🙄
If you run into issues, the Vercel Docs are super helpful. Also, if you enjoy troubleshooting like a detective, check out my post on debugging deployment issues.
Real World Examples
In my latest project, I used this method to deploy a portfolio site, and it worked flawlessly. The auto-redeploy feature every time you push to main is a life-saver!
Conclusion: You Got This!
Try this setup 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. 🤞
For more on optimizing your deployment, you might like my post on optimizing Vercel deployments.
