Deploy Your Website on Vercel and Connect with a Custom Domain
A Comprehensive Guide to Streamlining Your Website Deployment!!
Table of contents
- Introduction
- Step 1: Creating a GitHub Repository
- Step 2: Adding a New Project on Vercel
- Step 3: Searching for Your GitHub Repository
- Step 4: Configuring the GitHub App
- Step 5: Saving Your Repository
- Step 6: Importing Your Repo to Vercel
- Step 7: Deployment Magic
- Step 8: The Moment of Truth
- Step 9: The Domain Dance
- Step 10: Adding Your Custom Domain to Vercel
- Step 11: Custom DNS Records
- Step 12: Configuring DNS Settings
- Step 13: The Waiting Game
Introduction
Are you ready to take your website live with a custom domain? Buckle up because we're about to embark on a web deployment adventure! In this guide, I'll show you how to deploy your website on Vercel and seamlessly connect it with your very own custom domain. Let's dive in!
Step 1: Creating a GitHub Repository
The journey begins with your trusty GitHub repository. Create one for your project and make sure all your web assets are safely stored there.
Step 2: Adding a New Project on Vercel
Head over to Vercel and click that inviting "ADD NEW" project button.
Step 3: Searching for Your GitHub Repository
Now, search for the GitHub repository you just created.
Step 4: Configuring the GitHub App
If your repository isn't imported to Vercel automatically, don't fret. Just click on "Configure GitHub App." It'll ask for your GitHub password, so toss that in there to continue.
Step 5: Saving Your Repository
Back in the tab, scroll down to find your repository and click on "Save."
- Search for your Repository on Git Hub.
- Now click on save.
Step 6: Importing Your Repo to Vercel
Now, you're all set to import your repository to Vercel.
Step 7: Deployment Magic
You're almost there! Just click on "Deploy."
Step 8: The Moment of Truth
After your site passes all the checks, you'll know it's successfully deployed. ๐
- click on Visit to see your website live!!
Step 9: The Domain Dance
Time to claim your domain!
By default, Vercel provides you with a domain like <repo-name>.
vercel.app
, but let's add some personal flair.
I got my custom domain from Porkbun, but you can choose your favorite domain registrar.
Step 10: Adding Your Custom Domain to Vercel
Back in Vercel, add your custom domain.
- Head over to "domains"
- Add your custom domain here
Step 11: Custom DNS Records
Vercel will provide you with custom DNS records for your domain. Keep a note of them.
Step 12: Configuring DNS Settings
Head over to your domain name provider's website and configure the custom DNS records for your domain. It's like giving your website a secret handshake!
- This is Porkbun. All this information is provided by Vercel.
Fill in the details and finally click on "Add" and let the magic happen.
Step 13: The Waiting Game
Now, be patient. Wait for Vercel to fetch the changes you made, and within a few minutes, you'll have your very own custom domain for your website. ๐