I have never really liked the idea of writing a blog, and the thought of others reading my notes is somewhat terrifying. You may ask yourself, "Then why did this person start a blog?" and you would be right to ask. As a software developer and overall technology geek, I, like many others, have a list of abandoned personal projects with nothing to show for my failures and successes – but I wanted this to change and I wanted to have a record of my projects regardless of how they ended. And, after numerous abandoned attempts, I finally chose to sit down and build a portfolio blog and deploy it to the internet. So, I welcome to the world "Coders Scratch Book".
As a visually orientated person, I initially thought of filming and editing my projects and keeping a video record; however, this would introduce significant overhead both during and after the projects. So in the interest of avoiding this rather time intensive option, I decided to go with a more lightweight solution. And as I see it, a lightweight version of a video log is a written log. So, to answer the question, "Why did I start a blog?":
- Firstly, I want to share my projects with the broader community and have a personal portfolio to showcase my work.
- Secondly, to gamify the report writing process by utilising analytics to view site visitors and engagement time, similar to a simple "numbers go up" game.
- Thirdly, I wanted to create a simple website to work on and improve continuously.
Goals
My mentality for this project was simple: I wanted to create a blog in as little time as possible and not let myself get bogged down early in the details. The blog won't be perfect; however, having a finished 'good enough' blog is better than chasing perfection and never reaching that 'go live' finish line. With that in mind, my two primary goals for this project are:
- To create a website where I can publish work.
- To refresh my frontend web development knowledge and challenge myself to create a blog without following a guide
Implementation
The struggle of a page layout
I initially ran through a few iterations for the page design when first creating this blog. Design is not my strongest forte, so I chose to keep the design simple; after all, it is an aspect of the blog that I can iterate and improve on over time. I first chose a layout with a "Hero" article to showcase the latest post and then display a list of older articles below it. However, when actually implemented and viewed, this layout did not suit the blog I currently had; that is, a blog with a total of 1 post. This limitation of a single post then led me to a different design, a simple list-style layout. However, this still wasn't a great fit as it felt too simple for a desktop. While still looking for layout inspiration I stumbled upon a template for a change log on Framer. The simple design and developer-like theme resonated with me, and I decided to run with the layout, thankfully solving a large problem and allowing me to move on to my next and most significant challenge.
One does not simply handle posts.
The most significant hurdle of this project was the process of handling posts. I wanted to create a system to copy my write-ups from my notes app Obsidian to the blog with minimal change.
I looked into a few options, starting with storing the posts as raw markdown and loading them directly to a page based on the URL param, however, I quickly abandoned that idea as I struggled to get react-markdown working dynamically. I then moved on to similar packages that converted HTML to JSX and another that dynamically loaded JSX files. Both these solutions worked, however, there was significant overhead in converting my notes to those formats. I was running into the issue of styling mismatch, where the write-ups were displayed in a different font than the rest of the site. I decided to take another attempt at dynamically loading a markdown file as this would require the least work when moving my write-ups to the blog. I stumbled upon a framework called MDXJS which hails itself as "Markdown for the component era". This handy little framework lets me copy my Obsidian markdown into a .mdx file and insert React components and images to style the article beyond simple markdown limitations. MDXJS also allows for dynamic loading, where it can read a .mdx file from storage and display its contents to the reader, solving my most significant problem.
Wrap up
The list of things I would like to improve and change on the blog is seemingly endless, but I've accepted now that this is natural. I have a blog to show for my work, which I can share with others, and most importantly, it gives me a drive to finish future projects.
The blog will evolve and iterate over time and grow with my career and hobbies, but at this point, it's good enough, which is the most critical aspect.