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.
I didn't just pick NextJs because I'm familiar with ReactJs. However, NextJs is a perfect framework for creating these types of websites.
There are a lot more benefits but these three are enough to decide.
Believe me, if you love React you will love Chakra-UI. It reduces a lot of CSS work.
Again if you love QraphQL you will love GraphCMS. It's perfect for a blog.
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?
Try out by leaving a comment on this article.
I researched a lot to add audio articles to my blog. BeyondWords was the perfect fit for me.
I like the Google ecosystem. They help you improve your site and understand your audience better.
These are the tools I used for branding and SEO:
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.
This blog contains 8 main pages.
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.
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.
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.
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.
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.
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.
The Snippet page is the same as the article page, but it excludes the featured image and audio article.
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.
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.
Stay updated with the latest trends in web development.
Your feedback is more valuable than you can imagine. Please share your thoughts in the comments.
Thank you for reading!