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 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 - (Star⭐ it) GitHub repo 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 , so that you try it out 👀? blog Tools, services, technologies, frameworks, and libraries Next.js Chakra UI HyGraph BeyondWords Giscus Coil Netlify Google Analytics Google AdSense Substack Ko-fi Common tools are listed . here 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 HyGraph? 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: : Six colors were selected, one of which being the theme color (#7868E6). Colorhunt Fonts: : for the body of the website. Google Fonts Poppins for headings. (This typeface isn't available in Google Fonts, so I had to get it somewhere else.) Alliance No 2 - For all the designs like logos, open graph images, and cover images. Canva - Used this to generate favicons for all display resolutions. Favicon generator - Used this to generate meta tags, open graph tags, and Twitter card tags. Webcode All the pages except the home page support which boosts SEO. Rich Results Designing I created a rough design in Figma and took inspiration from different blog sites and dribbble. Let's see different pages This blog contains 8 main pages. Home Articles Snippets Categories Tags Article Page Snippet Page Support Me Page 1. Home Page The 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. Home page 2. Articles The 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. Articles page 3. Snippets Snippets are not code-snippets, but rather mini-blogs. The 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. Snippets page 4. Categories Every article belongs to a single category. All of the categories are listed on the . 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. Categories page 5. Tags Similar to the categories page, the 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. Tags page 6. Article Page The contains the actual article. I used 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. Article page react-markdown 7. Snippet Page The is the same as the article page, but it excludes the featured image and audio article. Snippet page 8. Support Me Page Finally, there's the page. This page lists all of the ways you can support my work. I accept donations using . I compared ko-fi to and chose ko-fi for two main reasons: 1. No fees and 2. Paypal support. Support Me Ko-fi BuyMeACoffee 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. Subscribe to my newsletter Stay updated with the latest trends in web development. https://newsletter.itsrakesh.co/ Feedback Your feedback is more valuable than you can imagine. Please share your thoughts in the comments. Thank you for reading!

BUNCH

Coil

fees

Google

Super

Twitter

Get Started Building your First MERN Application - Step by Step

The Blockchain - A Look At How It Works and Why We Need It

Website

Hire Me

Nominated for 2022 - HackerNoon Contributor of the Year - Mongodb

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Too Long; Didn't Read

How to Build a Blog with NextJs, Chakra UI, and HyGraph

How to Build a Blog with NextJs, Chakra UI, and HyGraph

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Most Common Ways to Connect your Node and React Applications

100 Stories To Learn About Blogging

24 Best JavaScript Blogs and Websites

2018: My Technology Retrospective

4 Simple Ways to Skyrocket Your Blog Readership

46 Stories To Learn About Blog

3 Most Common Ways to Connect your Node and React Applications

100 Stories To Learn About Blogging

24 Best JavaScript Blogs and Websites

2018: My Technology Retrospective

4 Simple Ways to Skyrocket Your Blog Readership

46 Stories To Learn About Blog

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps