$ cat ~/posts/hosting-a-nuxt-static-site-on-bunny-net.txt
Opening file...

As I've explained in several previous posts, I'm trying to reduce my dependency on US Tech. I've been using Netlify for a few years now to host several sites:

While I do appreciate Netlify, there are European alternatives out there, so I wanted to give migration a shot.

Netlify and its alternatives

Before diving in, let's clarify what Netlify is and how its alternatives position themselves.

Netlify is a PaaS—a platform for running Jamstack applications.

Jamstack is an architectural approach built on JavaScript, where the application runs mostly client-side with API calls when needed. Netlify is actually the main private company behind the Jamstack community and has been pushing this approach across the industry.

In short, it's a platform that handles builds, deployments, and extensions (auth, database, CMS, etc.).

If we're looking at plug-and-play alternatives in the same space, we could list:

  • Vercel (which has faced controversy over its CEO's support for Trump and Netanyahu)
  • Cloudflare Pages
  • Firebase

But all of these platforms are US-based.

There are other, more general-purpose solutions where you can find European options: Scalingo or Clever Cloud.

But there's one solution that often gets overlooked: Bunny.net.

Bunny.net

Originally, Bunny.net isn't a direct Netlify competitor. Bunny.net is primarily a CDN and compares more closely to Cloudflare. But like Cloudflare, they've evolved to offer advanced features that enable running simple Jamstack applications on their CDN.

Fair warning: it's less polished than Netlify or Cloudflare. You'll find fewer services and you need to assemble a "storage zone" and a "pull zone" yourself to set up your site. As we'll see, there are a few other limitations. But on the flip side, you get solid DDoS protection and consumption limits (to avoid those $100,000 Netlify bills...), image optimization services, resource optimization, bot protection—basically everything I need for static blogs.

Now let's get practical and see how I migrated Bloggrify.

Case study: Migrating Bloggrify

Bloggrify is an open source project, kind of like Docus but for blogs. And if you don't know Docus, that sentence probably made no sense :)

But no matter—the key point is that it's a static blog generator, and static means deployable on a CDN.

Pull zone and storage zone

First things first: we need to create a storage zone for the files:

add a storage zone
add a storage zone

Once the zone is created, you need to connect it to a "pull zone". This pull zone is what will actually serve your website.

Now go to the storage zone settings, navigate to FTP & API access, and grab the password needed to use the API.

Setting up automated deployment with bunny-deploy

One of my key requirements for migrating was not losing deployment automation. Fortunately, there's a GitHub Actions plugin for deploying to Bunny.

Add these steps to your workflow:

$YAML

    - name: Generate static site
      run: npm run generate

    - name: Deploy to Bunny
      uses: R-J-dev/bunny-deploy@v2.1.1
      with:
        access-key: ${{ secrets.BUNNY_ACCESS_KEY }}
        directory-to-upload: ".output/public"  # Nuxt 3
        storage-endpoint: "[https://storage.bunnycdn.com](https://storage.bunnycdn.com)"
        storage-zone-name: "bloggrify"
        storage-zone-password: ${{ secrets.BUNNY_STORAGE_ZONE_PASSWORD }}
        enable-delete-action: true
        enable-purge-pull-zone: true
        pull-zone-id: "5063091"
        concurrency: 50
        replication-timeout: "15000"
        request-timeout: "5000" # optional, defaults to 5000
        retry-limit: "3" # optional, defaults to 3

Make sure to add BUNNY_ACCESS_KEY and BUNNY_STORAGE_ZONE_PASSWORD to your repository secrets beforehand.

Obviously, storage-zone-name should match the zone name you defined in Bunny—in my case, "bloggrify".

Configuring your custom domain

At this point, your site is probably live on a Bunny URL like bloggrify-mistral.b-cdn.net. However, you can add a custom hostname:

add a custom hostname
add a custom hostname

This will require you to configure your DNS by adding an ALIAS or CNAME record.

Avoiding outrageous bills

Bunny lets you cap consumption and protect against DDoS attacks. To do this, select your pull zone, go to Network limits, and create a "monthly bandwidth limit". I set mine to 1GB since Bloggrify doesn't get excessive traffic.

On top of that, you can go to Shield, choose the free plan, and enable DDoS protection. Adjust the sensitivity based on what feels right for your use case.

Nitro configuration

In the specific case of Nuxt—especially Docus—you might run into an issue. The generated site contains directories without an index.html file.

For example:

  • introduction/configuration (containing page resources)
  • introduction/configuration.html

But if you navigate to https://bloggrify.com/introduction/configuration, you'll get a 404 by default because nothing rewrites the URL to the HTML file. So you need to explicitly tell Nitro to change how it generates files:

$JAVASCRIPT
export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: true
    }
  }
})

With this setting, you'll now get:

  • introduction/configuration/index.html—and it works.

This workaround isn't needed on Netlify, which handles this gracefully, but Bunny needs a little help.

And... that's it.

Sure, the setup is a bit more involved than Netlify, but bloggrify.com is now running on Bunny and I'm gradually migrating my other sites. Mission accomplished—I might post a follow-up in a few months.

$ exit

0 Comments

No comments yet. Be the first to comment!