Last updated:
7 min read
How I built my Blog with NextJs, Chakra UI and Hygraph?
Rakesh Potnuru

How I built my Blog with NextJs, Chakra UI and Hygraph?

Having a personal blog has several advantages over using a third-party platform, such as complete control over your data, customizations, more ways to monetize, and so on. Recently I built my blog with NextJs, Chakra UI, and Hygraph and made it live a few days back. In this article, I'll explain how I built it, what technologies I used and why, what I learned while doing so, and the problems I encountered.

There are several platforms available for creating a personal blog, but I created mine from the ground up to put my skills into practice and understand what it's like to maintain everything.

Let's get started

Before we start

  • Code is Open Source - GitHub repo (Star⭐ it)
  • Read this step-by-step guide to host your own instance of this blog.
  • How about reading this article on my blog, so that you try it out 👀?

Tools, services, technologies, frameworks, and libraries

Why I used these technologies over their alternatives?

Why NextJs?

I didn't just pick NextJs because I'm familiar with ReactJs. However, NextJs is a perfect framework for creating these types of websites.


  • Built-in pre-rendering: This improves your SEO and speeds up your site.
  • File-based routing: No more messing up with routes.
  • API routes: Implement basic backend functionality without the need for a separate backend.

There are a lot more benefits but these three are enough to decide.

Why Chakra UI?

Believe me, if you love React you will love Chakra-UI. It reduces a lot of CSS work.


  • Component-based styling.
  • Super easy to build light and dark UI.
  • The components will handle all aspects of accessibility.
  • Components are completely customizable.

Why Hygraph?

Again if you love QraphQL you will love Hygraph. It's perfect for a blog.


  • Got so many features that you won't find anything missing.
  • Easy to manage content with beautiful UI.
  • Extensions.

Why Giscus?

In case you didn't know, Giscus is a GitHub Discussions-powered comment system. We all know how powerful GitHub discussions are, so why not apply that power to the comment system?


  • 100% free and Open Source.
  • No ads and no tracking.
  • Use all features of GitHub Discussions.

Try out by leaving a comment on this article.

Why BeyondWords?

I researched a lot to add audio articles to my blog. BeyondWords was the perfect fit for me.


  • Generous free plan.
  • Lot of voices.
  • Converts articles to audio flawlessly 💯.

Why Google Analytics and Google AdSense?

I like the Google ecosystem. They help you improve your site and understand your audience better.

How I planned and built my blog

Branding and SEO

These are the tools I used for branding and SEO:

  • Colorhunt: Six colors were selected, one of which being the theme color (#7868E6).
  • Fonts:
    • Google Fonts: Poppins for the body of the website.
    • Alliance No 2 for headings. (This typeface isn't available in Google Fonts, so I had to get it somewhere else.)
  • Canva - For all the designs like logos, open graph images, and cover images.
  • Favicon generator - Used this to generate favicons for all display resolutions.
  • Webcode - Used this to generate meta tags, open graph tags, and Twitter card tags.

All the pages except the home page support Rich Results which boosts SEO.


I created a rough design in Figma and took inspiration from different blog sites and dribbble.

figma itsrakesh blog

Let's see different pages

This blog contains 8 main pages.

1. Home Page

itsrakesh-blog home page

The Home page has one featured article, four categories, three most recent articles, and four most recent snippets. All pages include a central search option on the navbar that allows you to search for anything. There will also be a search page where you may search for specific items such as articles, snippets, categories, or tags.

2. Articles

itsrakesh-blog articles page

The Articles page is for exploring and searching articles. Each article card includes a featured image, the date it was published, read time, a header, an excerpt, and tags. Clicking on the featured image or headline will take you to the relevant article. This page currently only displays 12 recent articles; pagination will be added soon. To find articles, utilize the categorized search option.

3. Snippets

itsrakesh-blog snippets page

Snippets are not code-snippets, but rather mini-blogs. The Snippets page is where you may browse and search for snippets. Each snippet card only contains the snippet's title. This page's search option returns snippet results.

4. Categories

itsrakesh-blog categories page

Every article belongs to a single category. All of the categories are listed on the Categories page. When you click on a category, it will display a list of all articles that fall under that category, with the results displayed on the articles page. You may also use that page search feature to look for categories.

5. Tags

itsrakesh-blog tags page

Similar to the categories page, the Tags page lists all of the tags. Each article can have one or more tags. When you click on a tag, it will bring up a list of all the articles that have that tag. You can look up available tags in the search feature.

6. Article Page

itsrakesh-blog article page

The Article page contains the actual article. I used react-markdown npm package to render markdown. It's an amazing tool, supports remark plugins, and safely converts markdown to HTML. You can also write GitHub-flavoured markdown. I will soon add embeds support. This page contains breadcrumb, last-updated date, read-time, featured image, published date, author photo and name, audio article, article content, discussion/comment section, and two suggested articles.

7. Snippet Page

itsrakesh-blog snippet page

The Snippet page is the same as the article page, but it excludes the featured image and audio article.

8. Support Me Page

itsrakesh-blog support me page

Finally, there's the Support Me page. This page lists all of the ways you can support my work. I accept donations using Ko-fi. I compared ko-fi to BuyMeACoffee and chose ko-fi for two main reasons: 1. No fees and 2. Paypal support. Whatever content I create, it would be nothing without your support ❤️. I need your support to keep my blog running and keep creating content, so any kind of support will be greatly appreciated :). I also planned a special page for all my supporters.

What I learned?

I want to mention that most of the frameworks, tools, etc used in building this blog are my first attempts. This project taught me NextJs, Chakra UI, and QraphQl. I also learned a lot about SEO, PWA, and accessibility.


Your feedback is more valuable than you can imagine. Please share your thoughts in the comments.

You might be interested:

Thank you for reading!



Dockerizing Your MERN Stack App: A Step-by-Step Guide

    14 min read

Dockerizing Your MERN Stack App: A Step-by-Step Guide

Are you tired of spending hours messing with crontabs and installing packages in an attempt to run your app locally? Are you sick of always missing a dependency that doesn't allow you to run the app and therefore you have to debug it for hours trying to find what's wrong? Then you've come to the right place. In this article, you will learn how to make use of Docker to develop and ship your software faster and easier.

Introducing Publish Studio: Power Digital Content Creation

    3 min read

Introducing Publish Studio: Power Digital Content Creation

Say “Hi” to Publish Studio, a platform I’ve building for the past few months. If you are a content writer, then you should definitely check it out. And if you are someone who has an audience on multiple blogging platforms and need an easy way to manage your content across platforms, then you should 100% give it a try.

Subscribe to Newsletter


  • Never miss an update.
  • Get articles and snippets directly to your inbox.
  • Subscribe to stay connected and avoid getting lost among millions of websites.


  • Coming soon...