HUGO Photo Galleries with User photo uploads

TL;DR

I got to know about Cloudflare R2 as object storage.

NEW Fork of a NextJS + R2 WebApp

Source Code of a webapp that pushes data to CF R2 via CF Workers

Intro

We now, HUGO can also be cool.

And few weeks ago I was created some kind of HUGO Flasked version to be edited via ~ FlaskCMS.

But as Pocketbase happened in the meantime, I thought, do I really need Flask for this CMS like edits?

I just want to have images placed into some folders, and pocketbase can do that, even relate it to object storage like R2 thanks to its minio compatibility.

NEW Hugo Theme Gallery x PB

Source Code of Hugo Gallery x Custom Pocketbase CMS

Hugo Theme Gallery Forked

Source Code of Hugo Gallery x Custom Flask CMS

Also, I saw CF R2: https://github.com/harshil1712/nextjs-r2-demo

Upload images to Cloudflare R2 via the Workers API, Pre-signed URL, or Temporary Credentials

git clone https://github.com/JAlcocerT/nextjs-r2-demo

git init
git branch -m main
git config user.name
git config --global user.name "JAlcocerT"
git config --global user.name
git add .
git commit -m "Initial commit: Starting test-r2"

#sudo apt install gh

ofc I needed to test the i configured the .env.local properly: https://github.com/JAlcocerT/nextjs-r2-demo/blob/main/env.sample

npm run list-bucket

At first, I could see the one I uploaded via cf UI:

Upload images to Cloudflare R2 via the Workers API, Pre-signed URL, or Temporary Credentials

I was very impressed when this worked as per this .md

#https://github.com/JAlcocerT/nextjs-r2-demo
#npx wrangler whoami

#npm run deploy
make deploy
make list-bucket

The Hugo Gallery Stack

Some other photo galleries I made:

Cloudflare R2

We can say its a object storage (like aws s3 or GCS) and a data catalogue:

• https://dash.cloudflare.com
  • https://developers.cloudflare.com/r2/pricing/
  • https://r2-calculator.cloudflare.com/

R2 provides you with S3-compatible object storage with zero egress fees.

As of now, they provide 10GB free, but be careful as you need to provide CC details.

Just recently I got to know: https://github.com/sjackp/r2-gallery

A minimalist web UI to manage a Cloudflare R2 bucket

Cloudflare R2 offers a free tier that includes 10 GB of storage per month, 1 million Class A operations (uploads, modifies) per month, and 10 million Class B operations (reads/downloads) per month.

Plus, it has zero egress fees, so data downloaded from R2 is free of charge during this free tier usage, which is quite generous for testing or small projects.

Regarding API and integration, Cloudflare R2 provides an S3-compatible API that allows secure upload, download, and management of objects.

For a Next.js app, you can utilize this API to implement an upload button that sends files securely to R2.

Common approaches include:

• Using AWS SDK compatible libraries in the backend API routes of Next.js to upload files to R2.
• Generating presigned URLs on the server side that the frontend can use to upload files directly to R2 securely.
• Integrating with Cloudflare Workers for custom logic between your app and R2 storage.

There are open-source Next.js projects and examples available showing how to upload, download, and delete files from Cloudflare R2 with progress indication and secure handling.

In short, yes, Cloudflare R2 offers a beginner-friendly free tier plus a robust API suitable for securely uploading guest photos/videos directly from your Next.js wedding app.

1 2 3 4 5 8 16

How i Setup CLoduflare R2 Buckets

Went to: https://dash.cloudflare.com/ and hit R2 object storage

Once you have created a buck for your app, you can customize its settings (CORS, custom domains, Object Lifecycle Rules to delete after some number of days, even Apache Iceberg tables, yes the data catalogue!)

R2 vs S3

Other Contenders

Among all the options—Cloudflare R2, AWS S3, MinIO, Wasabi, Backblaze B2, and DigitalOcean Spaces—the best choice for photo and video uploads from guests depends primarily on expected usage patterns, especially storage size, frequency of uploads, and how often the media will be viewed or downloaded.

Best Overall for Guest Photo and Video Uploads

• Wasabi stands out as the best all-around choice if uploads and downloads are frequent and involve large amounts of data. Its simple flat-rate pricing with no egress fees makes it very cost-effective for heavy download workloads often encountered with photo and video sharing apps. It provides strong durability and scales well while keeping billing predictable.

Good Alternative Choices

• Cloudflare R2 is excellent if your app benefits from global CDN integration and zero data egress fees. It’s optimized for read-heavy workloads with fast delivery to guests worldwide and competitive pricing on storage and operations.
• Backblaze B2 is a strong choice for cost savings with moderate downloads, letting you benefit from very low storage prices and free egress up to a threshold. It’s suitable if you expect bursts but relatively controlled download volumes.
• DigitalOcean Spaces works well for smaller or medium-scale deployments integrated with DigitalOcean’s cloud ecosystem, but egress costs can rise with large downloads.

When to Pick AWS S3 or MinIO

• AWS S3 is best when advanced compliance, enterprise features, and integration into broader AWS services are necessary but is more expensive for egress-heavy workloads.
• MinIO is good only if full control over infrastructure and costs is preferred and you can manage the operational complexity.

Recommendation Summary:

For a wedding photo and video album app, especially if guests will upload and view/download many images/videos, Wasabi likely offers the best mix of cost and performance with minimal surprises on bills.

Cloudflare R2 is a close choice if CDN integration and ultra-low latency global delivery matter most.

Conclusions

I plan to use this new CF R2 knowledge with my next iteration of the weddings microSaaS :)

And photo galleries…are really overpowered.

And along the way, I saw this astro free theme https://recipes-starter.thebcms.com/recipes/omelette

A cool Recipe page, that might resonate with this user!