Cloudflare Pages for hosting JAMstack sites

·

3 min read

I have tried multiple providers for hosting www and documentation websites for DevRaven. The www website is a set of static pages w/ simple javascript build and documentation website is a JAMstack website powered by Docusarus.

Github Pages

When I started in March, I have setup these websites on Github pages. It was straight forward process and the websites was running in few minutes. Docusaurus hosting required adding a Github Action for deployments, but it was pretty simple and has well documented steps.

I wanted to route the traffic to my websites via Cloudflare for CDN, analytics etc. However when I turn on proxy for my urls, Github Pages is unable to verify the DNS and fails to issue certificates. Github Pages do not support uploading your own Cloudflare issued certificates. That meant I had to disable Cloudflare proxy for these websites so Github Pages can serve my website and issues certificates in a timely manner.

Also, couple of days before the launch I was reviewing Github Pages ToS and found prohibited uses section. That meant I had to migrate off of Github Pages.

GCP Cloud Storage Bucket

Because I already leverage GCP for running my services, GCP Cloud storage became my obvious choice for moving the static website. This process is documented here and within less than 15 minutes, the migration is complete.

Everything was just fine, but the process for pushing changes was manual and a bit clunky. With Github pages I just had to push the changes to the repo and Github Action takes care of generating the resources. But with Storage bucket, I had manually do a build and then upload the files to the bucket. I am sure there will be Github actions for automating this as well, but since this is just a stopgap solution I did not invest time into this.

Hello, Cloudflare Pages

Though I use Cloudflare for my other services, I have not used Cloudflare Pages before. Cloudflare Page provides hosting for JAMstack websites and CI/CD is completely streamlined.

With Git integration, setting up the websites is pretty simple. I started off with migrating the documentation site. I just had to select Docusarus framework from the presets and specify my build command (npm run build). That's it and the website was up and running. By default, the website will be hosted at .pages.dev.

Screen Shot 2022-08-18 at 3.16.28 PM.png

Any changes pushed to the repo will automatically be built. You can specify your production branch and preview branches. Any changes pushed to non-production branches are available via preview urls so you can review them before merging to main.

Once I verified that the website is working as expected via pages.dev domain, I just added my custom domain and Cloudflare automatically updated the DNS records and issued new SSL certificates. And these websites are proxied via Cloudflare.

So with Cloudflare Pages:

  1. Everything is automated, I just need to push to my Git repo and changes will automatically be built and deployed.

  2. Websites are running behind the Cloudflare proxy and all the goodies that come with it.

  3. Need not have to worry about expiring SSL certificates with proxying urls via CF.

Both www.devraven.io and docs.devraven.io are now powered by Cloudflare Pages.