For some reason, rebuilding my website from scratch has become some kind of yearly, unforced habit of mine. 2021 was a miss, but now in 2022 we’re back on track. With each iteration, I try to find a way to make some aspect of the site better. It’s a fun little side project I spend way too much time on.
This time, the focus was a little different. It wasn’t so much about making the technical implementation better, but instead, concentrating on one of my favourite hobbies: writing. In 2021 I wrote and published exactly 0 articles. (There’s a trend here.) This year I plan to change that and so I wanted to build myself a platform where I would be proud to publish all of my articles. My website is where I get to exercise pretty much every creative muscle I have by bringing together two passions: coding and writing. And so this is how things went this time around.
From Markdown to Ghost
The previous version of my website had all of its content sourced from Markdown files. Combined with Gatsby it was pretty much the perfect match in terms of managing blog posts and other site data. I used GraphQL and a few Gatsby source/transformer plugins and that was it. It was so simple.
And yet, building up a reliable authoring system was a challenge. If I wanted to schedule a post in advance, then I’d need to set up some GitHub Actions. In order to keep my blog tags consistent, I’d have to remind myself of what tags I’d used previously and make sure the spelling was perfect. Editing a post meant pushing another commit to GitHub… You get the idea. In all honesty those things aren’t a big deal separately, but added together it put me off writing any new posts.
So, given the focus is now on the content, I felt I had to use a CMS for this new version of my site and in my opinion there is no better CMS for blogging than Ghost. Everything about it from the developer documentation to the actual editor itself is so well crafted. All the functionality I could need is right there: scheduling posts, webhooks, extensive tag management. And the platform is so easy to use.
Another thing about Ghost I found beneficial was the fact that it comes with a default set of posts after installing on your machine. This “dummy” content is not just Lorem Ipsum (or, my favourite, Bacon Ipsum ). They’re fully fledged blog posts with headings, images, lists, block quotes and some other fancy elements. This made styling my website even easier to get on with, as I had a ready-made example of almost every possible element. I know it’s not the most advanced feature of any CMS, but it saved a lot of time.
(👀 I’m hosting Ghost on Digital Ocean. If you want to try it out for yourself, here’s a Digital Ocean referral link you can use with $100 credit 🤗)
Building with NextJS
I think the thing that really won me over with Ghost is being able to source content with its Javascript API library. It made working with NextJS even simpler than the previous GraphQL + Gatsby setup. Which is great because I’m still fairly new to the NextJS framework. I switched over from Gatsby for exactly that reason — to learn something new. However, there is definitely a learning curve when you’re already used to doing things a certain way.
For example, the work section of my website is still sourced by Markdown files. By contrast to Gatsby, sourcing and using Markdown in Next feels a lot more convoluted. What was abstracted away into two plugins now has to be re-implemented using multiple libraries and some DIY Javascript. It’s good practice to be honest and thankfully, there was an example to follow. In fact, that turned out to be the case with a lot of what I wanted to do with Next. There are many example projects which look at different functionalities for your site. E.g. adding sitemaps, styling with various CSS frameworks, getting content from different sources, adding comments to blog posts… the list goes on and on. It made the transition from Gatsby to Next a lot smoother.
And of course, opting to go with Next, I still have all the same benefits of a static site as with Gatsby: super speedy, secure and scalable. I haven’t made use of the Incremental Static Generation or preview mode as of yet, but I’m pretty sure these will be straightforward enough to add later on.
(👀 I plan on going more in-depth with the features & differences with NextJS and Gatsby soon. Stay tuned!)
Styles by Tailwind
I’ve being using Tailwind CSS for a while now and each time I work with it, I’m amazed at how simple yet powerful it is at creating completely custom layouts and designs. There’s no wrestling with prebuilt styles like with other CSS frameworks and if you need to configure something it’s usually just a simple change in the config file.
This kind of workflow enables me to work much quicker. With the previous version of my website, I had to style each HTML element in my blog posts and ensure all the styles were responsive. Now (with the help of an additional plugin ) all I need to do is add a prose class where my blog content is and the whole thing is styled up with a nice set of opinionated styles.
The best bit about all of this though is that dark-mode ( prefers-color-scheme version) is enabled by default in Tailwind V3. So all I need to do is add dark: followed by the relevant property value across my components and layouts.
I know the low-level utility vibes aren’t for everybody and that standard CSS still has its usages. But for brand new projects with no other dependencies or strict coding guidelines, Tailwind is my go to.
Going forward
I’m pretty happy with how things turned out this time round with redesigning my website. If another update comes later this year, I’m preempting it’s going to be a lot more iterative. Adding blog comments & reactions is still on my radar, alongside potentially setting up a newsletter and introducing some funky animations.
But at the end of the day, what’s the point in adding all these features if what you’re reading now is the only post I publish in 2022?
So here’s to getting the balance right between writing code and writing stories this year 🍻
…and going outside every once in a while.
Top comments (2)
very interesting post
thanks!