Gizmo Girls

01 December 2022

I've started a new blog! Gizmo Girls baby!

I wanted to Spend all my innovation tokens and really try out a whole bunch of cool new tech. I also wanted a set up where someone non-technical would be able to make changes. Another thing I wanted was to be able to update the blog from my phone. This meant that the workflow for this blog you're reading (writing markdown files and pushing them up to github, then letting a github action deploy to azure blob storage) wouldn't work.

I also really wanted to try out astro.js. I love that it's component driven, HTML-first, and it's super fast. Astro templates are what JSX always should have been. And the model of only opting into client-side javascript is one that is going to save on load times and complexity.

Like all my side projects, I also didn't want to invest a whole bunch of cash in something that I don't expect to make any cash FROM. Here's what these requirements looked like:

Requirements #

• Astro.js
• Able to be edited and updated by someone non-technical
• Able to be edited and updated from a mobile device (eg. one that doesn't need node.js installed)
• Cheap $$$

Airtable #

As I planned to run this all as a static site, I knew immediately that I wouldn't be updating the content from within the site - as you might do with non-headless (head-full?) WordPress. So I knew that I'd have to go to an outside service. So I went with airtable.

Airtable is sort of like google sheets, but you can much more clearly define what data should go in each cell, and also have options for allowing rich text and images.

They've got great API documentation, where code snippets will be dynamically generated based on your data - absolutely killer. And the API is allowed in the free tier. I can't recommend them enough. They also provide a JavaScript package you can use to hit their API to make things super smooth.

Github actions #

With the blog you're reading now, the only way I can change the site is to push up some code to the main branch on github. This will fire up the github action and the static files will get pushed up to their new home.

However it is also possible to manually run a github action. I did this for Gizmo girls. What the github action does is downloads all the data and images from airtable, runs the astro build process, then pushes it up to an Azure blob storage static website. This way if I need to edit the site, I can go to airtable, make my edits, then go to github and press "build". All from the comfort of my phone. Nice.

Todo #

There are a few limitions and things that could be better:

• Images - At the moment there's only one image per post on there. Airtable's rich text doesn't allow you to inline images so I might need to create anothe table to hold the images and my own custom sytax to convert them
• Caching - The blog will download ALL posts and ALL images on every build. That isn't gonna scale. Eventually I might add some logic in to only grab what has changed.
• RSS - The RSS feed on the site is just links to posts at the moment. I want to figure out how this could be converted to a feed which includes the full post.