Tuesday, May 11, 2021

Moving jgc.org to Cloudflare Pages

At work there's a cool product for deploying websites that has great integration with GitHub, it's called Cloudflare Pages. I use and pay for a lot of Cloudflare products but hadn't got around to using Pages. The nudge came when an old friend from university who has been managing jgc.org for 24 years(!) told me she'd like to decommission the server.

The actual content on jgc.org was originally generated by a Perl script that output static HTML. From time to time I'd modify the Perl, run it, and deploy the HTML using FTP. Really old school. Over time I moved to just running everything on the server without the FTP mess.

And, in reality, most of the content on jgc.org is on this blog, and that uses Blogger. So I decided to try Cloudflare Pages for the home page and go for the simplest possible page. It's all text and a single page and it looks like this:


It's a single HTML file containing a small amount of CSS for the colours and a small amount of JavaScript to make the function keys work. The amber colour is based on an actual amber terminal I used to use. It used the P3 phosphor which emits light at 602nm (which is close to #ffb700 in RGB using this converter).
The entire page is 3,451 bytes long and there are no images.

From never used Cloudflare Pages to a deployed HTML page in 8 minutes

Since I'd never used Cloudflare Pages before the first step was to create a project after signing into the Cloudflare dashboard:
The first step in that process was to connect my project to a GitHub account.

Since I have my account and the Cloudflare corporate account I was presented with a choice. 


And then had to authorize access on GitHub:


Followed by choosing a repository to use. Since I hadn't actually set one up it was off to GitHub to create one. I chose to use a private repository to see if that worked. It did.


A nice touch was that the Cloudflare Pages screen asking me to choose a repository automatically noticed that I'd created a new one.

I went with the default settings (which use the main branch).

I hopped over to the command-line, cloned the new repository I'd made, created a simple index.html page, committed it and pushed to main. 

Cloudflare Pages immediately started the process of deploying the page.


The entire process going from visiting Cloudflare Pages to set it up to having a deployed working page took a total of eight minutes! And of these I spent about three minutes creating the temporary HTML.

From there I was able to iterate on the page and just push to GitHub and let Cloudflare take care of the rest. 

Connecting it to jgc.org

But that still left the page on https://jgc-org.pages.dev/ and I want it deployed on jgc.org and www.jgc.org. Since I already use Cloudflare for jgc.org this was a matter of clicking on Custom Domains and choosing jgc.org. Cloudflare updated my DNS records automatically to point to Cloudflare Pages (after asking for confirmation):

I did the same for www.jgc.org and within seconds the new site was live.


All in all a very smooth experience and now I can simply use GitHub to manage the site (and spend my actual time adding more than just a single HTML page).

Conclusion

I've barely scratched the surface of Cloudflare Pages. My site is a single piece of HTML and doesn't use any cool parts of Jamstack. But with these smooth infrastructure I'm now free to work on the content without worrying about builds and deployment. I can even work locally and iterate on my machine, use Cloudflare Access to allow any collaborators to securely work with me, and I get privacy-preserving analytics. More about all that here.

If you're interested in reading more "Cloudflare's CTO tries out the company's own products" you might enjoy my journey deploying our "SSH terminal inside a browser" to connect to a Raspberry Pi 400.




















1 comment:

Dennis Jackson said...

Please check out your copyright date: COPYRIGHT (C) 1997-19121 JGC

Making an old USB printer support Apple AirPrint using a Raspberry Pi

There are longer tutorials on how to connect a USB printer to a Raspberry Pi and make it accessible via AirPrint but here's the minimal ...