Blog Starter Kit lets you instantly deploy a Next.js and Tailwind powered frontend for your Hashnode blog. It consumes Hashnode’s Public APIs, and gives you a fully customizable blog that can be deployed anywhere, including a subpath of a custom domain. Combined with Hashnode’s headless mode, it unlocks entirely new possibilities. You can now use Hashnode’s world class editor and dashboard to author content and collaborate. And use blog starter kit to customize the frontend to your liking.

How to deploy

Step 1

The recommended approach is depoying to Vercel. If you don’t have an account already, sign up for a free plan.

  • Fork this repo
  • Create a new project on Vercel and connect this repo
  • It’s a monorepo. So, choose the either packages/blog-starter-kit/themes/enterprise or packages/blog-starter-kit/themes/personal as the root directory while importing on Vercel.
  • Choose Next.js as framework preset (just above Root Directory setting).
  • Set the following env vars
Once this is deployed, just visit Vercel’s auto generated domain to ensure it loads fine. Initially you won’t see any posts. But you can always point NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST to a different domain such as engineering.hashnode.com to visualize.

Step 2 (optional subpath installation)

Follow the steps below if you would like to install your blog under a custom domain subpath. If not, you can directly map a custom domain to your project on Vercel and have a production-ready blog up and running.

Vercel

If your main project is deployed on Vercel, add the following rewrite to next.config.js:

Replace https://starter-kit-rose-seven.vercel.app with your own Vercel deployment URL from step 1
},
{
source: “/blog/:path*”,
destination: “https://starter-kit-rose-seven.vercel.app/blog/:path*”, -> Replace https://starter-kit-rose-seven.vercel.app with your own Vercel deployment URL from step 1
},
];
},”>

async rewrites() {
    return [
      {
        source: "/blog",
        destination: "https://starter-kit-rose-seven.vercel.app/blog", -> Replace https://starter-kit-rose-seven.vercel.app with your own Vercel deployment URL from step 1
      },
      {
        source: "/blog/:path*",
        destination: "https://starter-kit-rose-seven.vercel.app/blog/:path*", -> Replace https://starter-kit-rose-seven.vercel.app with your own Vercel deployment URL from step 1
      },
    ];
  },

Once you deploy your project, the subpath installation should work successfully.

Cloudflare

In case you are using Cloudflare in proxy mode (orange cloud on), you can deploy the following worker script and map it to yourdomain.com/*:

Be sure to replace the values of subpath and blogBaseUrl in the above snippet. This way cloudflare will proxy all the requests starting with youdomain.com/blog to your headless blog, and other requests will hit your origin as usual.

If your main domain is hosted elsewhere, you need to involve engineers from your team to create above rewrites.

Step 3

Now that you have deployed the starter kit on your own domain, you need to tell Hashnode not to generate a UI for your blog. You can do that by visiting your blog dashboard -> advanced tab. Scroll down and locate the section “use Hashnode as a headless CMS”. Enable it and enter your blog base URL.

After enabling, enter your blog URL like the following and save.

Congrats 🎉! Hashnode will now treat your blog as a headless blog and send readers directly to the origin.

Running Locally

  • cd packages/blog-starter-kit/themes/enterprise or packages/blog-starter-kit/themes/personal
  • Copy .env.example to .env.local
  • pnpm install
  • pnpm dev

Visit http://localhost:3000!

APIs

If you prefer to build your frontend from scratch, you can use our public GraphQL APIs to do so:

Demo Videos

Headless Hashnode Demo — With Blog Starter Kit (Deployed to Vercel)

Customizing Hashnode Blog Starter Kit using TailwindCSS — Headless Hashnode Demo

Found an issue?

If you have found an issue or bug, please create an issue.

If it’s a quick fix, such as a misspelled word or a broken link, feel free to skip creating an issue. You can create a pull request directly.

Have feedback for us?

Feel free to create an issue with the feedback label. Our team will take a look and get back to you as soon as we can!

Reach out for help

You can discuss ideas, ask questions, and meet other members from the Hashnode community in our Discord. You can also create tickets on our intercom to find support.

If you like, you can also DM us on X!

Read More

By |2023-10-19T08:08:28+00:00October 19, 2023|Life and Health|0 Comments

About the Author:

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.