My brand new blog

35 views 10 min read

I have been a developer for many years now, and during that time I have built quite a few projects that use some form of blog-style content.

Documentation websites, personal blogs, project updates and whatever else needed a collection of pages arranged in a vaguely sensible order.

I even created my own theme for Ghost once. (opens in a new tab) I eventually discontinued it, partly because I no longer had much interest in maintaining it, and partly because I really did not enjoy writing Handlebars templates.

This time, I wanted to try something different.

I have spent years working as a developer, and I have also done a lot of UX and product design. Building a new blog seemed like a good opportunity to test both skill sets at once.

The idea was simple: build my own small publishing platform with the features I actually use from Ghost, designed specifically for Edition 35.

How difficult could that be?

Starting with the design

I was never especially happy with the appearance of the old blog.

It worked, and I had made it my own to some degree, but it still felt like a Ghost theme underneath. There were also plenty of small details I wanted to change that were either difficult to customize or required working around the platform.

So I opened Figma and started designing a replacement.

The first draft was very simple. It used a light theme, a fairly traditional layout and not much else.

I browsed through Dribbble and bookmarked a few designs I liked. I then stitched together the parts that made sense for Edition 35 and used that as a starting point.

Some inspiration came from photography websites. Some came from magazines and personal blogs. None of the references quite matched what I wanted on their own, but together they gave me something useful to work with.

Later, I added a dark mode.

Once the dark theme was in place, I had a much clearer idea of what the blog could become. The cars and photos looked much better against the darker background, and it felt closer to the Edition 35 identity.

It still needed a lot of work, but at least it was heading somewhere.

Asking ChatGPT for help

I also tried using ChatGPT to generate a few blog designs.

They all sucked.

They were not necessarily broken or unusable. They just looked like generic websites generated from the phrase “modern automotive blog.”

Lots of gradients, oversized headings, floating glass panels and other things that looked impressive for about five seconds.

None of them felt like Edition 35.

These days, I mostly use ChatGPT to generate some of the post thumbnails and help clean up the language in my posts. It is useful for that. I still design the actual website myself, because apparently I remain better at knowing what I like than a language model.

Reassuring.

Adding some actual posts

Once I added real posts to the Figma design, things started looking more promising.

The layout worked, and I liked the general direction. It was much easier to judge the design once it contained real cars, real titles and photos from the existing blog.

It still felt a little messy, though.

There was a top bar, a sidebar, post cards, categories and several different navigation elements competing for attention. Nothing was particularly wrong with it, but there was too much happening around the content.

Eventually, I removed the top bar and kept only the sidebar.

That immediately felt cleaner. The photos had more room, and the interface stopped getting in the way.

Unfortunately, it now looked more like a photo gallery than a blog.

A nice photo gallery, admittedly, but still not quite what I was trying to build.

Borrowing from YouTube

To improve the layout, I started looking at platforms I use every day.

YouTube was an obvious reference. I spend far too much time there, and I have always liked how its interface handles a large amount of content without making everything feel complicated.

The structure is easy to understand. Navigation sits in predictable places, categories are always nearby, and the content remains the main focus.

It did not take long before I had adapted some of those ideas to the blog.

That version looked much better. It felt familiar without looking "exactly" like YouTube, and the posts were easier to browse.

It was still quite empty, though. With only a sidebar and a row of tags at the top, there was not much giving the site its own identity.

It looked like a functional content platform.

It did not really look like Edition 35.

So I removed the sidebar and moved the important navigation back into a bar at the top.

Now I was getting somewhere.

The layout was cleaner, the posts had enough room, and the navigation no longer dominated the page. Search, categories and subscribing were still easy to find, but the photos remained the first thing you noticed.

Something was still missing.

At this point, the design was mostly a navbar with some buttons, a logo and a grid of posts. It worked, but it did not have much personality.

So I added a proper header.

That made a huge difference.

The site finally looked like a blog again, and the Edition 35 identity had somewhere to live. The header gave the front page a clear beginning instead of immediately dropping you into a wall of post cards.

I also experimented with several different designs for the cards themselves.

I did not keep any of them, but I still think some of them looked pretty cool.

They just belonged to a different website.

A new logo for Edition 35

The biggest visual change came a little later.

The old blog used a simple text logo: [Edition 35]

It was clean, easy to read and worked well enough. I cannot remember exactly which font I used, although I am a big fan of Atkinson Hyperlegible, so there is a decent chance it was based on that.

For the new blog, I wanted something with more character.

I switched to a different typeface, applied a skew and began sketching a new wordmark. The result already looked much more appropriate for a car-focused blog. I don't have a screenshot of the first draft, but here is the final for reference:

Then my girlfriend came in clutch.

She suggested changing the shape of the “35” so it looked more like the Edition 35 badge fitted to the car itself.

That was exactly what the logo needed.

We adjusted the corners of the lettering and added some of the rounded shapes used by the numbers on the badge. I also changed the background around the numbers so its curves followed the lettering more naturally.

It fits the design ridiculously well.

The wordmark feels modern, but the connection to the original badge gives it a reason to look the way it does. It is no longer just some italic text chosen because cars are supposed to look fast.

I also created a short version of the logo for square spaces such as icons and profile images, along with separate light and dark variants.

The final change was filling the “35” with the accent color used throughout the blog.

The traditional GTI accent would obviously be red. My car is blue, though, and I have always really liked the color.

So the new accent became a rich royal blue.

That blue now appears throughout the site. It is used for buttons, outlines, loading indicators and smaller interactive details.

The logo finally gave the whole design a proper identity. Once it was in place, the rest of the interface became much easier to finish.

I also played around with a premium subscription design.

Why I left Ghost

The redesign was only part of the reason for building a new platform.

I had also become tired of maintaining my Ghost installation.

My instance updated automatically, and more than once an update changed something that caused problems with my setup. The final push came when a newer Ghost version no longer supported the database version I was using.

The blog stopped working, and I had to migrate the entire database before I could bring it back.

That meant creating a new MySQL 8.0 database, exporting the existing data, running several commands to alter it for the newer version, importing everything again and updating the Ghost configuration.

It was a lot of work to get back to exactly where I had been before the update.

I could disable automatic updates, but then I would eventually be running an outdated version with missing fixes and features. Neither option felt particularly good.

Breaking changes are understandable while software is in alpha or beta. They are considerably more annoying when they arrive on the server hosting years of posts and photos.

Since I was already designing a completely new blog, this seemed like a good time to remove that dependency as well.

Building the new platform

The new blog is completely custom-made.

The public website, editor, post database, comments, accounts, analytics and media handling are all part of the same system. It contains the features I liked from Ghost, but everything is tailored to how I use the blog.

I can write posts in Markdown, upload images, create galleries and publish everything from the administration page. I can also update an existing post directly without going through an unnecessary preview-and-publish process every time I fix a spelling mistake.

Because I control the entire platform, I can add features whenever I need them.

For example, every post now has links to the previous and next posts at the bottom. If you finish reading something, you can continue through the blog without returning to the front page first.

I also built a custom lightbox from scratch.

Clicking an image opens the full version, and you can move through every image and video in the post from there. The neighbouring images are preloaded, transitions are animated, and videos remain paused until you actually choose to play them.

This is especially useful for posts with large galleries. You no longer need to scroll through the entire article just to look at the next photo.

Embeds have also been redesigned. Links to other Edition 35 posts look like proper post cards, while external links collect the title, description, preview image and favicon from the original website.

The front page has search, a smaller collection of useful categories and real view counts. Images are loaded only when needed, which should make the larger posts considerably quicker to open.

There are many small details like that throughout the site.

Most readers will probably never think about them, which generally means they are working.

Welcome to the new blog

This project started because I did not like the appearance of the old blog.

It grew slightly from there.

I now have my own publishing platform, a completely new design and a new visual identity for Edition 35. More importantly, I have a blog that I can change without waiting for another platform to support the feature I want.


Feel free to create an account and leave a comment. I am curious where everyone reading these posts is from, so say hello and include your country 👋

Then I can finally learn whether all those view counts are coming from actual people or one extremely dedicated Volkswagen owner in Finland.

Comments

Be the first to leave a comment!

Loading comments...

Checking session...