How to Deploy Your Website on Vercel with a Custom Domain from Namecheap

So, you've built a website and are ready to share it with the world. Deploying it to a platform like Vercel and connecting it to a custom domain from a registrar like Namecheap is a fantastic way to go. This guide will walk you through the entire process, from setting up your repository to linking your domain.

Prerequisite Checklist

Before you begin, make sure you have the following ready:

A Domain Name: You can easily purchase one from a registrar like Namecheap or GoDaddy. I'll be using a domain purchased from Namecheap for this guide. I only bought the domain, without any additional ad-ons.
A GitHub Repository: Create a new, public repository on GitHub. This is where your website's code will live.
Your Code: Create an index.html file within your new repository and add some basic HTML code to it. Here’s a simple starting point:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Basic Page</title>
</head>
<body>

    <h1>Hello, World!</h1>
    <p>This is a simple paragraph.</p>

</body>
</html>

Commit and Push: Save the file and commit it to your GitHub repository.

Step 1: Deploying Your Site with Vercel

Vercel is an amazing platform that makes deploying websites incredibly simple. Here's how to get your project live:

Sign Up for Vercel: If you don't have one, create a Vercel account. It's highly recommended to sign up using your GitHub account for seamless integration.
Create a New Project: From your Vercel dashboard, click the New Project button.
Connect to GitHub: Vercel will prompt you to import a Git repository. Select GitHub as your provider and authorize Vercel to access your repositories. You can choose to grant access to all repositories or select specific ones.
Import Your Repository: From the list of repositories, select the one you want to deploy. Vercel will automatically detect the project's framework (e.g., Next.js, React, Astro) and configure the necessary build commands. You can override these settings if needed.
Deploy: Click the Deploy button. Vercel will then build and deploy your project, providing you with a unique preview URL (e.g., my-project.vercel.app).
Automatic Updates: Once deployed, Vercel will automatically create a new preview deployment for every push to a branch and a production deployment for pushes to your main branch. This continuous deployment workflow ensures your site is always up-to-date with your latest code.

Step 2: Linking Your Namecheap Domain

Now that your site is live on Vercel, it's time to connect your custom domain so that visitors can find it at an address like yourdomain.com.

Add Your Domain in Vercel:
- From your Vercel dashboard, navigate to the project you want to link the domain to.
- Go to the Settings tab and click on Domains in the left sidebar.
- Enter your domain name (e.g., yourdomain.com) and click Add.
- Vercel will detect that the domain is not yet configured and provide you with the necessary DNS records. It will usually give you two options: an A record for your root domain and a CNAME record for the www subdomain. Vercel automatically recommends setting up a redirect from the www to the apex domain, or vice versa, to ensure a consistent experience for visitors.
Configure DNS Records on Namecheap:
- Log in to your Namecheap account and go to your Domain List.
- Find the domain you're adding and click on Manage.
- Navigate to the Advanced DNS tab.
- You will now create the records that Vercel provided.
  - To add the A record for the root domain:
    - Click Add New Record.
    - For Type, select A Record.
    - For Host, enter the @ symbol.
    - For Value, copy the IP address provided by Vercel and paste it here.
    - Click the checkmark to save.
  - To add the CNAME record for the www subdomain:
    - Click Add New Record.
    - For Type, select CNAME Record.
    - For Host, enter www.
    - For Value, copy the cname.vercel-dns.com value provided by Vercel and paste it.
    - Click the checkmark to save.

Your domain and website are now linked! Keep in mind that DNS changes can take some time to propagate across the internet, so it may not be live immediately.