December 5, 2020

Content with the Content - My Experience with Ghost

Another day, another Docker-based project. This time, I decided to tackle a longstanding goal of finding a place to put everything I share across the internet. I have quite a few galleries, but not much in the way of a voice for my experiences with technology.

Content with the Content - My Experience with Ghost

Another day, another Docker-based project.

This time, I decided to tackle a longstanding goal of finding a place to put everything I share across the internet. I have quite a few galleries, but not much in the way of a voice for my experiences with technology. You could also translate that to ramblings.

I am using Ghost for this one. Ghost was funded on Kickstarter back in 2013. How much does the world hate WordPress? About £196,362 worth, lol. That is how much the Kickstarter raised because people were dyyyyyyyyyyyyying for something better.

The first thing I noticed about Ghost was just how solid it feels. Every time I've ever used Wordpress, I feel like I'm going to break it in just a few clicks.

The backend is snappy and straightforward. There is deceptively little going on, but this gives you a lot of freedom. The theme community is very active, and there are a lot of ready-to-go themes that are stunning. From simple reader-style pages, to full blown magazines and galleries, there is truly something for every kind of content creator.

Setup is where this became challenging. Not because Ghost is difficult to setup, but because I decided it absolutely must be a container and I am a container novice. My preferred method is docker-compose. There are a few good examples floating around, but they use custom images that have not been updated in years. I am not to the point where I can roll my own images, so I prefer to rely on something that is already out there.

I have used Bitnami images in the past, with success. My discourse forum https://den.army was Dockerized by them. It was extremely simply to modify the variables to meet your needs. The same cannot be said of the Ghost image. Most of it worked but getting it to work with Gmail was not happening. No matter what variables you specify, it insists on sending via port 25 which is an exercise in futility. I could have filed an issue and tried to get help (something I am likely to do so that someone else does not get stuck in my situation) but Ghost themselves have very well supported Ghost Docker images.

Down the route of official images I went, most docker-compose examples did not include much in the way of SMTP support, MariaDB integration, or volumes mounted in the way I prefer for backup reasons. Great! And I do not mean this sarcastically. This was an excellent learning experience for me. I naturally take the shortest routes possible, so having those cut off forced me to learn. This way I can confidently deploy other containers and know that my data is where I want it to be, structured how I want it. After LOTS of trial and error with SMTP settings, I spun up the container and was happy to receive a greeting email from Ghost!

I am using a template called Massively by HTML5 UP. It focuses on a large publication cover photo, then scrolls one-page style to the rest of your content. Content is displayed with bold, crisp headers and cleanly placed featured images. It must be said that scrolling in Ghost is extremely fluid. It just glides. Ghost has full support for markdown (which I use for my writing), so creating content pieces is a matter of copy/paste and it is in there perfectly. Even if I copy/page from a forum post, formatting snaps into the Ghost theme like you had written it there natively.

This was another awesome trip on my self-hosted journey. Headaches are part of it, just like anything else, but there is not better feeling than when all the piece fit together, and you have something beautiful to show for it.

Update: Template Modification

The one thing about Ghost that both is and is not easier than Wordpress is template modification. I have always gotten completely lost when it comes to CSS, but there were a few things about this template that I just didn’t like color-wise.

There are tons of tutorials online about how to build ghost templates. A lot of them setting up node, yarn, and gulp. Boooooooooy did I ever get lost there. There was a whole other monkey wrench called SCSS which involved compiling and, yeah. When it comes to modern web development, I’ve never done it. I’ve always gotten by with CMSes and leaving templates just as they are. I decided to stop leaving well enough alone and truly start customizing sites I call my own.

Luckily I have some talented friends. I quickly spun up Gitlab in a container and pushed the template up there so that I could get their eyes on it. They were able to recommend VSCode and I found a SASS live compiler to handle things with SCSS.

The first thing I wanted to change was on https://den.black’s home page.

Before:
image

The header has a slick animation, but fades from a dark blue that does not fit the earthy woods and leathers in the background photo. I wanted a base color that was not brown, so I landed on 1e1e1e, a very dark gray.

After:
image

The difference is rather subtle, and no is likely to notice, but it made me feel better…lol.

The next thing I wanted to deal with is the baby blue text hover. I like the idea of having a lighter color there, but not something so different from the overall scheme.

Before:

image
18bfef

After:

image
be8e5b

The lighter brown pulled from the headphone icon. That’s the next thing I need to change since it’s literally just a color shifted Google Music logo. I plan to make my own version this weekend. This is just a placeholder (for the last year of procrastinating lol).