How I built this blog?

If you want to start a development blog for yourself, you have come to the right place. After conducting extensive research, I have curated a cost-effective tech stack for this blog, and I would like to share my experience with you to help you make better decisions.

There are many options available today to start your blog. Many website builders or CMS editors provide options to publish your site in just a few clicks. Still, with these tools, you get very limited options to customize your site. I headed my research in another direction. With the emergence of React, the frontend world has evolved significantly. I needed to choose a React-based framework that supports server-side rendering (SSR). I had three choices: Gatsby, Next.js, and Remix. In the past, I had used Gatsby and Next.js, and Remix was relatively new to me. But it was an attractive option considering the SEO benefits due to the smaller bundled size of the build. On the other hand, Next.js 13 introduced nested layouts like Remix and server-side components, which addressed this problem.

Even though Gatsby and Next.js both provide similar functionalities today, based on my experience, I decided to go with the more mature framework, Next.js.

Deciding on a content editor tool was easy. There was no point in using CMS tools like WordPress, Ghost, or a headless CMS tool like Strapi, as it would mean managing another service and the database. Therefore, I decided to use Markdown files to store my blog content. I commit these files to my private Github repository. And now, with powerful MDX, you can use JSX in your content.

After this, I had to decide on a CSS framework. I know only basic CSS, but I still want full control of my website design. MUI provides a lot of ready-to-use components, but it comes at the cost of performance. I needed something lightweight and customizable. So, after going through the pros and cons of all available options, I finally decided to use Tailwind CSS and headless UI. Tailwind CSS takes care of cross-browser support and many other things, and components provided by headless UI take care of accessibility as well.

Now, it is time to go live. For that, I need to purchase a domain and find a hosting provider.

In the past, I've used GoDaddy and Namecheap to register domains but found their renewal prices to be too high. This time, I decided to try Google Domains, which had more reasonable prices for both purchase and renewal. I also appreciated the easier integration with G-suite if I decide to use it later.

For hosting your website, there are many options available today. As I am using Next.js, I chose Vercel for hosting my website to take full advantage of Next.js. Vercel hosting platform is made by the creators of Next.js and designed specifically for Next.js applications. I'm currently using their Hobby plan, which is free for personal and commercial projects.

Overall, building my blog from scratch allowed me to customize and tailor it to my needs. I appreciate the benefits of using Next.js, Markdown files, and Tailwind CSS to improve website performance and simplify content creation.

I will be delving into technical details in the next part of this series.

Currently, there is no comment section available, so please feel free to reach out to me on any social media platform.