How I Built My Blog
This post essentially delves into the nitty-gritty of the tech stack I used to build the current version of the blog. If developing a blog is something you are looking forward to, or you are just a tech-head who is curious about how this blog was built, then this meta-blog post (blog about blog) is just for you!
This post delves solely on the current version of the blog and does not look at how I initially designed the previous iterations. If “what I used before” or “Why I switched to this stack” is something you are curious about, then do let me know!
The Tech Stack
The previous version was built on Gatsby with SCSS for styling content. It was hosted on Netlify. This version is built on Next.JS and uses Tailwind-CSS for styling, along with Next-MDX-remote for MDX file support (CMS) and Vercel for hosting, form the core of the tech stack.
NextJS:
Coming to the design decisions of the current iteration: I chose NextJS because I was tired of Gatsby’s rigid format. I was on the hunt for what to use next and thought (vanilla) React might be my best bet, but then I heard about NextJS, its hype regarding simplicity and ease of development (especially blogs). Coincidentally, around the same time, my friend & I were having a small "awestruck by website" session where we looked at beautifully designed websites.This blog was one of them and when we found out that it was made with Next.js I was convinced to give it a try.
- So far, I have not regretted the choice. Next.Js has been all that I wanted it to be:
- Simple in terms of extra learning (JS + React knowledge is enough).
- Superfast & snappy.
- Simple hosting architecture (no separated hosting for client & server sides).
- Massive community support wherein npm packages like next-theme, next-SEO, next-MDX-remote, etc. are readily available with documented examples.
- Takes care of Routing, and makes CMS-based page routing oh so much easier to develop. ( Any future complaints will be put here xP)
Tailwind-CSS
If somebody told me I would be writing long lines of class names for every new JSX tag, a few months ago I would go LOLOL. Let’s just say I loved SASS until I found out about React components, which gave me the ability to decompose everything into small packets of js. After finding out about components, I realized the true reason for Tailwind’s existence. : To avoid maintaining CSS files for each of these components, all while providing standardized, customizable CSS within the comfort of class names inside the little packets of magic. With tailwind dark mode support it was an easy choice to switch. The only thing I kinda don’t like is the tailwind-typography, it is not yet fully customizable for the dynamic content generated by the MDX files.
Vercel
I saw that Vercel created Next.js and it supported native, free hosting for Next.Js apps. With the curiosity to explore different hosting services (I had already tried Netlify), I went with Vercel. No complaints so far, the deployment UI is great too, so staying there for a while I guess.
Bonus Stuff:
MDX
I had been writing my blog posts in the MD format, but many times, it felt restrictive. When I saw MDX, I instantly knew this is what I wanted. MDX is MD files that support custom components. I now have all my blog posts as MDX files. I am currently using pages next-MDX-remote to support this format in Next.js
Framer Motion
When I was looking into animation libraries, I found this link . I was totally blown away by the website and decided to try it out. As of now, I am only using it to animate the minute details, but gotta say this library opens up so many possibilities. You will probably see more of this when I explore it further
SEO and Analytics:
Something that matters when you want the content to be present on the web is SEO. I already had my previous version supporting the tags needed for SEO. The Next-SEO package is used in this version to support the same. For the analytics engine, I use Google Analytics. It is integrated into the blog for basic analytics reports.
Short Note on Design
I had spent quite some time while launching the first iteration of the blog. Be it landing pages, how the list of blogs should be seen, how each blog would look like, etc. On deciding the migration of the blog, I took the chance to re-evaluate the design, remove and reshape some rough corners from its previous iterations. It now supports DARK mode, has a ton of features and will continue to be constantly upgraded as far as design is concerned.
In The Works:
With the Middleware API routing in Next.Js, I plan on creating more features for the blog and am currently exploring persistence storage in the backend.
Hope this helped you in your blog creation journey or it helped you to learn more about how a blog is built. If you have any suggestions or thoughts, feel free to reach out on any of the social media links given below!