I want to begin hosting my photos here but felt uncomfortable storing the originals on Github where they could be forked into someone else’s project. One thing led to another and I moved my website hosting from Cloudflare Workers to Cloudflare Pages to give me better control.
The catalyst
A few weeks ago the Pixelfed component of my IMatch to Socials suddenly started failing at the server end. Uploading photos returned a “403 Forbidden” error. Others have reported the same issue and frustration.
I admit I’m becoming disillusioned with Pixelfed over flickr anyway. Many of my photos are being retouched and so re-uploaded as my digital editing skills improve. Pixelfed doesn’t silently update in place. It broadcasts the post has been changed. Yes, I can understand why you’d do that but in my use I think it is creating unnecessary noise. An option would be nice.
A thought entered my mind. “What if I host my photos on my website as well?” The point of IMatch to Socials is to automate the upload process to multiple platforms. All I need to do is have the script generate markdown files in The Quantum Garden Website Obsidian vault, copy the image files over and publish.
The problem
The Quartz documentation suggests several ways to publish a website. One of the most common is the path via Github to Cloudflare. When the Github repository is updated, Cloudlfare notices the change and regenerates the site.
99% of the time it works perfectly. I’ve had a couple of issues that left my site effectively down or not updated when some of the pieces were misaligned. Cloudflare isn’t just taking what’s on Github and serving it as a website. It is rebuilding the site from the information Github contains and sometimes the tools I use and it uses are out of sync.
With regard to photos, the content folder poses a problem. On Github are the instructions to build the site, plus the content to display. I haven’t minded having the written content available via Github (didn’t think about it to be truthful) but photos, which need to be in the content folder, felt different. Showing photos on the site meant going via Github. What to do?
There is a more insidious problem with the content folder that I only discovered recently. Quartz allows you to mark pages as drafts and not ready for publication. It works, but the draft file is visible on Github.
The solution
Remember how I said Cloudflare builds the site according to the instructions in Github? Well, I can also build the site locally according to the instructions in Github and I frequently do when I make changes beyond a simple post.
The npx quartx build command runs code that builds a local copy of my site in a folder called public. If I add --serve to the end of that command I can preview a local copy for testing purposes.
Cloudflare does the same thing. It uses Cloudflare Workers to create the site and host it on Cloudflare Pages. Here’s the magic. I can upload files directly to Cloudflare Pages. Copy local public folder to Cloudflare Pages and I’ve done the same thing without Github and the second rebuild in the middle.
Making the change
I’m only giving high level steps here. Anyone else reading this will understand enough to find the extra detail they need, otherwise they wouldn’t even be considering it.
- I temporarily disabled the link between Workers and Github to stop any interim changes I made later (i.e., removing
contents) from pulling down the site. - Created a new Pages site.
- Installed and configured the
wranglercode on Windows Subsystem for Linux. - Uploaded my local copy of
publicto the Pages site. - Redirected https://quantumgardener.info to point to the new Pages site
- Deleted the old Worker site. As I had more than 100 previous updates, I had to download a script provided by Cloudflare.
- Installed BFG Repo-Cleaner to Remove contents folder from git repository and successfully removed it.
- Spent too long resolving code change issues between my code and the upstream repository.1
- Spent some time hooking my MacBook into the same
wranglerupload system. Often I write and publish from the couch.
And that’s it. Changes such as this page are now generated locally and sent directly to Cloudflare Pages without needing to visit Github along the way.
Footnotes
-
I think I could have avoided this by running a git command to force the update to conform. Research tells me
it merge -s ours <branch-name>. ↩