Me

Lodybo

My Ghost, Gatsby & Tailwind setup

My Ghost, Gatsby & Tailwind setup

April 15, 2021April 15, 2021About 2 minutes

Now that my blog is live, it only seems fitting that I'm writing about the setup that I used in building this.

Before we start, if you want to take a look at the code itself, you can find it on my GitHub.

JAMStack

So, let's start with the back-end. I opted for Ghost. I've been following the project for many years, so when I decided to build a blog for myself it was an easy choice. However I didn't really want to build a Handlebars theme that I would upload to Ghost and maintain and all that.

But Ghost supports a headless architecture, which means that it can run on a VPS somewhere (I opted for DigitalOcean's one-click Ghost setup image) and run a front-end of my own somewhere else.

Enter Gatsby.

Gatsby and Ghost

I've build a few websites with Gatsby the last few years and it's always been easy to work with. Aside from building my website in React (which I love), I'm also quite happy with the fact that they build a static version of your site with all its contents.

Combine that with the fact that Gatsby Cloud makes it quite easy to trigger builds on content changes (I tried this before with Sanity and Gatsby Cloud, which also works pretty good together). And this way it can rebuild my static site whenever I press "Publish"! When the build has finished, Gatsby Cloud pushes the result to Netlify which deploys the site for me.

To quickly get working, I used the Gatsby starter offered by the people from Ghost itself. It makes you hit the ground running and allows you to focus on giving your blog your own identity.

And that's where Tailwind comes in.

Tailwind

Tailwind certainly isn't new to the game, but it took me awhile to start to use it. The biggest selling point of Tailwind for me is the fact that the cognitive disconnect between your markup and your stylesheet is not as big. Normally you'd switch between your HTML/JSX and your CSS file to write the styles that are bound to the classes in your markup. Tailwind allows you to specify those style declarations within your markup, while still making use of stylesheets, classes, specificity and more.

This all gets more exciting when you start using the responsive modifiers that Tailwind has. I haven't build a responsive site quite so fast as this.

So Tailwind, at least for my personal projects, is here to stay!