👻 Hacking Ghost for Fun and Profit

Back in 2014 I created a course for Pluralsight called Hacking Ghost, which is the CMS platform you're reading this post on (or maybe got an email from). I had a good time putting that course together, but Ghost has grown up a lot since then.

I've been using it on my personal site (this one) for the last year or so and I really, really like it. Recently, however, I decided to see just how far I could push this platform to do a few things it was never meant to do.

Allow me to share, because some of y'all might benefit!

Hosting Video Courses

One of the things I have wanted for a very, very long time is a site that's all about content production while at the same time capable of hosting video courses. You can do it in WordPress, of course, and there are a few services out that there come close... but nothing like Ghost.

It's easy. That's really the selling point here. One thing that's extremely simple to do is to create your own theme. Ghost uses Handlebars under the hood (a Node/JS templating engine) and exposes a ton of helpers to you that allow you to create what you need. They also give you access to routing using a simple YAML file.

I have quite a few templates laying around, so I took one of them and made a blog theme that I like based on Bootstrap 5. I also did something that I've wanted to do for years: I wedged in a Vue application so people can watch the courses I've made.

Here's one that I just launched: The Imposter's Frontend Accelerator. Click around! I think it works pretty well so far, though there might be a few bugs here and there.

Point is: Ghost is flexible enough that I could write up a Vue app, drop it into my theme, and show some courses! But there's a little more here too...

Hooking Up Supabase

Ghost doesn't give you access to its database, unlike WordPress (thank god). That means that if you need to access some data, like whether someone has bought one of your courses, you need to do something different.

For this, I used Supabase. It's basically a "backend in a box" that runs on Postgres and for me, say no more I'm all over it. All of my business data is in there going back years and if you bought something from me, you're in there!

One service that Supabase offers is user authentication. They do this using magic links, email/password, and social. This presents a problem with Ghost because Ghost provides authentication too - so how do you synchronize the two?

Here's the fun part - and I think it works pretty well. Every user of this Ghost site has an account with a GUID as an ID. When you're logged in, Ghost gives me access to your information from my theme:

const email="{{@member.email}}";
const password="{{@member.uuid}}";

Now this might make you want to puke, especially seeing the password reference there - but just think of it as an access token. I have a routine that fires when you visit the site that tries to log you in to Supabase (if you're logged in to Ghost). If that fails, I send your credentials to an edge function (another Supabase service) which adds you on the fly.

Once added, I know what you've bought and what you can watch - all protected by Supabase's row-level security, which I'll let you read about... or I might write about it more at another time if you're interested.

Is it a hack? Sure! Does it work? Yes!👨🏻‍🎤