JAMStack: Struggling with Gatsby+Github+Netlify, feeling n00bish

Developer help
1

Hey there,

UPDATE, figured all this out, see bottom post, also I logged it all here for future reference.

Things I had to learn better

  • Where Gatsby runs (reading code on Github for a bunch of Gatsby sites)
  • What Netlify does (from Netlify docs)
  • How to redefine my base URL as an HTTPS one (from Ghost docs)

Original post below

I’m trying to move my blog to Netlify, just for fun (and speed). It’s currently on DO Ubuntu 18.04, using Ghost 2.18.3 (just updated, hoping to resolve)

I’m struggling to get my website to deploy to Netlify. I’m not a total noob, but I really don’t get the flow. Been reading about headless CMS and jamstack and it’s going over my head.

Referring to the various docs (e.g. GitHub - TryGhost/gatsby-source-ghost: Source plugin for pulling data into Gatsby.js from the Ghost Public API., https://docs.ghost.org/integrations/netlify/), here’s what I did.

  • Installed Gatsby via npm
  • Configured my git environment variables (name, email)
  • Cloned the repository using gatsby new hooshmand https://github.com/TryGhost/gatsby-starter-ghost.git
  • yarn for dependencies (“already up to date”)
  • gatsby develop. Can’t access my server on 8000 because that’d require nginx reconfig… do I need to do this? It only is developing while I let it run…

I now click “deploy to netlify”, and I get taken to a github (which is authorized… tried this a few times).
I get to this URL: “Netlify App” which is “page not found”.

The double slash in “start//hooshd” looks suspect, so I change it to single, and get back to the deploy page, opting for continuous deployment; authorize again; now I can choose a number of repos to deploy from. But nothing “ghost” or “hooshmand” or “casper” or “gatsby” is among the projects, just my old code repos from various projects.

I’m missing something here, before even getting to webhooks

  • Is the gatsby sever supposed to continuously run? Should I run it on a separate server to my ghost CMS? Answer as of 25/3: no it’s not. It’s a series of scripts hosted on Github.
  • How does the HTML get pushed to my github repo, so that netlify then pulls it in? Answer as of 25/3: through gatsby, on github, that Netlify rebuilds.

Sorry I’m lost in the flow. (answer as of 25/3: still slightly lost)

I thought this would be something like

  • Ghost back-end data changes
  • Triggers a script which publishes new HTML using Gatsby (or whatever script) (correct, but I didn’t know where this was)
  • HTML gets pushed to Netlify (correct)

That makes sense to me, so I’m confused about the role of Gatsby and Github.

I’ll summarize it all when I’m done! (done)

1 Like
2

OK, I figured it out. I have more banal issues now, like images not being brought in.

https://hooshmand.netlify.com/

3

Update: I used Github desktop to clone the repository.

I think my failing is not understanding how Git works. (I’m a hacker in the worst sense of the word… I write huge SPAs in an editor directly, sometimes SSHing to my production server to do it… I never learned any better and frankly, don’t know where to start!)

Then I installed yarn (with brew), and ran it. It’s finding a bunch of dependencies not met, unsurprisingly.

But couldn’t get it to upload… no changes directly, even though there’s a new folder called node_modules…

4

HI, im a hack-builder too… I just installed and deployed mine using Netlify using the ‘deploy to netlify’ button seemd to work ok site here: https://gatsbyghost.netlify.com/

I have similar problems

  1. can get a site deployed but I can’t seem to figure out where to access my admin panel.
  2. I can’t get my development environment setup

I think the docs on this page are pretty scarce, and more reading required on the other readmes somewhere else?

this was my start-point: GitHub - TryGhost/gatsby-starter-ghost: A starter template to build lightning fast websites with Ghost & Gatsby

this is my 3rd ghost site, the other two i have hosted by ghost

5

Hey there, your admin panel has to be on a ghost installation on an external server. You have to install ghost first, but then make it a “private” site, and use the Ghost content as your external display.

So you’re nearly there. What you need is:

  • A Ghost installation
  • To modify .ghost.json in Github. Just do this via the Github website, it’s the easiest way.
  • To make the Netlify integration in your Ghost installation so a) you get the API key and b) it auto-rebuilds every time you update your website.
  • A URL, like a subdomain, so you can use SSL on Netlify
  • Configure your website so the base URL is https:// (if you didn’t), so you’re not serving mixed content through Netlify

My published site is beta.hooshmand.net. The gatsby theme needs work, like galleries are not supported (e.g. https://beta.hooshmand.net/galleries-test/), but it’s serving.

It feels faster, but time to load actually isn’t any faster.

1 Like
6

Thanks so much. Ok so i need to main two sets of code

  1. Ghost Admin & Data Hosted on DigitalOcean droplet
  2. Gatsby Site Hosted on Netlify

What is the process to update the Ghost Admin when they roll out new features? Do they break the CMS?

7

To update the admin you these days can do it directly from the admin panel.

I can’t guarantee things won’t break obviously, but I believe the intention is for them not to: the point of headless CMS is to make a standard API through which other websites can get your data in a predictable way. For gatsby, this is through graphql.

1 Like
8

Hi Dana,
I followed you guide. As a git power user, things are not clear me.

  • I use a mac (local)
  • I use a server on digital ocean (remote)

This is what I did:

  1. I cloned it into my github account.
  2. I pulled the repo into my local machine.

Deploy. On your own copy, in your Github repository, hit the “Deploy to Netlify” button in it. You’ll get redirected a couple of times, being asked to confirm that you want to connect Netlify and Github, which of course you do.

What should we see here??

From my git repo I clicked Deploy from GitHub - pascalandy/ghost-headless: Ghost & Gatsby

Things are authorized but nothing is showing up here:

02%20PM
02%20PM1706×630 51.1 KB

I’m confused.

Then I feel the best thing to do is to click “New site from git”.

I select my git repo. Things are building.

Then error here.

35%20PM
35%20PM1213×977 217 KB

Thanks!

9

Overall, I don’t understand why we need Github in the equation.

Netlify connect to the Ghost API and renders the site, then it hosts static files.

Why is there an interaction with Github (and .ghost.json).

Thanks again!

10

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.