As a photographer, I spend most of my life obsessing over light and shadow. But when it came to the web, I found myself obsessing over something else: Lighthouse scores.

Most photography websites are trapped in a cycle of bloat. Heavy themes, conflicting plugins, and slow-loading galleries are the norm. I wanted the digital equivalent of a high-end lens—sharp, fast, and free of distortion. I decided to move away from drag-and-drop builders and hand-code a solution using Astro 5 and Cloudflare.

Here is why I made the switch and the technical breakdown of how I built it.

The Problem: The “WordPress Tax”

For years, I used traditional CMS platforms. While “convenient,” they came with a performance tax. Every time a client visited my site, a server had to query a database just to show a single photo. On a mobile connection in the middle of a park, that meant 5-10 second load times.

In the photography world, speed is a service. If my site is slow, I’m telling my clients that I don’t value their time.

The Solution: The “High-Performance” Stack

I chose a modern stack that prioritizes the user experience:

Astro 5: To handle the heavy lifting at build-time.
Tailwind CSS v4: For lean, lightning-fast styling.
Cloudflare Pages: To serve my site from the “Edge.”
Pagefind: For zero-JS, static search.

1. The Engine: Astro 5 & “Zero-JS”

Astro follows a “Multi-Page Application” (MPA) approach. Unlike React or Next.js, it ships zero JavaScript to the client by default. When you click around this site, you aren’t loading a heavy framework; you’re just loading pure, pre-rendered HTML. For a portfolio where the only thing that should be “heavy” is the imagery, this is a game-changer.

2. The Photographer’s Workflow: Automating the Boring Stuff

One of my favorite parts of this build is how it handles images. I’m using Astro’s built-in <Image /> component. I no longer have to manually resize every photo for the web.

I simply drop my high-res file into the assets folder. During the build process, the site automatically:

Converts JPEGs to optimized formats like WebP or Avif.
Generates responsive widths for different screen sizes.
Calculates aspect ratios to prevent “janky” layout shifts while scrolling.

3. Communication without a Database

How do you handle a contact form on a site with no server? I integrated Web3Forms. It allows the site to stay 100% static while still letting client inquiries land directly in my inbox.

It uses a standard HTML POST method—no heavy JavaScript trackers or complex backend required:

<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_KEY_HERE" />
  <input type="text" name="name" required />
  <textarea name="message" required></textarea>
  <button type="submit">Submit</button>
</form>

The Business Impact: Why This Matters

If you’re a fellow photographer or small business owner, here is why this technical shift actually affects your bottom line:

SEO Dominance: Google loves speed. Because my site is pure HTML, search engines can crawl it instantly. Combined with Schema.org data, it ensures Hazara Studios shows up exactly where it should in local search results.
Conversion on the Go: Most of my inquiries come from people browsing on their phones. A site that loads in 0.5 seconds has a drastically higher chance of keeping a potential client’s attention.
Security & Zero Maintenance: There are no database vulnerabilities to patch and no plugins to update. Once it’s built, it stays fast and secure forever.

The Human Result

Building this site myself was a labor of love. It’s a lean, efficient platform that scores a perfect 100/100 on every performance test. But more importantly, it gets out of the way. It lets the photos tell the story without the friction of a slow-loading web experience.

Curious about the code? If you’re a fellow dev-photographer wanting to escape the bloat, reach out. I’m always happy to talk about tech stacks and lighting ratios.

Building a Photography Website with Astro and Cloudflare