Let's Dive into the possibilities of Headless Starter Kit Deployment and Customization of Headless Hashnode with Some Possible Integrations to Make Your Blog Engaging and Standout. Hashnode can be a CMS for your Blog.

🦄Starter Kit - Vercel Deployment

STEP 1: Fork the Starter Kit Available at Hashnode/starter-kit: A Blog Starter Kit built with Hashnode's GraphQL Public APIs (github.com)

STEP 2: Visit Vercel and Add a New Project.

STEP 3: Import the Git Repository that you Forked. If it is not visible, click the Adjust Github App Permission, It will redirect to your github to Enable the Repository permission.

STEP 4: Configure the project by Selecting the Framework Preset as Next Js and Root Directory as Enterprise theme.

STEP 5: Add the required Environment Variables :

STEP 6: Click on Deploy. Wait for Some Minutes. Congrats your Project is Now Deployed.

My Deployed Url : AK's Blog (starter-kit-headless.vercel.app)

STEP 7: Visit the Domain Settings to add your preferred Domain. You will not need to add extra configuration if your personal website domain is deployed using Vercel.

Once the DNS records configuration is set correctly, you can see the Production Badge beside your Blog URL.

STEP 8: Using Hashnode as a headless CMS - You can find this option in Advanced Settings of your Hashnode blog, you can enable it, on enabling a Green Badge will appear on top which indicates that the blog is now headless.

Your hash node blog will now redirect to the added blog URL. In my case - blog.akdeepankar.site

🐈 Starter Kit - Customization - Tailwind CSS

STEP 1: Clone the Forked Repository in GitHub.

STEP 2: To Run Locally :

• cd packages/blog-starter-kit/themes/enterprise or packages/blog-starter-kit/themes/personal

• Change the folder name .env.example to .env.local

• After changing the name replace the Publication hostname with your Hashnode blog name, example below :

• NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST=akdeepankar.hashnode.dev

• pnpm install ( if it doesn't work : pnpm install --force)

• pnpm dev

Visit http://localhost:3000!

Let's Make Some Customization.

Cards & Interactivity

Adding a Collection of Cards below the Search Bar for various Purposes. To achieve this Functionality. Go to Pages and Click on Index Component

Now Below the Navbar Component, Let's Code by using Tailwind CSS. Below the Image is the Final Output part of the Code.

The User Details are from Hashnode GraphQL API, you can check what options are available in Hashnode API Playground and Customize your code Accordingly to Fetch Data

CODE :

<div className="grid grid-cols-3 gap-4">
<div className=" bg-pink-200 rounded-lg p-4 my-4 grid grid-cols-2">
<img
className='rounded-lg'
src={publication.author.profilePicture ?? 'fallbackImageUrl'}
style={{height: '150px' }}
/>
<div className="pl-2 space-y-4">
<p className='text-2xl font-semibold'>{publication.author.name}</p>
<p className='text-md'>{publication.descriptionSEO}</p>
<div className="text-xl font-semibold bg-pink-300 rounded-lg p-1 my-1">
<p>Followers: {publication.followersCount}</p>
</div>
</div>
</div>
<div className="text-4xl font-semibold bg-blue-200 rounded-lg p-4 my-4 text-center">
<img
className='rounded-lg'
src='https://res.cloudinary.com/dg7c8rbas/image/upload/v1698255886/Untitled_design_38_a7lxs2.png' 
style={{height: '150px', width: '500px' }}
/>
</div>
<div className="text-xl font-semibold bg-green-200 rounded-lg p-4 my-4 text-center grid grid-rows-2">
<p className="m-auto">{randomFact}</p>
<button
onClick={generateRandomFact}
className="mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md"
>New Fact</button>
</div>
</div>

The Fact is generated using the generateRandomFact Function. Which is Locally Saved in a JSON Format, It can be also connected to an API for various use cases.

After Committing these to Github. Vercel will automatically sync the changes and update it with the Website.

Visit : AK's Blog (blog.akdeepankar.site)

Youtube Integration

Now, Let's make the Blog more Interesting by Integrating my YouTube videos so that visitors will have something to watch too.

I used the react-youtube library to make it happen. Two videos in a Grid Format using Tailwind CSS. All you need is your YouTube video IDs available in the URL to use.

import YouTube from 'react-youtube';

  const opts = {
    height: '390',
    width: '640',
    playerVars: {
      autoplay: 0,
    },

//ADDED IT ABOVE THE SUBSCRIBE FORM COMPONENT CODE IN INDEX PAGE
    <div className="bg-red-300  rounded-xl px-5 py-5 dark:bg-neutral-900 md:py-10">
                <div className="grid grid-cols-2 gap-1">
                <div className="pl-10">
                  <YouTube videoId='PCvt20TYdBo' opts={opts} />;
                </div>
                <div className="pl-5">
                  <YouTube videoId='m7XbagyKSlM' opts={opts} />;
                </div>
                </div>
    </div>

You can now commit the Changes to Github. and Vercel will automatically Redeploy the Project and update your Site.

Posts Decoration

To make it More Interesting, Let's make a Black border around the posts. You can find the Div in the Index page itself where the HeroPost Component is Enclosed and Apply this CSS code inside the ClassName.

rounded-xl border-solid border-black border-4 bg-black p-2

The Same logic is applied to the Hero Post component and SecondaryPosts Component inside the Components folder to make an extra border inside the main border with a background white to give it a better look. You can customize it according to your likes.

NavBar Styling

Let's Modify the Header Style and Make it Modern. you can Modify it from the Header Component File. In my example below I used the Margin, rounded corners, and style properties of Tailwind CSS.

Before :

After :

🤖 Final View

You can achieve more Styling using the Personal Theme. I changed the Post Background color to Yellow and added a Border to all the Components to make it more Fun.

BLOG LINK : blog.akdeepankar.site

Thanks. Happy Learning.🫡