Posted on

Astro on Cloudflare Pages with Functions

Migrating our family homepage with a booking system away from a Wordpress site to something homegrown. The main aims are

  • booking system with custom rules
    • there wasn’t a reasonably priced booking platform with custom rules.
  • track everything in git
    • given that there isn’t that much action, it acts as a decentralized backup system in its own right.
    • no more Wordpress and MySQL and its updates and backup problems.
  • Astro as a framework
    • that’s more of a design decision.

See the working demo over at Cloudflare: https://astro-booking.pages.dev/. The source is at GitHub.

Astro

It’s a static site generator (SSR) hosted at https://astro.build/.

SSRs have the benefit that all content is stored in your git repository and can be moved with ease and hosted on anything, even your vape if need be.

Unfortunately it doesn’t (natively) support dynamic content like message boards or e.g., a booking system.

Cloudflare Pages

Free hosting for your static site. Use Basic Auth protected by Functions as described here: https://github.com/garrison/cloudflare-pages-shared-password.

Functions to serverlessly process the bookings.

Installation

Cloudflare Pages supports deploying static site generators straight from github using npm.

Add a new page in Compute (Workers)/Workers & Pages and import an existing git repository. Follow Cloudflares own documentation for more information.

Enable the build cache for your page.

Enable the necessary actions addreservation.yml in your github repository.

Update the location of your github repository in functions/postbooking/index.ts.

Create a personal access token according to https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens here: https://github.com/settings/personal-access-tokens. Save it as GITHUB_TOKEN in your Cloudflare settings to be able to run the workflow.

Save it as a actions secret PUSH_TOKEN in github to be able to push to your github repository.

Wordpress

Keep a local copy though: https://medium.com/@richardevcom/wordpress-development-environment-with-docker-ba52427bdd65