This Blog is Built with...

Please find the overall "tech-stack" for this blog.

1. I am using Next.js 13 for the framework for the blog. The ease with how we can now only change the component that has a state change, is very appealing and refreshing. WITHOUT TYPESCRIPT.

• I am NOT using the Legacy Mode with the ./pages directory.
• Everything sits in the brand-new Next.js 13 ./app directory.
• I am NOT using a CMS though I recommend Strapi with Next.js if you the user will find a CMS easier.

2. I am using ContentLayer to be the data layer.
3. I have configured MDX (within Contentlayer) to use Rehype plugins. I am also using additional MDX plugins for various other features. I am specifically using the following plugins:

[NOTE: Excellent guide to all this universe of Rehype/Remark/etc]

• rehypeSlug
• rehypeAutolinkHeadings
• rehypeCodeTitles
• rehypePrism
• remarkGfm
• readingTime

4. I am using CSS Modules. Aside from the reasons listed in this article regarding CSS Modules in general, I didn't find any need to use styled-components, especially for a one develop project like this blog of mine.

5. I am hosting my Blog on Vercel Premium Hosting. I tried the service using their Free Hosting and upgraded as the Premium/Paid service has support for unlimited domains. Did I mention how freakin' easy it is to use?

Many thanks for those developers who wrote articles or otherwise helped me to understand something or move forward with my blog.

In no particular order, thank you:

1. Delba Oliveira, her excellent blog post regarding Next.js 12 and MDX
2. Maximilian Schwarzmüller, his comprehensive and easy to follow Udemy Next.js 10-12 Course
3. Rajdeep Singh, his series of Next.js articles on Medium
4. Hossein Shourabi, excellent article on using ContentLayer
5. Josh Comeau, for his awesome blog and specifically his custom CSS Reset and his outline on how he built his own blog with Nextjs.
6. Oliver Schöndorfer, for the very understandable primer on font and how to do it right.

I used these tools:

1. coloors - to help me come up with a great color scheme.
2. favicon generator - from a 512px x 512px original favicon image.
3. Access Color Generator - to come up with my color scheme, I used this tool to ensure the contrast was sufficient.
4. Aspect Ratio Calculator, an oldie but goodie. I use this to resize images to the correct width while maintaining aspect ratio.
5. Visual Type Scale, another oldie but goodie. This helps to create visual hieracky for my headings. (h1-h6 tags)
6. ResponsivelyApp This app is an open source, multibrowser browser. It let's you see your design across multiple screen sizes at the same time.