Deploy a Website to Vercel: A Step-by-Step Free Guide

So you want to learn about deploying to Vercel?

Hey there, fellow coder! Been meaning to write about deploying a website using Vercel for a while now. Honestly, it took me weeks to figure this out when I first started. I struggled with setting everything up correctly. I still remember the frustration of getting it wrong multiple times. But, here's what worked for me after tons of trial and error. 😊

Why Vercel?

If you're like me, you've probably wondered why everyone raves about Vercel. For starters, it's super easy to use and offers free hosting for static sites and serverless functions. Plus, it integrates seamlessly with GitHub, GitLab, and Bitbucket. Perfect for my latest project, 'My Awesome Site' 🥳.

Getting Started: Set Up Your Project

First things first, ensure your project is on one of the supported version control platforms. Here's a quick setup using GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/yourrepository.git
git push -u origin master

If you haven't already, create a repository on GitHub and push your code. Remember, I've been there—missed this step a couple of times! 😅

Deploying to Vercel

Here's the exciting part, deploying to Vercel:

1. Go to vercel.com and sign in.
2. Click on 'New Project'.
3. Connect your GitHub account if you haven’t already.
4. Select the repository you want to deploy.
5. Configure your project settings and hit 'Deploy'.

Seriously, that's it! Here's the code snippet that saved my project:

{
  "name": "my-awesome-site",
  "version": 2,
  "builds": [{ "src": "package.json", "use": "@vercel/build" }],
  "routes": [{ "src": "/(.*)", "dest": "/index.html" }]
}

Copy-paste this into your vercel.json file. Trust me, it works like a charm!

Pro Tip: Environment Variables

This is where I messed up initially. In your project settings on Vercel, you can add environment variables for sensitive data. This is crucial for production-ready apps. One more thing before I forget, always restart your deployment after making changes here.

Troubleshooting Common Issues

Ran into a build error? It might be due to an incorrect build script in your package.json. Check and update your script section:

{
  "scripts": {
    "build": "your-build-command"
  }
}

And just a heads up, make sure your build command is correct. Spoiler: it took me 3 hours to debug what was a typo! 🙄

Conclusion

Deploying to Vercel can seem daunting at first, but once you get the hang of it, it's smooth sailing! Feel free to share your experiences or any issues in the comments. I'll update this post if I find something better. Btw, if you're interested in more deployment tips, check out my post on deploying to Heroku. Try this out and let me know how it goes!