Finally, published my blog. I am incrementally updating this post to explain my technology choices for this blog. Read on, and stay tuned!
Why use Gatsby
I am a developer by profession, and hence I'm always curious about new technology. Using my blog as a playground to learn new things was something I enjoyed thinking about. Therefore, I spent some time looking into technologies which are both exciting and useful to create a blog.
Wordpress was out of the question. As was drupal, magneto and the likes. I was looking into newer CMS technologies. I found Gatsby and Strapi to have the initial qualities I was looking for.
Strapi is a headless CMS which supports multiple data storage capabilities out of the box. It has predefined input types and plugins to extend those types. These types supercharge the creation of contents. Strapi delivers content using REST or GraphQL. Sounds quite ideal. However, what it did not have (at the time of writing) is the capability to store my content in markdown format. I wanted to have my writing in a portable format for maximum freedom. This missing future broke the deal for me.
Gatbsy, on the other hand, did support markdown. That's because it's a static site generator, with a twist. Gatsby uses React in the frontend to build the static site as a single page application (SPA). This makes a site built with Gatsby blazing fast. Developers have considerable freedom building the frontend with React as they see fit. Furthermore, Gatsby supports multiple ways to source contents, which can be a database, or a markdown post - just the way I wanted. Unlike Strapi, Gatsby only uses GraphQl to deliver content in the frontend. I was cool with that.
The relative freedom that Gatsby offered to build a blog, the use of React, the capability to use markdown as source, and the static site generation - all these contributed towards my decision to use Gatsby.
Why Tailwind tho
I must admit, I do not have a strong reason for choosing Tailwind. I was just tired of using Bootstrap. I wanted some fresh air. And Tailwind brought the wind for me (pun intended). Tailwind defines itself as a utility first CSS framework. What this means is that Tailwind encourages you to use css classes as low level building blocks, instead of css attributes. This differs from Bootstrap by the virtue of being less opinionated about how HTML components should look.
I believe that what Tailwind offers is worth learning. Although Bootstrap may be a swiss knife for CSS design, sometimes it's not exactly what the chef wants. Instead of using bare metal CSS, Tailwind offers a compromise and tries to make life easier for poor saps like me who abhors .css files.
Directory Structure
Here is a high level overview of the directory structure of the package that stores the static site generator part of my blog
- src
- components
- List
- ArticlePreview
- Pagination
- Common
- Avatar
- TagsSection
- helpers
- footer
- layout
- nav
- seo
- css
- images
- pages
- templates
- TagsList
- List
- Post
There are several sections inside the src directory. components store React components used throughout the application. css and images directories store required CSS and image files, respectively. pages directory stores Gatsby pages, although I am creating all pages programmatically for now. Finally, the templates directory stores the templates used in creating the programmatically created pages.
My blog posts are stored in another repository. Here is the structure for that repository.
- src
- {YEAR-MONTH}
- {FILENAME}.md
All markdown files are nested under a src directory. The files are grouped in folders named after the year and month it was published. For example, my very first post, named first-post.md, was published on July 2020, so the file is stored under the 2020-05 directory. I use the gatsby-source-git plugin in my main blog repository (which houses the static site generator) to fetch the posts from the blog posts repository.
Tweaks
Here are some tweaks that I made to improve performance and visibility of my blog
Add dark mode
I use the prefers-color-scheme CSS media future to detect if the customer prefers light or dark mode. Depending on the mode, the interface theme changes from white to black.
