Skip to main content

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.




















Comments

Dennis Jackson said…
Please check out your copyright date: COPYRIGHT (C) 1997-19121 JGC

Popular posts from this blog

Your last name contains invalid characters

My last name is "Graham-Cumming". But here's a typical form response when I enter it: Does the web site have any idea how rude it is to claim that my last name contains invalid characters? Clearly not. What they actually meant is: our web site will not accept that hyphen in your last name. But do they say that? No, of course not. They decide to shove in my face the claim that there's something wrong with my name. There's nothing wrong with my name, just as there's nothing wrong with someone whose first name is Jean-Marie, or someone whose last name is O'Reilly. What is wrong is that way this is being handled. If the system can't cope with non-letters and spaces it needs to say that. How about the following error message: Our system is unable to process last names that contain non-letters, please replace them with spaces. Don't blame me for having a last name that your system doesn't like, whose fault is that? Saying "Your

How to write a successful blog post

First, a quick clarification of 'successful'. In this instance, I mean a blog post that receives a large number of page views. For my, little blog the most successful post ever got almost 57,000 page views. Not a lot by some other standards, but I was pretty happy about it. Looking at the top 10 blog posts (by page views) on my site, I've tried to distill some wisdom about what made them successful. Your blog posting mileage may vary. 1. Avoid using the passive voice The Microsoft Word grammar checker has probably been telling you this for years, but the passive voice excludes the people involved in your blog post. And that includes you, the author, and the reader. By using personal pronouns like I, you and we, you will include the reader in your blog post. When I first started this blog I avoid using "I" because I thought I was being narcissistic. But we all like to read about other people, people help anchor a story in reality. Without people your bl

The Elevator Button Problem

User interface design is hard. It's hard because people perceive apparently simple things very differently. For example, take a look at this interface to an elevator: From flickr Now imagine the following situation. You are on the third floor of this building and you wish to go to the tenth. The elevator is on the fifth floor and there's an indicator that tells you where it is. Which button do you press? Most people probably say: "press up" since they want to go up. Not long ago I watched someone do the opposite and questioned them about their behavior. They said: "well the elevator is on the fifth floor and I am on the third, so I want it to come down to me". Much can be learnt about the design of user interfaces by considering this, apparently, simple interface. If you think about the elevator button problem you'll find that something so simple has hidden depths. How do people learn about elevator calling? What's the right amount of