@
Web Dev

Create NextJs Blog and Deploy on Vercel with Custom Google Domain

White, 27 Jul 2021

I will walk you through creating and deploying a NextJs site to Vercel as well as registering a domain name and pointing to the site.

This article is a part of series: Building Anaecha.com.

Create Github Repositories

  1. Go to github.com and sign in
  2. Click on "New" button to create a new repository
  3. Enter a repository name
  4. Select "Public" or "Private"
  5. Click on "Create repository" button

Create Next.Js App

  1. Run this command (Replace your-app-name with yours)

This will create a directory named "your-app-name".

npx create-next-app your-app-name

If you already have a directory, Go to your directory and run this command instead.

npx create-next-app .
  1. Now, you can test your site with this command.
npm run dev
  1. Visit your site at http://localhost:3000

First push to the github repository

Run these commands (Replace your-github-url with yours)

git init
git add .
git commit -m "first commit"
git remote add origin your-github-url
git push -u origin main

To confirm the remote, you can run this command.

git remote -v

If you use SSH key, Make sure you already register it.

Deploy on Vercel

  1. Go to Vercel site and sign in
  2. Click on "New Project" button
  3. Click on "Import" from the repository
  4. Click on "Skip" to build a team
  5. Click on "Deploy"
  6. Once the process is finished, Click on "Visit" to test the site.

Register a Domain name

Register a domain name for the site, you can choose any provider based on your preference. In my case, I choose Google Domains.

Add a Domain name

  1. Go to your site dashboard on Vercel
  2. Click on "Settings" tab
  3. Click on "Domains" on left navigation
  4. Enter your registered domain name and Click "Add"
  5. Select your domain base and Click "Add". For my case, I use "anaecha.com" and redirect "www.anaecha.com" to it.

Ref: Vercel Custom Domain

Link Google Domain to Vercel

  1. Go to your Google Domains's dashboard
  2. Click on your registered domain name
  3. Click on "DNS" on left navigation
  4. Copy "Value" from Vercel and Create records as followed
  5. Click on "Save", this process might take some time.

Complete Vercel Domain Configuration

  1. Go to "Domains" settings for your Vercel App
  2. Under your-domain.vercel.app, Click on "Edit"
  3. Under "Redirect to", Select your-domain.com
  4. Click on "Refresh" buttons on your-domain.com and www.your-domain.com
  5. If the process is completed, "Valid Configuration" will be shown.
  6. Try to visit your-domain.com and www.your-domain.com

That is all. In the next part, I will introduce Netlify CMS to our blog.