Getting started with Gatsby?

Huge congrats on the latest updates, folks! I remember having a look at your docs when you moved it to gatsby and was immediately in love with how fast it was. Naturally, when I saw the tweet last night, I was excited.

However, as someone who isn’t well equipped with the dev world, I was wondering if there are any beginner’s guide on how to use Gatsby with ghost?

Any pointers will be appreciated. :slight_smile:

Thank you!

The best point for you to start is using the official Gatsby + Ghost starter here: GitHub - TryGhost/gatsby-starter-ghost: A starter template to build lightning fast websites with Ghost & Gatsby

Give this a try and let us know if you get stuck or the information is unclear :hugs:

What about Ghost(Pro) users? How would it be available for them?

The Ghost Docs use Ghost(Pro) as a content source.

This forum topic might give you a bit of background as to how a Gatsby+Ghost integration works:

the tl;dr is your Ghost publication will be set in private mode, and you will use the content API to pull posts from your publication and build your static site. That static site will be hosted somewhere like Netlify

1 Like

But your explanation sounds like you would just switch to another place to host the content and then let that place serve the site?

So if you write a post then

  1. Netlify webhook takes content through Ghost API
  2. Netlify serves content somewhere?

Or what? But where does Netlify serve that content? And how? How could you make that content be served on the same domain as a site is running before switching to Netlify?

It honestly seems more like a hassle than anything, but I’m open to trying it. I’m just not exactly sure how you would proceed.

That’s right, Ghost is only being used as a content management interface, and is not responsible for the site frontend.

Netlify serves the content from its own servers - your build script will generate files, and Netlify will take those files and serve them just like you would static HTML.

Ghost has the ability to set the host for the admin panel - in the case of Ghost(Pro), you have your .ghost.io domain as well as your dedicated domain (for example, docs.ghost.org) which actually has the frontend

So, to answer your question, unless you use a more advanced server configuration, the admin panel for Ghost will be hosted on a domain different than where your content is hosted

This isn’t really something super necessary - it’s more of Ghost having a larger feature set, rather than something everyone should use. If you have a use case for deploying static sites in this method, go for it, but using Ghost as you have been for the past few years is still a completely normal and functional method for managing your site.

Yep, because you’re going to be pulling in posts from the ghost instance

Your best bet is the starter repo:

It’s really difficult to provide information without being able to see the logs. For example, how do you know Ghost isn’t communicating with Netlify? Are your builds not being triggered? Are you able to configure Gatsby to pull in posts from Ghost using the content API key?

Did you update the content API key in .ghost.json?

You also need to change the apiUrl values to point at your Ghost instance, in your case it would be your Ghost(Pro) subdomain so something like "https://xyz.ghost.io" (replacing xyz with your actual subdomain).

Thank you guys, this is useful info for the rest that want to try Gatsby integration soon!

hi @vikaspotluri123, I new to Ghost. For that contentApiKey do I need to add Custom Integration and use that key. Or there is something else? I tried to roll to Netliify and I am getting this -

and locally I am getting this

Exported queries are only executed for Page components. Instead of an exported
query, either co-locate a GraphQL fragment and compose that fragment into the
query (or other fragment) of the top-level page that renders this component, or
use a in this component. For more info on fragments and
composition, see http://graphql.org/learn/queries/#fragments and for more
information on , see Querying Data in Components using StaticQuery | Gatsby
success extract queries from components — 0.218 s⠁
(sharp:29701): GLib-GObject-WARNING **: 10:50:06.358: cannot register existing type ‘VipsObject’
(sharp:29701): GLib-CRITICAL **: 10:50:06.358: g_once_init_leave: assertion ‘result != 0’ failed
(sharp:29701): GLib-GObject-WARNING **: 10:50:06.358: invalid class cast from ‘VipsForeignLoadCsv’ to ‘’
⠠ run graphql queries — 7/8 111.96 queries/second
⠈ run graphql queries — 7/8 111.96 queries/second
⠂ run graphql queries — 7/8 111.96 queries/second
⠁ run graphql queries — 7/8 111.96 queries/second
⡀ run graphql queries — 7/8 111.96 queries/second

Yes - check out the docs:

Yes, I went over that doc. I am using a starter for this. From what I see it gets expanded from https://github.com/TryGhost/gatsby-starter-ghost/blob/master/.ghost.json which I have my own key/hostname.

per gatsby-config.js

let ghostConfig
try {
ghostConfig = require(./.ghost)
} catch (e) {
ghostConfig = {
production: {
apiUrl: process.env.GHOST_API_URL,
contentApiKey: process.env.GHOST_CONTENT_API_KEY,
},
}
} finally {
const { apiUrl, contentApiKey } = process.env.NODE_ENV === development ? ghostConfig.development : ghostConfig.production
if (!apiUrl || !contentApiKey || contentApiKey.match(//)) {
throw new Error(GHOST_API_URL and GHOST_CONTENT_API_KEY are required to build. Check the README.) // eslint-disable-line
}
}

Per README it says

To use your own install, edit the .ghost.json config file with your credentials. You can find or your contentApiKey in the “Integrations” screen in Ghost Admin.

However, I do not see in admin unless I generate key via custom add. That part is not clear and wanted to clarify if I am understanding it right.

Yep, you’re supposed to create the content API key :)

@vikaspotluri123 ehh … I made it running. It seems latest on master has this issue covered. But using gatsby cli pulling snapshot that does not have bugfix.

Hey pals!

I finally managed to get a version of Gatsby + Ghost + Netlify running on my localhost. However, I noticed that every time I add a new story, it doesn’t reflect on the site. But it works fine if I stop the server and run “gatsby develop”.

The logs in Netlify suggests that the site is live, but even after several (hard) refreshes, I don’t see the updated version on my localhost unless I run the command again.

Anything I might be doing wrong?

1 Like

Hey @svikashk

Running the setup locally (for development purposes) means that you have to stop Gatsby and start it again, whenever the content in Ghost changed. This is because Gatsby will fetch everything once and build the static files and that’s it.

Having the setup in production, you can create a webhook from Ghost to Netlify in order to trigger a rebuild whenever you published a new post:

https://docs.ghost.org/integrations/netlify/

1 Like

Gotcha, @Aileen. Thanks a bunch for helping with this. :slight_smile:

1 Like