Change is always driven by some kind of problem, right? Something that exists to eventually be fixed, no? These rhetorical questions are annoying, yes? The latest round of changes that have befallen my website can be summed up in one word: control. As in, I have taken it back.
Jheez, when did you lose it?
Previously, I have raved about the CMS Ghost. It’s a fast, modern and easy way to host a blog and get your content onto the internet. However, when you want to expand beyond the boundaries of blogging, things can get a little awkward. The platform itself is geared toward online magazines and newsletters — not necessarily bored web developers with too much time on their hands during a lockdown, who want to expand their online presence.
What does that even mean?
All of the content I had planned for this latest iteration of my website wouldn’t sit well within a CMS made for articles. 👈🏾 This was the problem that inspired the change.
So I started my search for a new CMS that would allow for a flexible, customisable content model. I considered a whole host of offerings including Contentful, Prismic and Sanity. I even ventured back to… Wordpress <shudders>. Alas, I wasn’t fully satisfied with any of them. I felt more a like passenger, rather than the one in the driving seat.
(Sidenote: I’m also cheap and didn’t want to pay Digital Ocean $5 a month for the Ghost server that gets used 5 minutes a week. But if you do, here’s a referral link 😉)
Solution
My search for a new CMS had me scouring the internet for inspiration. Eventually, I stumbled over this post from Samantha Ming: Building my New Site with VuePress. In it she talks about a static site generator called VuePress. It’s pretty cool and comes with a plethora of features baked in. I was still happy with Gatsby for all my SSG needs, but something else about her post garnered my interest:
The Power of Markdown
I’ve used the markup language before, but never saw it as the basis for storing different kinds of content. Older and wiser, I realise that by defining different frontmatter fields, I can create pretty much any type of anything that my brain can imagine. Meaning, my content no longer has to be manipulated to fit the management system, the system can be easily manipulated to fit the content. It’s all just there, however I define it — ready to be consumed by my GraphQL queries and rendered into something presentable through a React component.
Combined with Gatsby, Markdown gains some extra superpowers. (I think that’s the nerdiest thing I’ve ever written in my life.) Headings can easily be extracted and linked up from my posts to create some permalinks. Images can be referenced and designed with predefined styles. The time to read a post can be taken from a query and used in an archive listing (for example). I’m only scratching the surface here.
It’s undeniable. A perfectly made match: Markdown + Gatsby, like cookies and cream.
However in this context, Markdown is like the juice, not the bottle. In terms of an actual CMS, that’s just files in git being handled by a code editor. I’ve got both eyes on TinaCMS, but in all honesty that makes no difference for you: the person consuming the content. So what exactly does change for you?
New Design
Another problem I had with the previous site was using a CSS framework. Pretty much the same story: as soon as I tried to do something out of the ordinary, things became unnecessarily complex. Bulma was the framework in question. It’s honestly great and I’d recommend it to anybody, but if you’re looking for something that allows you to be more creative, Tailwind CSS is awesome. (Another inspiration from Samantha’s post!)
It’s different to other CSS frameworks. The best way to demonstrate is by example. Let’s say I wanted to create a nice button. Here’s how that might look with Bulma:
<a class="button">
Tidy.
</a>
And with Tailwind:
<a class="whitespace-no-wrap inline-flex px-2 py-1 rounded-sm text-sm tracking-widest items-center justify-center leading-6 font-medium transition ease-in-out duration-150 bg-dark text-white">
Wowza.
</a>
I know, I know. Why would anyone want so many classes in their HTML? Well, when you’re in the pursuit of control, this kind of tool can be incredibly helpful. Tailwind works by giving us utility classes. These classes — rather than holding an entire set of styles like that button for Bulma — each specify a subset/one thing about your HTML element. I agree, it looks messy, but this can be cleared up to look a lot neater:
<a class="btn btn-secodnary">
Phew.
</a>
We can do this by abstracting Tailwind’s utility classes into custom component classes for our elements/components. See this article if you’re interested.
The point is, this way of styling my site has allowed me to create something that’s truly one-of-a-kind — heavily influenced by Temi Coker’s website — without having to write thousands of lines of CSS code.
Tutorials*
But let’s say you do want to write thousands of lines of CSS, or better yet just know what it is. Helping and encouraging others has been a driving force behind my interest in technology and programming since day one. What good is knowledge stored up within yourself if you don’t share it with other people? So I’ve created a new Tutorials section — bringing (what I hope are) useful, easy to follow tutorials and intros on various aspects of web development. The hope is you’ll learn something and if I’ve really succeeded, become a fellow nerd. 🤓
*Follow me on DEV for just the 1s and 0s!
Privacy
In an effort to enhance visitor’s privacy, I’ve switched out Google Analytics for Netlify Analytics. Using analytics directly from the same peeps who are hosting this site allows for a more simple and streamlined analytics gathering experience, with a focus on user privacy. The data is collected from the servers dishing out the content, rather than from cookies and scripts loaded onto your browser. In theory, that also means no performance loss! 🙌🏾 Maintaining fast load times, not storing any cookies on your browser and being totally GDPR compliant is peace of mind for you and for me.
Wrap up
Anyway, that pretty much wraps up this latest round of changes! It’s become a sort of unofficial yearly tradition of mine to reiterate this website and try out some new features and designs. I’m excited to see what’s going to crop up, now I’m back in control.
✌🏾
Top comments (0)