Netlify + Static site + Collected Notes

I know I've been pushing it lately with Collected Notes as a CMS, but hear me out.

I was thinking all the setup we had done so far, with 11ty or with Gatsby, is great, but it has an issue; say you are selling a site to a client and set them up with Collected Notes as a CMS and every other day they ping you on Slack to tell you there is a new post they need live. That is just unsustainable, but, what if there was a way you could set that up for them?

Have you ever seen one of these on a starter template somewhere?

This is a button Netlify uses to trigger a new site deployment, but with a little help from serverless functions, we can set it up to do exactly what we want to.

All we need to do is add a serverless function to our site, for that, you need to start by adding netlify.toml if you don't have it yet.

[build]
    functions = "functions" 

This is all you need to tell netlify that your serverless functions are on the functions folder.

Now we will add the folder functions at the root level of our project with the file rebuild.js

const axios = require("axios")

exports.handler = async event => {
  const hookURL =
    event.queryStringParameters && event.queryStringParameters.hook
  if (hookURL) {
    const response = await axios.post(hookURL)
    if (response.status !== 200) {
      return { statusCode: response.status, body: "Could not rebuild" }
    }
    return { statusCode: 200, body: "rebuilding" }
  } else {
    return { statusCode: 200, body: "Nothing happened" }
  }
}

This is all the code I used to set up the serverless function, it receives a query parameter where we will put the netlify hook that triggers to rebuild & redeploy the site.

The endpoint we will be hitting to actually deploy the site would look something like this:

https://yoursite.com/.netlify/functions/rebuild?hook=yourhook

Now, to test this function on localhost you need to be using netlify's cli and run netlify dev, I won't go into that, you can read about it here.

But how do we get this hook? Once you deployed your site to Netlify, go over to site settings > build & deploy > build hooks and click on "Add build hook". That's it!

Now, you can add a private note on your Collected Notes account that has a button just like this! After your client finishes a new post, he has his own, one-click deploy set up!

Lastly, you should redirect your client to a site that shows a message.

Bonus track: you can add this badge Netlify provides that updates with the build status: (Settings > General > Status badges)

Thanks to Jason Lengstorf and the party corgi community that was kind enough to help me with this.