The new feature from the Hashnode team is nothing but a blessing for developers like us who like to blog about their journey.

In this article, I will go through the steps I took to create my blog.

For my blog, I have used the starter kit that they have provided.

Since I have used the starter kit, it has been nothing but a breeze to get it working locally with the provided packages. The steps I followed to run it locally are:

1. Forked the official repo

2. Cloned to repo

3. cd starter-kit

4. cd packages/blog-starter-kit/themes/enterprise

5. change the env.example file to env.local

6. pnpm install

7. pnpm dev

Now the project should be running on localhost:3000

Initially, I did not change the NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST from the default provided one so it was showing the published post from the Hashnode engineering team but later I changed it to my blog host and it started showing up my published post.

Breaking it down

After successfully running it locally, I started playing around with the code. To get a better understanding of the code base.

Once I felt confident, I started working on my design.

Adding shadcn/ui

I love super minimalistic, to-the-point stuff. So I had to install the shadcn/ui package.

The setting I chose to make it work with the provided repo:

Would you like to use TypeScript (recommended)? yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Zinc
Where is your global CSS file? › › styles/index.css
Do you want to use CSS variables for colors? › yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › components
Configure the import alias for utils: › lib/utils
Are you using React Server Components? › yes

It did take me a couple of tries to get all the routes correct for the components and lib but I am very sure there are the options I selected.

Then I installed the drop-down menu and label to just verify that it is configured correctly.

Once those components were correctly added, I added the next-themes package to add light and dark mode.

To verify I am not lying, you can go to my blog and try changing the mode by clicking on the sun/moon button located at the right side of the header/navbar.

That's how I integrated shadcn/ui into my application, which is made on top of the starter kit provided by Hashnode.

Also, since I installed the components through the CLI, I was getting an error with the following line of code:

import { cn } from "@/lib/utils"

I changed it to the following
import { cn } from "../../lib/utils"

Adding custom font

Since it is going to be my personal problem, I had to add two of my favorite font's from font share. The fonts I added are Satoshi and Renade. They can be used for free for personal use and I have verified that information by messaging them.

To add those fonts, I followed the following steps:

1. Downloaded the font family from their site.

2. Created a new folder called fonts

3. Copied and pasted the files with woff2, ttf, woff and eot extension.

4. Then I went to the tailwind.config.ts file and added the following part:

fontFamily: {
                satoshiMedium: 'Satoshi-Medium',
                satoshiBold: 'Satoshi-Bold',
                satoshiBlack: 'Satoshi-Black',
                ranadeLight: 'Ranade-Light',
                ranadeLightItalic: 'Ranade-LightItalic',
                ranadeRegular: 'Ranade-Regular',
                ranadeItalic: 'Ranade-Italic',
                ranadeMedium: 'Ranade-Medium',
            },

1. Then I went to styles/index.css and add the following code:

@font-face {
    font-family: 'Satoshi-Medium';
    src:
        url('../assets/fonts/Satoshi-Medium.woff2') format('woff2'),
        url('../assets/fonts/Satoshi-Medium.woff') format('woff'),
        url('../assets/fonts/Satoshi-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi-Bold';
    src:
        url('../assets/fonts/Satoshi-Bold.woff2') format('woff2'),
        url('../assets/fonts/Satoshi-Bold.woff') format('woff'),
        url('../assets/fonts/Satoshi-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi-Black';
    src:
        url('../assets/fonts/Satoshi-Black.woff2') format('woff2'),
        url('../assets/fonts/Satoshi-Black.woff') format('woff'),
        url('../assets/fonts/Satoshi-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Ranade-Light';
    src:
        url('../assets/fonts/Ranade-Light.woff2') format('woff2'),
        url('../assets/fonts/Ranade-Light.woff') format('woff'),
        url('../assets/fonts/Ranade-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Ranade-LightItalic';
    src:
        url('../assets/fonts/Ranade-LightItalic.woff2') format('woff2'),
        url('../assets/fonts/Ranade-LightItalic.woff') format('woff'),
        url('../assets/fonts/Ranade-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: italic;
}

@font-face {
    font-family: 'Ranade-Regular';
    src:
        url('../assets/fonts/Ranade-Regular.woff2') format('woff2'),
        url('../assets/fonts/Ranade-Regular.woff') format('woff'),
        url('../assets/fonts/Ranade-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Ranade-Italic';
    src:
        url('../assets/fonts/Ranade-Italic.woff2') format('woff2'),
        url('../assets/fonts/Ranade-Italic.woff') format('woff'),
        url('../assets/fonts/Ranade-Italic.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: italic;
}

@font-face {
    font-family: 'Ranade-Medium';
    src:
        url('../assets/fonts/Ranade-Medium.woff2') format('woff2'),
        url('../assets/fonts/Ranade-Medium.woff') format('woff'),
        url('../assets/fonts/Ranade-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

Thats it. Now those custom fonts can be used in the application with Tailwind.

For this application, for the headers, I have used a variant of Satoshi, and for the other parts, I have used a variant of Ranade.

That's how I was able to integrate custom fonts into my blog.

So that's basically all I did to make my personal blog with the help of the starter kit provided.

Note: After installing shadcn/ui it did remove what it initially had on the index.css file. So some styling was not working for me but was present in the demo, so I did spend some time trying to figure it out.

Future plan

So I created this blog to have a basic understanding of what is happening with the code base, to feel confident using the new Hashnode Headless feature, and lastly to take part in the community activity since I really enjoy taking part in stuff organized by Hashnode.

I am really grateful to Hashnode for organizing this community event since now I am more motivated to finish my personal portfolio, and I can confidently say I am 50% done with it since I will be using this feature for my blog. I started creating my personal portfolio a couple of months ago but I did not get the time to finish it since I had to do a lot of research on designing it. Once I am done with the design part, I will integrate the blog part with my official portfolio.

Also since there is a deadline for this event I tried to finish it as quickly as I could so currently there might be some issues with the layout and stuff but I will keep on working on this application after the results are announced.

Github Repo: https://github.com/trace2798/blog_hashnode_api

Happy Hacking !!!

PS: If you all have any opinions on how I can make it better or criticism, feel free to leave a comment.