Built with Gatsby+Ghost

Oh boy, how time flies 😱

I can't believe it's been almost 10 months since I wrote the first post and promised to update you all on the progress while building this site. Well... life happened and I didn't manage to make any progress sadly 😔

As busy as they were, the last couple of months have been full of learning in various aspect of my work and I'll be writing about some of them in a few upcoming posts. This one, however, will be a quick update on this site. Yes! I finally made some time this weekend to make a few changes 🤩

Gatsby.js

After debating for a while, I eventually settled on building this site with Gatsby.js. They have a tutorial that's easy to follow and get you started.

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

Gatsby, like most static site generators, allows you to source content for your website from virtually anywhere (Markdown files, APIs, Databases, CMSs like Wordpress, etc.). Gatsby uses GraphQL to query all this content into your website.

During build-time, the content is combined with your templates to generate the final HTML pages. The output files can now be deployed to your hosting provider. Again, you have a wide array of choices here.

The workflow

The original version of this site was made using the default starter boilerplate project with minor adjustments. The blog post(s) were written in markdown files and I'm hosting this on Netlify. If you follow the tutorial I linked earlier, you should be able to build your own website too. Go ahead and give it a shot 😉

My typical workflow to deploy any changes would look something like:

💻 On the computer, update a page or create a new blog post
Commit the changes and push them to the site's repo on GitHub
Netlify picks up the changes and triggers a new build
If the build is successful, the site is deployed and live for anyone to see.
Repeat. 🔁

Ghost

You might be wondering, why throw Ghost in the mix? 🤔

Static sites generators are very appealing to developers in general because they get to use their everyday tools (code editor, terminal, version control, etc.) to create and publish content to their websites. However, things get a little tricky when you have to build a site for a client who has no coding experience. It becomes a bit of a pain over time to manage their website and update their content without you getting involved. For a long time, this was a problem for me when it came to building websites for friends or clients, and I've never been a big fan of Wordpress.

I wanted the best of both world,

A site that loads fast, but also gives me, the developer, the flexibility to work with the tools I'm comfortable with.
A CMS (Content Management System) that would provide an easy to use interface.

Ghost is a platform for creating online blogs and publications. If I remember correctly it actually started off as a fork of Wordpress and turned into a project on its own. I have a few sites already currently running on Ghost. They recently released a gatsby source plugin allowing you to pull content from a Ghost instance via its content API. This article from their website goes in-depth into how it all works.

The new workflow

Let's take a look at what the flow looks like when I need to publish a new article.

Create a new post from the Ghost editor and publish it
A webhook that notifies Netlify that a new page was published.
Netlify re-builds the site with the new content and deploys it.

With this new setup, I can log onto my ghost instance from anywhere and publish new articles. But, that's not really the reason why I did all of it, I mean we all know I don't publish that often - so not really a big deal 😅

The win here is that I now have a game plan next time someone asks me to build a website for them. I've actually started re-building one of the old sites I still look after.

If you'd like to take a peek at how this integration for this was done, and you know your way around GitHub, check out this pull-request with the changes. This was heavily inspired by the work done by the team at Ghost on their gatsby starter boilerplate. I already had an existing website and didn't want to throw all that work away, so I went through the code in the repository and their official guide for working with Gatsby, to help set up things on my end. I also wanted to understand how it all works.

What's next?

I'm glad I finally got around to get this working and solidified some of my knowledge around building websites using Gatsby in the process.

Up next, I'll look into some basic analytics, code syntax highlighting... very important! If I'm going to share code with you in my posts, you bet it ought to look nice. 🙂

Talking of posts, I won't keep you waiting another 10 months this time around 🤞🏾, I have a couple of topics I've been sitting on for a while now, will publish them soon.

PS: After my first post, a few of you asked for the ability to comment. I don't think I'll be building that functionality anytime soon. Happy to hear your thoughts on this article though, so you can tweet them to me @diraulo 😉