Deploying and Hosting a Custom Domain on Vercel

ยท

3 min read

Deploying and Hosting a Custom Domain on Vercel

Deploying and Hosting a Custom Domain on Vercel

In this article, I will show you how to host a vanilla JavaScript application on Vercel and also how to use a custom domain from Namecheap.

Getting Started

  • To get started with this tutorial, we'll need a Namecheap account, a Github account and a Vercel account.
  • You can get an HTML template for this tutorial here. If you have your own HTML application you can use it too. The goal is to successfully host our application on Vercel and set a custom domain from Namecheap.

Note ๐Ÿ–Š๏ธ: It is assumed that you have prior knowledge on how to use Git and also understand how Github works. If not see this article for a guide.

Account Registration

  • Navigate to Namecheap's sign up and register a new account and confirm your account registration. Once the account registration is completed, purchase your preferred domain on Namecheap.

  • Goto Github registration page and register an account with them (if you don't already have one).

    • Create a new repository and call it any name you want. I'll name mine my-resume.
    • Clone the repository into your machine where you have your code and then push it to your newly created repo.

    Deployed code to repo See this article on how to use Github.

On successfully pushing your code to Github, we'll have to create an account with Vercel for our code deployment

  • Navigate to the Vercel registration page and register an account with them. You can register with their Github OAuth or another method pleasing to you.

    • On successful registration, click on the new Project option

    Create Project
    On selecting the create Porject option, you can now import a project from your Github repository.

    Import Repository

    • Select your vercel Scope (Account type ) usually it's single unless you are deploying for a team.

      Vercel Scope

      • Select the project root folder

      Select Project root

    • Name your project and deploy. Rename Project

Once your project has been deployed, you can visit it with the URL provided (so you see what you have deployed). Afterall, we'll use our custom domain from Namecheap.

  • In your vercel app, click the open dashboard option to see an overview of your project.

  • Select the View Domains option and inset the domain name you registered on namecheap

View Domains Add Domain

  • Select the Edit button on one of the domains inserted to view its configuration

Edit Domain

  • Select View DNS Records and copy either the nameserver or the A Records provided

Imgur

Back to Namecheap

  • Go to your dashboard and select Domain List and click on manage

Domain List

  • Select Advanced DNS and in the Host Records input the A Record and CNAME Record details from Vercel.

Advanced DNS

  • Wait for about 20 - 30 minutes for the record to provision.
  • Finally, go back to your Vercel project and test out your new personalized domain.

It Works!!! โœ…โœ…โœ…

Now you no longer have to use subdomains whenever you deploy your application

In my next article, I'll talk about how to Host a NodeJS API on Heroku.

If you like my content, kindly drop a โค๏ธ as this encourages me to do more and makes me feel I'm not alone in this space.
Let's connect on Twitter.

ย