GatsbyJs Hot Rebuild - CMS with Gatsby

[intermundos]

Thank you for your efforts Kyle. Gatsby looks very interesting and promising.

I have a question, the answer for which I didn't find or perhaps missed. Is it possible, after build to update pages contents? Say I create admin page and manage all the site's content, forcing other pages that were updated to rebuild? A GatsbyJs CMS of kind...

I thought of it as a wonderful opportunity to be made with Gatsby.

Would love to offer any help.

Thanks in advance.

[KyleAMathews]

Gatsby is a static site generator so it's not built with an admin interface that talks to some sort of live backend with an attached database.

So for editing content, either you can edit the static files directly (e.g. Markdown) or you can integrate Gatsby with a hosted CMS like https://www.contentful.com/ or https://www.datocms.com/. You can set things up so that when you save a change to your content it rebuilds and deploys your site. DatoCMS just wrote a blog post showing this https://www.datocms.com/blog/one-click-websites/

There are other interesting things you could perhaps do with enough effort e.g. create a hosted service which pulls in your markdown files and lets you edit them in a browser editor and then on saving, creates a new Git commit with your changes and rebuilds/deploys the site.

[intermundos]

Great, thank you for giving me a direction.

[m4rrc0]

Hey, I am looking into this kind of functionality as well (for 1.0 version). @intermundos , it is pretty easy to call any JSON endpoint on build so anytime you build you get the latest data either from an external service or from local files. I currently have some small scripts querying a google sheet, facebook page ratings, youtube thumbnails, ... I just fetch my data and create a JSON file in my local 'data' folder before the actual build. If you use a service like Netlify to build and post your website online, you can trigger a build with webhooks. Next, I'd like to check Netlify CMS which lets you edit and create md files from your Github repo. It pushes the changes which can trigger a build through a webhook.

Another approach I guess would be to fetch data from the browser only. If you have data with very frequent update it guess it would make sense to load that section in the browser only, after the first render, when the SPA is loaded.

If you developed another approach to this, I am interested.

[Rusta]

I'm having a play with integrating Netlify CMS with a Gatsby powered site at the moment, however, I am running into an issue as the CMS content editor is accessed through a generic path: https://your-site/admin - whereas in my Gatsby site the router picks that up and displays the 404 page (rather than the Netlify CMS editor page)

[Rusta]

Actually - that was me just being a numpty (I hadn't set up the 'admin' folder manually). Seems to work just fine

[Rusta]

Spoke too soon - the router is getting in the way of serving the config.yaml file. I'll keep playing and raise an issue if there's no obvious work around (and stop just chatting to myself here)

[Rusta]

resolved - turns I'd named the config file .yaml rather than .yml

[intermundos]

@Rusta Can you show your setup please? Thanks

[AustinGreen]

@Rusta I'm trying to set up netlify cms + gatsby as well. Would love to see how you did it.

[inventanew]

I am trying the same thing, I am wondering how to start local development

[m4rrc0]

It's been a while since I played with that but if things have not changed too much: @AustinGreen assets you put in a the 'static' folder get copied as is in the public folder on build. So if you put your html and yml file in there you should be good to go. @inventanew is it a trick question? gatsby develop should do it. But the trick is netlify CMS lets you edit files that are on github, not on your disk. Use local dev to build your website but edit your content when it is online.

[AustinGreen]

@MarcCoet thanks. I put together a pretty good netlify cms and gatsby boilerplate in the few days, I will open source this week

[dardub]

@AustinGreen There's also another effort here possibly. https://github.com/gatsbyjs/gatsby/issues/623#issuecomment-320069024

[AustinGreen]

@dustinmatlock you can follow my progress here: https://github.com/AustinGreen/gatsby-netlify-cms-boilerplate

[dustinmatlock]

Oh nice, thanks!

[AustinGreen]

With the latest updates to netlify cms, it's now a lot easier to build a gatsby site w/ netlify cms. Here's my example project: https://github.com/AustinGreen/gatsby-netlify-cms-boilerplate.

The developer experience + increased performance of using this stack compared to wordpress is really astounding.

[dardub]

I think there are still a couple pain points right now with netlify-cms.

1. It doesn't support relative paths for file uploads.
2. You can't generate a frontmatter path field from the slug.

They are in very active development currently though and these fixes are on the roadmap. Personally I feel it's not something that's ready yet for wide use.

[huntercaron]

Anyone have a good solution for images showing up in the live preview for netlify-cms? Currently working on a super hacky solution.

[huntercaron]

Here is the hacky solution that I've been using to copy images into a static directory for the CMS preview:

In gatsby-node.js:

const staticImagePath = "./static/images/";

exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {

  if (node.internal.mediaType == "image/png" || node.internal.mediaType === `image/jpeg`) {
    if (!fs.existsSync(staticImagePath)){
      fs.mkdirSync(staticImagePath);
    }

    fs.createReadStream("./src/" + node.relativePath).pipe(fs.createWriteStream(staticImagePath + node.base));
  }
}

then in the netlify CMS config.yml public_folder: "/static/images"

I'd love to know if anyone has a more elegant/optimized solution

[ThiagoMiranda]

@huntercaron I'm struggling to make netlify-cms work. Can you help me with this? https://github.com/netlify/netlify-cms/issues/1260

Thanks