Skip to content

Commit

Permalink
feat(blog): add "Modern publications with Gatsby & Ghost" post (#11067)
Browse files Browse the repository at this point in the history
  • Loading branch information
pieh authored Jan 14, 2019
1 parent ad6a8cf commit 2611eaf
Show file tree
Hide file tree
Showing 8 changed files with 57 additions and 1 deletion.
2 changes: 1 addition & 1 deletion .forestry/front_matter/templates/blog.yml
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,4 @@ fields:
hidden: false
default: ''
pages:
- docs/blog/gatsby-days-talks-are-here.md
- docs/blog/modern-publications-with-gatsby-ghost.md
52 changes: 52 additions & 0 deletions docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
title: Modern publications with Gatsby & Ghost
date: 2019-01-14T08:00:00+00:00
author: John O’Nolan
tags:
- Ghost
- publishing platform
image: "./images/ghost-headless-feature-image.png"
showImageInArticle: true
---

There has been a lot of progress around static site generators, front end frameworks and API-centric infrastructure in recent years. At [Ghost](https://ghost.org/), we’ve been building open source technology for modern publishing for over 5 years and as a developer-centric team, the momentum around static sites didn’t go unnoticed.

Wildly fast websites which have no back end and can be deployed just about anywhere felt very much like the future. So I’m thrilled to share that with the recent updates to the Ghost API, it’s now possible to use Ghost as a completely decoupled headless CMS and bring your own front-end written in Gatsby.js!

## API driven publishing

Ghost has always been architected into 3 distinct areas: A core Node.js API, an Ember.js Admin client, and a speedy Handlebars.js front-end theme layer. Until now those 3 areas have been fairly tightly coupled, so it hasn't been possible to use them separately.

![](./images/ghost-core-1.png)

Our latest updates allow you to completely replace the default Handlebars theme layer in favor of a front-end framework, so you can use Gatsby to build your site statically from the Ghost API.

## Why use a headless CMS?

Many developers use static site generators alongside locally stored Markdown files, using a code editor to create content and a GIT workflow to publish. While this works great and is suitable for some sites, it quickly becomes unmanageable for publishers that need to scale, or teams that are not solely developers.

This is where a headless CMS comes in, which provides an admin client for authoring and content management, while still bringing all of the benefits of having a static front-end. Developers can use their preferred stack, and writers have an editor, content scheduling, SEO and much more at their fingertips.

When you look at the bigger picture of the [content mesh](https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh/), it really starts to feel like an inevitable future for building publishing websites.

![](./images/ghost-jamstack.png)

## Official Gatsby.js Source Plugin + Starter

We rebuilt our entire [Ghost Docs site](https://docs.ghost.org/) with Gatsby, using the Ghost API to deliver content. Truth be told, we fell in love straight away and have been building new things with Gatsby ever since. To give others a head start on building their own publications using the same stack, we’ve just shipped some new tooling:

- [gatsby-source-ghost plugin](https://github.com/tryghost/gatsby-source-ghost)

A straightforward Gatsby source plugin which wraps the Ghost API and makes it compatible with Gatsby and GraphQL, so it's quick and easy to load all your Ghost data into any Gatsby project.

- [gatsby-starter-ghost](https://github.com/tryghost/gatsby-starter-ghost)

An official [Gatsby starter repository](https://github.com/tryghost/gatsby-starter-ghost) which is pre-configured to get content from Ghost and output it in a clean, blog-style design. The fastest way to get up and running with Gatsby and Ghost is to fork this repository, and check out our [Gatsby docs.](https://docs.ghost.org/api/gatsby/)

We’ve also introduced an official [Netlify integration](https://docs.ghost.org/integrations/netlify/) to make deployment a breeze, with outgoing webhooks in Ghost to trigger a site rebuild and automate the publishing process.

## Publishing on the JAMstack

I’m really excited to see what people build with these new technologies. The concept of having just one front-end and many APIs all connected together and served as a single site or application with Gatsby opens up so much opportunity in the publishing space.

If you want to give it a try with Ghost, sign up for a free trial account at [Ghost.org](https://ghost.org/pricing/) and use our official Gatsby plugin + starter to put it through it’s paces!
4 changes: 4 additions & 0 deletions docs/blog/author.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -208,3 +208,7 @@
bio: Full-stack developer, speaker and trainer with passion for anything new and intriguing. Opensource contributor. Dev evangelist @ Kentico Cloud.
avatar: avatars/ondrej-polesny.jpg
twitter: "@ondrabus"
- id: John O’Nolan
bio: Founder at @TryGhost - Publishing, open source, independent business.
avatar: avatars/john-o-nolan.jpg
twitter: "@JohnONolan"
Binary file added docs/blog/avatars/john-o-nolan.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/blog/images/gatsby-starter-ghost.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/blog/images/ghost-core-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/blog/images/ghost-jamstack.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 2611eaf

Please sign in to comment.