Focus on the writing, they said

When starting a blog, usually your goal is to write. This is my goal from the beginning when I decided to embark on this journey. If you have not read about what motivated me to start this blog, you can do it in my first post.

Today I will talk about why I rewrote my blog despite having a goal of focusing on writing blog posts.

It all started with my first technical blog post. As a software engineer, I will mostly write about technical things, at least for now. Therefore, it comes as no suprise that my first technical blog post has some source code to display.

Rewind to the beginning

Let us rewind a little bit to the start. Since my motivation was to write, and I did not want to fiddle with CSS and designing my website, I started searching for a nice template that I could use. I found a nice template at Stackbit.

Stackbit is actually pretty nice since it lets you customize your website through a User Interface (UI). I also did not have a lot of experience with Gatsby, so I decided to give it a try. That did not last long, unfortunately.

By nature, I like to customize things how I like them. So it did not take long until I touched some code in my Gatsby project and I broke the integration with Stackbit. That was fast! 😅

After breaking Stackbit I decided to keep going forward, but now I was writing and customizing my blog directly in the code. I kept customizing some things; adding favicon, SEO features, etc. So far so good.

Fast forward to the next blog post

First stone

Fast forward to writing my first technical blog post. As I said, this post has some source code that I wanted to display. Of course, I wanted it to look good! There is nothing I dislike more than going to a website and seeing source code that is effectively unreadable due to bad styling.

I did some Google searches and found PrismJS to style code blocks. Particularly I found a Darcula theme, the same IntelliJ uses and one I particularly like.

I tried to integrate it, but unfortunately it had some conflicts with existing CSS. CSS is not the easiest thing for me, so my willingness to dive into that was close to zero.

That was the first stone I found on my path.

Second stone

In parallel, I wanted to do some small tweaks here and there like adding some more fields to my GraphQL query or making specific queries for certain pages. That is when I started to dive a little deeper into the implementation code of the template project.

It was not good, at least from my perspective.

I have had a look at some Gatsby projects and tutorials, so I had already an overview of how things are done usually in Gatsby. This project made one single GraphQL query and then passed this data along everywhere. A real mess in my opinion.

Although this was not ideal, I still had the convinction that I could work with that and still have the focus on writing.

Second stone on my path.

Third stone

When I though the previous issues were more than enough to make me want to rewrite my blog, I found yet another issue.

The template project I used to launch my blog was using MarkdownRemark plugin to convert Markdown files into HTML using Remark. This is a super nice thing to have.

I am very familiar with Markdown and having the possibility of writing my blog posts in Markdown to later leave it to the plugin to convert them into HTML pages is really appreciated. All good until here.

Then I discovered there is MDX; another plugin that does mostly the same thing but also allows you to embed JSX code within your Markdown file. This gives you tremendous possibilities as you can embed more advanced features within your content.

This was really attractive to me. I did not know if I would need such feature, but my gut feeling told me that if I start a blog, before having to migrate many things, it would be better to count with it from the beginning.

I am currenntly using features from MDX that I could not use with MarkdownRemark. It turns out I made the right call.

Apparently, the migration was not very difficult from what I could read in the documentation, so I decided to migrate the template project to use MDX instead of MarkdownRemark. Then hell unleashed 🔥, everything crashed, everything stopped working.

Tipping point

After thinking about it, this was it.

This was the tipping point where I decided I did not want to have such technical debt.

I tried.

I found some stones in my path I decided they were not big enough and that I could still keep my focus on the main goal. But this was too much. I had published one single blog post, it was even just the one to present myself, so effectively zero articles published.

I wanted to spend some time setting everything up and forget about it and focus on the writting. Knowing I had so much technical debt from the very beginning was very daunting, yet my motivation to write was strong. This is where I decided to throw everything away and start again 🤷‍♂️.

Happy to fail fast

Despite failing on the first attempt to have a blog post, I was very happy that it happened fast. In reality it was a big success.

I had launched a website and I was actually able to publish articles. There were some bad things going on behind the scenes but it was mostly OK.

Fail fast. Fail early. Fail often.

I was very happy to have failed so fast and early. I knew this was necessary and I did not expect to have the perfect website with the perfect code from the start.

In reality, this has taught me some key things that I will probably be thankful for in the future.

Starting again

Now that I decided to start again, I wanted to do it right, or at least try to do it better.

Apart from what the published version of the website had, some more things became a must for me:

• Code must follow standards and make queries per page. Forget about single query and passing data everywhere.
• Code snippets must look good. Ideally I want to use PrismJS. The icing on the cake would be to use the Darcula theme.
• It must use MDX plugin for Markdown conversion.

A few weeks back I got to know about TailwindCSS and I was delighted with the possibility of not having to write any CSS 😝 so I thought I might as well put it on the list.

To my suprise, there is a Gatsby starter template that meets the first two requirements. It has nice code and it already supports PrismJS.

I decided to give it a try, still not convinced as it was using MarkdownRemark plugin instead of MDX. I also wanted to see if my other wishes were fulfilled.

• ✅ I migrated the starter template to MDX without a problem. The migration guide even uses the starter template as a starting point!
• ✅ I introduced TailwindCSS successfully.
• ✅ I also tried applying Darcula theme to PrismJS and that also worked.

All the things from the list were checked off, I was really happy about that 🎉

Fast forward to the present

The rest is part of history.

Using the starter template and taking my old template as a guide, I replicated all the styling of the website as best as I could using TailwindCSS. I had some problems with the Twitter cards for a few weeks but I managed to solve it too.

Now everything is awesome and I can finally fully focus on the writing.

However, this journey of diving deeper into the code and my nature as a software engineer have opened the door for new things. I am now more willing to work on features for the blog. I have to admit this is something I was pretty sure it would end up happening, I just did not know when.

This was just the story of the beginning of this blog. How after launching I started again from scratch.

Thanks for reading!