Make Your Own Little (Easy-to-Update) CDN
By, uh, using other people’s CDNs.
Step 1) Make a GitHub Repo
And put files in it that you want CDNized URLs to.
I don’t think GitHub likes it when you use them as a CDN. They provide a “raw” URL to files, but they serve the wrong
content-type headers, so we can’t just use that.
Step 2) Link to them from jsDelivr instead
Use a URL in a format like this:
So for my file:
- On a proper CDN
- Has the right
This is a real documented feature.
Step 3) Now your update strategy is just to update the file on GitHub
You can do that right on GitHub.com. Not the mobile app for some reason? I don’t think? But oh well.
ARGGGGG Oh no! Caching!
So this URL:
That ain’t gonna break cache. It’s cached out the wazoo forever. Unless you have access to some secret purging mechanism.
There is something of a solution though, and it’s to:
- Update the code
- Then publish a versioned release
- Then either link to a release or link to the latest published release:
That’s easy enough to do right on GitHub.com as well:
This works and honestly, it’s probably the adult way to handle this. If you want to hand out a URL that always has the latest code to people, use the industry-standard-ish
@latest language, and publish releases.
Hook up the GitHub repo to a published Netlify site. Then when you commit the change, Netlify will pick it up and deploy it, and Netlify will break the cache for you. So mayyyyybe slightly easier? Just adds more tooling to the idea, maybe cost if it’s massively trafficked, and a smidge of deploy slowdown (barely, since probably zero build process).
CodePen also has pretty sweet Asset Hosting as a feature as well, I might add. But I’m afraid it isn’t exactly designed to be your personal CDN. We’ve seen situations where absolutely massive traffic comes into individual files, and the Cloudflare protection bots pick it up and captcha protect that file. That’s a feature I think we’ll leave in place, knowing we haven’t designed the feature to be a public CDN anyway.