Deploy a headless blog on Vercel using Headless Hashnode

Headless Hashnode

Headless Hashnode enables you to create a blog using Hashnode's robust editor and publish your articles on a frontend of your choice. This grants you greater control over the appearance of your blog's frontend design.

To illustrate this, I'll use a starter kit designed by Hashnode to publish a blog on a new domain, giving it a fresh look.

Prerequisite

Github account
Hashnode account
Vercel account

Steps to Deploy Headless Hashnode on Vercel

Fork the Starter Kit

Fork the starter kit from the following URL: https://github.com/Hashnode/starter-kit
Log into your Vercel dashboard

Log in and create a new project. The forked repository will appear in your list of GitHub repositories. In my case, my forked repo is named starter-kit. Click on the Import button.
Configure your project

In the configuration page, set your details as follows:
Project Name: any unique name

Framework Preset: Select Next.js

Root Directory: click on "Edit" and select packages > blog-starter-kit > themes > enterprise

Keep in mind that after editing your Root Directory, your Framework Preset might switch to something else, so you may need to select Next.js again.

Environment Variable: use the environment variable provided in Hashode's starter-kit README file. Your environment variables will look like this:

NEXT_PUBLIC_HASHNODE_GQL_ENDPOINT=https://gql.hashnode.com
NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST=engineering.hashnode.com
NEXT_PUBLIC_MODE=production

Note: In the Hashnode starter kit environment variables, there are four environment values. I omitted NEXT_PUBLIC_BASE_URL=/blog because, in this guide, I am not installing Headless Hashnode on a subpath.

Also, you can change the value for NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST to any Hashnode blog URL. For example, using my blog would be: NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST=victorious.hashnode.dev.

After adding your environment variables, your page should look something like this:

Then click "Deploy". Depending on the size of your blog it may take some time to build.
If the deployment is successful, you will be greeted with a Congratulations page. Click Continue to dashboard and view your Headless Hashnode blog on a new Vercel domain.

Congratulations you have successfully hosted your blog on a different domain using Headless Hashnode 🥳
Here is the link to preview the blog I launched in this tutorial: https://starter-kit-d4h9.vercel.app/