Qubyte Codes

It occurred to me a couple of days ago that it'd be neat to build a glitch to announce new blog posts. Since I deploy this blog by pushing to a master branch on GitHub, creation of a blog post is somewhat less obvious than when publishing on a platform like wordpress or medium, so I needed to figure out another approach.

As part of the build process this blog generates a sitemap. All blog entries hang off of the /blog path, so it's not difficult to filter the sitemap down to only blog entires. By comparing a sitemap before and after deployment, it's possible to know when one or more entries have been added, and should be tweeted!

Glitch is a natural fit for this. It gives you a little persistent storage (a directory called .data), which can be used to stash the sitemap after each time it gets triggered.

In depth...

Step 1: Commits are pushed

As was the case before this enhancement, I push to deploy. This process starts with me creating or editing a post, committing it, and then pushing it to the master branch on GitHub.

GitHub then dispatches a notification to Netlify.

Step 2: Netlify receives a notification

Netlify is configured to build and deploy the blog each time it gets a notification from GitHub that the master branch has changed. It builds and deploys the blog.

The new part is that a notification is configured to send a POST to glitch when a deploy succeeds.

Step 3: A glitch app receives a notification

I built this glitch app to receive and verify POSTs from Netlify. Netlify uses a JSON web token, and validation is done by shared secret. When the request is validated, its context (a field on the JSON body of the request) is checked. This is so that only the production deploy is acted upon, and not branch deploys.

For valid POSTs with a production context, the app makes a request for the sitemap of this blog, and loads the previous sitemap from its .data directory. Both are filtered down to only blog posts, and compared for new entries. The new sitemap is saved in place of the old one.

Finally, each new blog post is formatted as a tweet, and posted to twitter!

Lessons

While it's pretty cool to automate things using webhooks (glitch in particular shines for this use-case), the thing which really stood out was how the sitemap made it all fairly straight forward. Originally I added the sitemap almost as an afterthought, since it was cheap to do with a template and is good for search engines. I'm glad I made it a newline separated list rather than an XML monstrosity because it's so easy to parse this way.