mini me TrickeySolutionsLogo

Hosting simple web assets with Cloudflare pages.

I often find that I need a way of just being able to quickly upload an image or a pdf or similar in a way that allows me to make it publicly available at an address on my domain.

In the past I have tended to use Azure Blob Storage accounts with a public access policy and a custom host name - R2 (cloudflares own asset storage solution) or amazon S3 buckes also work for this purp9ose - but these can be fiddly to set up and require at least some thought about how they are going to be deployed to and what routing needs to be applied.

Instead however I really dont want to have to manage any infrastructure at all I just want to try and keep the assets in the network layer serving from a that is cache as close to the end user as possible, so this time I'm going to try doing asset hosting as a simple cloudflare pages project instead.

Pages projects can contain up to 20,000 files and can be up to 25MiB in size, so I don't anticipate this exhausing my resorce limits. I should be able to do this with a free Cloudflare account

Other benfits of being a pages project is that It will be gut hub backed for simple CI/CD change control processes, and will allow me to handle any headers (such as robots indexing indicators) and redirects, and if i do require the need to hande requests for assets in a more intellegent way in future... I'll be future proofed as I'l be able to

Prequisites #

Creating the repo #

to begin we are just going to host a single repo and get it deployed

(this can be any name you choose I'm using wwwroot as it's the legacy IIS folder I'm familiar with thinking about!)

Now you locally have the basic structure we want to have hosted on the web, you can add as many files as you want and the folder structure on your production domain will be mirrored fromt the top level folder down, so /wwwroot/pokeassets/001.png will become /pokeassets/001.png for now we only need 1 asset to let us continue the set up

Serving via Cloudflare Pages #

Now we are going to log into the cloudflare dashboard and create a pages project that pulls fron this repo. If you are managing your own domian (zone) via cloudflare it's worth remembering that pages and workers projects are managed at the account level rather than the zone level!

if you have never linked a git hub account to cloudflare before you will be promted to Add account, and follow the authentication flow

We are going to leave most of the settings as the default values, for this example make sure that you have selected none as the Framework present, leave the build commnad emprty (we dont have anything to build!)

In not very long at all you should see you the log update with a success message like so.

09:46:40.485	✨ Success! Uploaded 2 files (1.18 sec)
09:46:40.485	
09:46:40.817	✨ Upload complete!
09:46:42.934	Success: Assets published!
09:46:43.703	Success: Your site was deployed!

If you do get issues at this point, the log should help you debug, the most likely issues will be that you have incorrectrly set the out put path, or you are trying to run a build framework that is not necceessary for this super simple project

Viewing the hosted content #

In the creation of this cloudlfare pages project cloudflare will have hosted this content somewher on the pages.dev domain.

At the top of the dpeloyment details page you will be provided with a link to that site, e.g. https://8ecf6ff1.public-asset-vault.pages.dev/

At this point, following that link directly will result in you getting a fugly 404 error! don't worry, that's expected. Our static content does not have anykind of index.html file, as such there is no content for cloudflare to serve at this address. if you append the url with the path of the asset we did create then you should now see that image get served. in my example the asset was in the folder /wwwroot/pokeassets/001.png so you just need to subsititute wwwroot with the host name of your pages site - in my case the url looks like this https://8ecf6ff1.public-asset-vault.pages.dev/pokeassets/001.png

Yay! our static assets are now available on the public internet. but they are not on our custom host name yet.

Activating our custom hostname #

n.b. this section assumes that the domain you want to you your custom host name for is already managed by cloudflare... if not hen in the activation step you may have to follow instructions for your existing dns provider (or move your DNS hosting to cloudflare as well ASAP)

This is where I love the integration of cloudflare pages, with the rest of the cloudflare eco-system. as the DNS is already managed by cloudflare it can create a new DNS record and verify its routing for us.

You will see amessage informing oyu it may take up to 47 hours for DNS records to update. It may also show it as being i a verifying state for a while, however real world experiences for me say that you can actually stick the url ina browser and test imediatly. Remeber to conduct our test we need to be pointing at a valid asset path. so with my custom sudomain the test url will be https://assets.trickey.solutions/pokeassets/001.png

So, that's it - done! #

Yep, it really is that simple. now if you have an public asset that you need to just add it to this repo You now have all the source and version control benefits of using git hub, and as soon as your master branch is updated, that content will become available on your new public assets host name.

The CI/CD processes that you get for free and with 0 additional configuration are what I love so much about cloudflare pages. If you have not used pages before I urge you to go and add some content to this asset store - create a new branch on your repo, publush it, and create pull request and admire the aweomeness of unlimited preview deployments!

Conclusion #

I like that I've got a simple to manage and free to use way of quickly surfacing up random public assets for my domain. Working locally I have a simple folder structure that will be mirrored in production. I have not needed to provision any specific infrastrutucture for asset hosting, and I've not had to use any frameworks or do any CI/CD incantations to build and deploy this static site. A neat simple solution, and with the ability to harnes the functions folder I know I'm probably future proofed as I can add functionality with javacscript.

As well as adding our static assets there are other things we will want to add to our cloudflare pages project to make it more userfriedly and compliant with the standards I would expect on my domain: