It's 2023, shortly after becoming a father, I suddenly realized that I was getting old and decided to start this blog hoping to leave traces of my limited human existence in this world.
To Build or Not To Build
The answer was I want to make this blog personal, my own sanctum, my home on the internet. I want to be able to customize it however I want, to the smallest details. It should give an experience that is uniquely mine.
After decided on building my blog, I need to choose a technology to build it with. There exist many technology choices for building a blog nowadays, from static site generators like Jekyll or Hugo, to writing it from scratch using a front-end library like React.
I happen to be familiar with React. Thanks to frameworks like NextJs or Gatsby, React development is now much more pleasant than what it used to be. You no longer have to worry about configuring bundlers like Webpack, or how to do client side routing properly. I ended up picking NextJs as I've heard many wonderful things about it.
NextJs is not too difficult to learn if you're already familiar with React. It literally took me half a day to get the first version of my blog up and running. Maybe that's how NextJs was designed, to make you feel ultra productive.
Then, I decided to try TypeScript, as I am used to typed languages from the other developments at my current and previous fulltime jobs.
Surprisingly, starting with TypeScript in NextJs is extremely easy, especially when you don't have to configure Webpack yourself. I can go straight to learning TypeScript.
- You can declare what type you're expecting and not having to worry about mistakenly passing a boolean to a string.
So I spent the rest of the day TypeScript-ing my blog. The linter (I use eslint) helped a lot, it tells you when you should annotate with types, or when the types can be inferred.
I finally had a basic working version of my blog in TypeScript!
Beauty in the Beast
My blog was running. But oh boy, it is ugly! How can website look good without some CSS styling eh?
To be completely honest, CSS isn't my thing. But that's how the web came to be and complaining about it won't do much help.
Then I discovered Tailwind CSS while browsing through NextJs documentation. It has certain notable features:
- It scans your React code and only produces the CSS class that you actually use.
- It has an easily configurable theme-ing system.
- It generates state modifier (
dark:) for most of it's classes, so you can do conditional styling without needing to write your own CSS.
- It has built-in classes to cover pretty much all CSS features.
But one major downside it has compared to Bootstrap is that it lacks an actual components system (although you can get some free component examples from Tailwind UI, there are no classes specific to a component in Tailwind CSS)
I decided to give it a try anyway since I like how easily styling was with it.
It forced me to build all the components in my blog from scratch, but fortunately I didn't have too many of them and they turned out looking just the way I like.
Tailwind NextJs Starter Blog
Some time later I stumbled upon Timothy Lin's Tailwind NextJs Start Blog
It is packed with features. If only I had discovered it sooner 😭
By now it's already too late to just fork it and do basic modifications:
- It uses NextJs legacy Page Router while I already used the latest App Router with React Server Component, which is the default in NextJs 13 since I started learning.
- It uses mdx-bundler while I used @next/mdx to render my Markdown posts.
I ended up cherry-picking some features I like from it into my blog:
- After careful consideration between @next/mdx, mdx-bundler and next-mdx-remote I chose mdx-bundler as it is the most features rich while also being independent from Webpack
- The Tags page. My posts had no tags in them 😂 (I did fix some wonky CSS issues to make it look more consistent on smaller screens)
- The Blog List Page. Specifically pagination and searching.
- Rendering the Author page using MDX. Mine was just a regular React page.
- Theme switching / Jump to top button
- Sitemap and SEO, although NextJs 13 does Sitemap and SEO very differently compare to it, I doubt I wouldn't even bother doing SEO without reading Tim's works.
- RSS feed generation.
All and all, I thank Tim for producing this amazing work. Without reading it, my blog would never become as it is today.
By building this blog I have learned:
It's been a great journey so far so I have decided to document it as the first post on this blog.
Thank everyone for reading!