How I built my Blog with NextJs, Chakra UI, and GraphCMS?
Tags: nextjs, blog, webdev, beginners
Published: 2022-07-03 17:31:40

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 ([blog.itsrakesh.co](https://blog.itsrakesh.co/)) with NextJs, Chakra UI, and GraphCMS 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](https://github.com/RakeshPotnuru/Blog) (Star⭐ it)
- I will soon write a step-by-step guide to host your own instance of this blog. (Instructions in repo README are not for production)
- How about reading this article on my [blog](https://blog.itsrakesh.co/how-i-built-my-blog-with-nextjs-chakra-ui-and-graphcms), so that you try it out 👀?

## Tools, services, technologies, frameworks, and libraries

- [Next.js](https://nextjs.org/)
- [Chakra UI](https://chakra-ui.com/)
- [GraphCMS](https://graphcms.com/)
- [BeyondWords](https://beyondwords.io/)
- [Giscus](https://giscus.app/)
- [Coil](https://coil.com/)
- [Netlify](https://www.netlify.com/)
- [Google Analytics](https://analytics.google.com/)
- [Google AdSense](https://analytics.google.com/)
- [Revue](https://www.getrevue.co/)
- [Ko-fi](https://ko-fi.com/)
- Common tools are listed [here](https://blog.itsrakesh.co/tools-i-use-from-design-to-deployment).
- A bunch of NPM packages.

## 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.

**Reasons:**

- 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.

**Reasons:**

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

### Why GraphCMS?
Again if you love QraphQL you will love GraphCMS. It's perfect for a blog. 

**Reasons:**

- 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?

**Reasons:**

- 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.

**Reasons:**

- 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](https://colorhunt.co/): Six colors were selected, one of which being the theme color (#7868E6).
- Fonts:
  - [Google Fonts](https://fonts.google.com/): **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](https://www.canva.com/) - For all the designs like logos, open graph images, and cover images.
- [Favicon generator](https://www.favicon-generator.org/) - Used this to generate favicons for all display resolutions.
- [Webcode](https://webcode.tools/) - Used this to generate meta tags, open graph tags, and Twitter card tags.

All the pages except the home page support **[Rich Results](https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data)** which boosts SEO.

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

![figma itsrakesh blog](https://i.imgur.com/85s1NP8.png)

### Let's see different pages

This blog contains 8 main pages.

- [Home](https://blog.itsrakesh.co/)
- [Articles](https://blog.itsrakesh.co/articles)
- [Snippets](https://blog.itsrakesh.co/snippets)
- [Categories](https://blog.itsrakesh.co/categories)
- [Tags](https://blog.itsrakesh.co/tags)
- [Article Page](https://blog.itsrakesh.co/how-i-built-my-blog-with-nextjs-chakra-ui-and-graphcms)
- [Snippet Page](https://blog.itsrakesh.co/snippets/how-to-clone-a-specific-folder-of-a-github-repository)
- [Support Me Page](https://blog.itsrakesh.co/support-me)

## 1. [Home Page](https://blog.itsrakesh.co/)

![itsrakesh-blog home page](https://i.imgur.com/1CORokV.png)

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](https://blog.itsrakesh.co/articles)

![itsrakesh-blog articles page](https://i.imgur.com/kb9Ajuf.png)

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](https://blog.itsrakesh.co/snippets)

![itsrakesh-blog snippets page](https://i.imgur.com/YyVj4b6.png)

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](https://blog.itsrakesh.co/categories)

![itsrakesh-blog categories page](https://i.imgur.com/7EDMsaN.png)

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](https://blog.itsrakesh.co/tags)

![itsrakesh-blog tags page](https://i.imgur.com/9QxX6Ar.png)

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](https://blog.itsrakesh.co/how-i-built-my-blog-with-nextjs-chakra-ui-and-graphcms)

![itsrakesh-blog article page](https://i.imgur.com/sLsGsiK.png)

The **Article page** contains the actual article. I used [react-markdown](https://www.npmjs.com/package/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](https://blog.itsrakesh.co/snippets/how-to-clone-a-specific-folder-of-a-github-repository)

![itsrakesh-blog snippet page](https://i.imgur.com/8nzyhlw.png)

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

## 8. [Support Me Page](https://blog.itsrakesh.co/support-me)

![itsrakesh-blog support me page](https://i.imgur.com/xVRhlvu.png)

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](https://ko-fi.com/). I compared ko-fi to [BuyMeACoffee](https://www.buymeacoffee.com/) 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 GraphQl. I also learned a lot about SEO, PWA, and accessibility.


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

---

You might be interested:

{% embed https://dev.to/itsrakesh/how-i-built-my-portfolio-website-hl5 %}

---

Follow for more like this every week 🚀.

Thank you for reading!