Blog final final final: My journey that led me to Contentful

Medium: Where it all began

Way back in 2017, I first considered blogging. One of the stories I wanted to share was how I got into software development in the first place, because it is quite an emotional story and one that I hope will inspire others to never give up. 

But before I could get started blogging, I needed to look into where to blog. Now, being a developer at the time, the initial idea was to use some kind of static site generator such as Hugo or Jekyll. However, this required a lot of customization using CSS. 

CSS and I don’t get on. I take courses, I can explain the box model to you, I can tell you what CSS stands for and how that applies, but as soon as I have a few items on the page, everything turns to chaos and I just want to cry. So, I very quickly ruled out anything that required a lot of CSS. This is when Medium came along. 

Medium describes itself as “an open platform where readers find dynamic thinking, and where expert and undiscovered voices can share their writing on any topic.” I liked that Medium was free to get started and browser-based, so the barrier to entry and friction to post was low, giving me fewer excuses to procrastinate on writing.

So, on the 22nd of June 2017, I published my first blog post on Medium, How Software Development Saved My Life.

I was glad that I could focus on being vulnerable and sharing my story, and not worry about whether the code I had written would lead to a functional blog. Plus, there was no need to worry about deployments to a hosting solution, Medium took care of that for you. 

I used Medium for a while, but I wasn’t a prolific blogger, sporadic was definitely more accurate. But if I had something I wanted to share, I could. 

But one of the things I didn’t like was the lack of customization in terms of colors, fonts, using a custom domain, and other things that make your content unique to you. It either wasn’t possible, or was only available in a premium subscription tier. Plus, Medium seems to have an articles-per-day limit for readers. I think you can pay to have unlimited reading, but I didn’t want people to have to pay to read my content.

Although, one thing Medium does have going for it at least is stats. You can get some pretty decent basic stats for each article for free, including views, without having to set up something like Google Analytics.

During this time however, I started using another tool for someone else’s blog. My friend and .NET Community wizard James Montemagno has been writing a blog for years. But one thing I noticed in his posts was a lot of typos and general grammatical errors, something we all do as humans with a lot going on. James, being a super-nice person, is very open to feedback and positively encourages it. So, I started letting him know. 

It started out as me sending him corrections on Twitter, then realizing it was more helpful if I sent the edits as “change this to this” in Markdown format, because that is what his blogging platform used.

In the end, he just invited me to his blog as an editor so I could do the changes myself. This blog was made with Ghost.

Ghost: Browser-based Markdown!

By using Ghost to edit for James, I was able to see the benefits of it.

You can install themes to customize the look and feel of your blog, everything is written in Markdown which allows for more formatting options, including code blocks for any tech posts, and it was still browser-based, so I had the option to post from anywhere.

So I decided to take the plunge and move to Ghost. This is when my blogging started to move up a level for a few reasons.

First, I purchased a custom domain for my blog at last. Welcome to the birth of lucecarter.co.uk! I already owned a different domain that I used solely for email hosted on what is now known as Google Workplace, but it wasn’t a domain I wanted to use for my website, so I purchased the perfect domain for my online life, using the name I actually like being called by!

Ghost has a great theme marketplace which has a lot of options to suit your style and budget from official to free to paid. Plus, many of the themes, once either downloaded or purchased, allow for customization if you aren’t afraid of changing a bit of code.

I ended up purchasing one called Horace. I liked the minimal look, side panel that could be hooked up to show my latest posts and tweets, and the general experience overall. It cost me about $20 which I was happy to pay for something that worked straight out of the box. 

If I remember correctly, the theme was written in Ruby. I was able to customize it, but I was struggling, often breaking it accidentally or not achieving what I expected when I changed something. But thankfully, a friend of mine from the local tech community who works as a web developer was able to take the colors I wanted to apply and changes I wanted to make and fix it for me. So, thanks, Simon!

I loved Ghost. Once it was set up how I wanted it, I was quite the blogger. It was during this time that I started reviewing Jim Bennett’s book Xamarin in Action, all about writing native Android and iOS apps with Xamarin. I vividly remember being so excited and into this book that I found myself actually writing on my iPad on the tram on my commute between home and MediaCity, UK, home of the BBC, where I worked at the time. 

If you're interested in reading the series, I started off with an intro post. There are quite a few blog posts in the series, but it is something I very much enjoyed!

The browser-based editing experience of Ghost gave me flexibility about where I wrote from. As long as I had access to an internet-connected device that I wanted to write from, nothing was stopping me. This led me to write posts on the tram, on the train, my computers, phones, iPads, and even sitting in the speaker room at conferences. Not being restricted by location definitely helped, as we will discuss later. 

I kept going this way for a year. Then after a year, I had to renew my hosting. Ghost can host the blog for you, which I was doing (it was either free or very cheap in the first year) but the pricing for year two felt a bit expensive to me. 

I thought maybe there was another way where I could stick to Ghost but host in the cloud with Microsoft’s Azure. I found this great article from Jessica Deen, senior cloud advocate at Microsoft, specializing in DevOps alongside other legends such as Donovan Brown and Abel Wang. Sadly, however, between my rather lacking knowledge of containers, and changes that I think had happened since Jessica wrote the article, I found myself unable to get it to work. So I needed a new idea.

I found another solution thanks to the wonderful tech blogging community and a post from Andrew Zey, ironically on Medium. It listed a few options. In the end, the one I set up and successfully ran using someone else’s repo from GitHub. I can’t remember the exact one I used now as I cleared out my forked repos last year, but it allowed me to follow some simple instructions, hit a button and boom, Ghost was there, hosted in Azure.

This didn’t bring in my posts or theme but both of these are files you can upload afterward. Ghost is great at allowing you to export your posts as a JSON file. This meant I could export from my current version and import in the Azure version, as well as the zip file for the theme and there we go, working Ghost.

Overall, this solution was great but it wasn’t perfect. I couldn’t make changes or they wouldn’t be available should I need to redeploy as it didn’t sync with GitHub. This was rare but still a limitation. This was definitely a case of, “I love Ghost so let’s make the most of a bad situation.”

Eleventy: Static site generation the Markdown way!

So this leads me onto Eleventy. Eleventy is a static site generator that allows you to write Markdown and some basic code and it will generate pages for you (or in my case, blog posts) for each Markdown file. 

But wait, didn’t I say at the beginning I didn’t like static site generators because of CSS? Well, we will come to that shortly.

One of the very few benefits of Covid-induced lockdowns, was the ability to get involved in things farther away as everything went virtual. One of those things for me was being on the NDC Melbourne Agenda Committee in 2020. This was not only a real honor as I could help out with a conference close to my heart, but also meant I got a free ticket. 

Yes, this meant some nocturnal and weird hours for me to attend, but totally worth it. I attended a two-day workshop run by my friend, frontend pro and fellow Twilio champion Amy Kapernick. You guessed it, this workshop was on CSS layouts. That old foe. I was determined to understand this beast!

For this workshop, Amy gave us some starter boilerplate code which was written using Eleventy. So, yes, CSS is horrible, but I had starting code and an excellent teacher so it didn’t seem so bad by the end! In fact, if you too want to see the code, Amy has kindly kept the repo up on GitHub.

By this point in my blogging journey, I had already become a sporadic Twitch streamer so with my new found belief in myself and Eleventy, knowing I had Twitch chat and friends like Salma Alam-Naylor, a.k.a. WhiteP4nth3r, to backseat (with my strong encouragement) and a desire to learn something new, I decided to migrate my blog to Eleventy and stream the process. I even posted the recordings to YouTube!

It wasn’t easy, but thanks to the wonders of open source development, I was able to learn from the HTML and CSS of others in the community and apply that to my blog so it looked as similar as possible to what I already had on Ghost. Afterall, I just wanted to try something new, I had no issues with the look and feel of my existing blog.

Sadly, however, there was no easy way to bring in blog posts from Ghost, so I did have to sit and add all the content manually to pages. Maybe if I was a more experienced and confident developer, I could have written something that went through the exported JSON file and generated a page file for each post, but hindsight is a wonderful thing. But at least I could host it on Vercel for free, winning! 

That part about being linked to GitHub is crucial, because it plays a role in one of the downsides of this solution — ease of access.

See, Eleventy is wonderful. Salma, in fact, wrote an article recently all about how she started using Eleventy for her website which massively improved performance because it ships no JavaScript to the browser. Spoiler alert, her website doesn’t use something that held my site back: local posts.

So one of the things I didn’t like so much about Eleventy was less a criticism of the tool itself but more this kind of blogging solution, which is local files.

I wrote blog posts as Markdown files within the repo, and they were then automatically generated into pages for me, great! Except this meant that the only way to write posts was inside the repo.

This meant only being able to write blog posts on devices that could pull down the GitHub repo, open it in a text editor, make changes and push the changes back up to GitHub. Or, as well as this, be able to run the code locally should you want to check how the formatting on a post comes out. This rules out things like mobile phones. Tablets are kind of possible thanks to some apps but it is by no means a smooth process. One solution, of course, would be to write and edit posts by creating the files in a browser on the GitHub website but this is not at all a nice experience. 

As we touched on earlier, if there is any kind of resistance to something, we are less likely to do it. So I blogged less because I wasn’t always at a computer where writing blog posts was much easier.

As someone with combined type ADHD, specifically who’s hyperactivity is actually their internal brain, I can’t always control when I will have an idea for a post or be in the right mindset to write a blog post, so this was definitely limiting. But I managed.

Contentful and Next.JS: Splitting the work up between a browser-based content management system and a web-based backend!

During 2020 I spent a lot of time, like many of us in the developer community, watching Twitch. When I first began giving conference talks in 2018, I made a friend for life in a wonderful member of my audience, Layla Porter.

Layla is also a great Twitch streamer, and in 2020 she did a couple of streams with a guest, a certain previously mentioned Whitep4nth3r. This is how I first discovered Salma’s content. She won me over by insisting a fictional cake company stream required the eating of cake on stream and she lives locally to me. I loved her general stream style and wanted to become part of her community.

So over the course of 2020, I began supporting Salma’s streams by watching, joining the Discord, and encouraging the community.

I was able to celebrate in early 2021, when Salma got her first role in Developer Relations, working at Contentful. This meant I was around when one of the stream projects of 2021 was to create a starter blog template repo people could use, that involved using Contentful as the content management system (CMS) and Next.JS as the frontend framework with free hosting on Vercel or Netlify. 

You can also follow the same tutorial here: How to build a lightweight microblogging site with Contentful, vanilla HTML, CSS and JavaScript

I loved it. I had a working blog to start from, with all the styling taken care of, it fetched pages from Contentful where you entered your posts in the browser, and scored well in tools such as Lighthouse for a11y (accessibility).

I wouldn’t have even considered Contentful without Salma, because I partly looked into it to support a friend. Plus, she needed guinea pigs for the repo right? Always good to see what works. I am a web developer “n00b” in many ways, so having me try and use the repo for my blog was an excellent test of the code and the documentation.

The thing I love about using Contentful for my posts is being able to access it from anywhere, having fields for different bits of metadata, not just the title and body of the post including tags.

It did involve having to mess around with CSS in order to make the page my own, but thanks to the well-written code, seeing it be written (so, having some foundational knowledge), and knowing Salma was available for questions, made it seem less daunting.

I also had the same issue I faced with Eleventy, which is not having an easy way to import content, so I had to sit and add it all manually again. This wasn’t too bad for me because I have written fewer than 100 posts, but if you have a lot of posts, you might want to find a better way of doing this.

The thing I loved, though, was how the blog from the template could easily be adapted to suit features I wanted to add to make the site unique to me. For example, I love dad jokes, and someone in stream chat informed me that a website called icanhazdadjoke has an API that you can call to request a joke. With a little bit of JavaScript, I was able to add a dad joke to the hero banner of my page that displays a new dad joke from the API, every time the page is loaded. 

Another feature I added that is important to me is what I am currently listening to on Spotify (if I am). Music is such an important part of my life, and a blog is supposed to be a place to learn about me and read about things I want to share or teach. So when I found a blog post from Lee Robinson about how to add Spotify to a Next.JS app, I knew straightaway I had to add it.

Migrating over to Contentful and Next.JS wasn’t without its challenges but I succeeded. My blog to this day still uses this setup. See the two images below showing a screenshot from the starter template...

.... and this is my site. Look familiar?

Although, as we have learned, I tend to change my blog because I learn about something new that might solve a problem I have with my workflow, but I have no plans to change the infrastructure and frameworks now. As the saying goes, “If it isn’t broken, don’t fix it!” 

That was true up to this point too, but now I genuinely have the ability to create and edit posts in the browser, a page that looks good, has some features that show my personality, and code that a friend wrote so if I need help, I know Salma is going to know the code base!

For the foreseeable future, I only plan to make visual changes such as updating colors should that be required. Everything else can stay the same, I think it’s time I stayed away from annual changes to the blog and instead focused on writing posts.

Summary

So there we have it, how I went from Medium to Contentful via some other places along the way.

• Medium

  • Great starter blog that takes away the hassle of coding, layouts and hosting.

  • Doesn’t allow for customization easily or free, however.

  • Imposes a daily article limit on unpaying readers which could mean people can’t read your content.

• Ghost

  • Great solution for browser-based editing.

  • Fantastic customization options via free and paid themes.

  • Hosting isn’t cheap.

• Eleventy

  • Really easy-to-use, lightweight static site generator.

  • Doesn’t ship JavaScript to the browser so it is good for performance.

  • Unless hooked up to a CMS like Contentful, posts are written as local files to the project which limits where posts can be created from.

  • Can be hosted for free.

• Contentful and Next.JS

  • Salma released a great starter blog template which lowers the barrier to entry.

  • If you know Next.JS or React already, it will feel natural to you.

  • Can be hosted for free on Netlify or Vercel.

  • Browser-based CMS so can create and edit from anywhere.

That is how I got to where I am today and why I made the choices I did. I hope this post is helpful to you in deciding your blogging journey and destination. Follow me on Twitter @LuceCarter1 and let me know what blogging platform you went with and why!