Ditching Slow Blog Loads – My Ghost + BunnyCDN Adventure

Tired of slow-loading pages on your Ghost blog? Probably unlikely because Ghost is super-fast out of the gate but imagine even snappier page loads, happier visitors, and better SEO. Ready to get started? Let's dive into how to integrate Bunny CDN with your Ghost website.

Prerequisites

• Self-hosted Ghost blog installation (Ghost.org)
• Basic familiarity with nginx configuration
• Linux-based server environment

Pros and Cons of Going Adapter-Free

There are some adapters out there that do support responsive images, but I am not sure exactly how that would work because Ghost themselves state that adapters disable that functionality. Therefore, I am uncertain how you could correct that without altering core files related to this functionality within Ghost.

Step 1: Create a CDN Origin

1. Choose a subdomain: Create a subdomain where your original site content will reside (e.g., nocdn.myghostsite.com).
2. In your DNS settings: Create a new subdomain and point it to the same IP address as your Ghost blog's main domain. If you're using Cloudflare, make sure to disable the proxy cache for this subdomain.
3. Configure in nginx: Set up this subdomain as a separate site in your nginx configuration (you can duplicate your existing config and change the domain).
4. Secure it: Install an SSL certificate for this subdomain (e.g., using Let's Encrypt).
5. Test: Make sure you can access your Ghost blog at the new subdomain address.

The reason we're using a separate subdomain like nocdn.myghostsite.com as the CDN origin is two-fold:

1. It allows us to keep the cached, CDN-served content separate from the dynamic, uncached content served directly from your Ghost installation. This separation of concerns makes it easier to manage and reason about the caching setup.
2. It provides a way to access the original, uncached content from your Ghost installation, which is necessary for cache invalidation and updating the CDN's cache when you publish new content.

By using nocdn.myghostsite.com as the true origin that the CDN pulls from, you ensure your CDN (cdn.myghostsite.com) is serving the latest cached version, while nocdn.myghostsite.com serves as the up-to-date source of truth that the CDN can periodically update its cache from.

Step 2: Set Up Your Bunny CDN Pull Zone

1. Create an account: Sign up for Bunny CDN at https://bunny.net.
2. Add a Pull Zone:
   • Give it a descriptive name (e.g., mysite.b-cdn.net).
   • Enter your CDN origin URL (the subdomain you just created).
   • Choose your pricing tier and preferred regions.
3. Create CNAME: In your DNS settings, create a CNAME record for a new subdomain (e.g., cdn.myghostsite.com) pointing to your Bunny CDN pull zone name.
4. Enable SSL: Wait for DNS to update, then set up an SSL certificate for your CDN subdomain in the Bunny CDN dashboard.

Step 3: Configure nginx

Edit the nginx configuration file for your main site (https://myghostsite.com):

# HTTP settings
http {
    # ... other HTTP settings ...

    # Server block for your main site (www.myghostwebsite.com)
    server {
        listen 80; 
        server_name myghostwebsite.com;

        # ... SSL/TLS settings if you have them ...

location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2368;

        # Disable gzip between nginx and Ghost for sub_filter
        proxy_set_header Accept-Encoding ""; 

        # Multiple replacements
        sub_filter_once off;

        # Disable gzip for sub_filter
        proxy_set_header Accept-Encoding "";

        # images, including srcset
        sub_filter 'https://myghostwebsite.com/content/images/' 'https://cdn.myghostwebsite.com/content/images/';
        sub_filter '/content/images/' 'https://cdn.myghostwebsite.com/content/images/';

        # poster images are linked as background....
        sub_filter 'background-image:url(/content' 'background-image:url(https://cdn.myghostwebsite.com/content';

        # javascript files
        sub_filter '/assets/js/' 'https://cdn.myghostwebsite.com/assets/js/';

        # public folder test
        sub_filter '/public/' 'https://cdn.myghostwebsite.com/public/';

        # stylesheets
        sub_filter '/assets/css/' 'https://cdn.myghostwebsite.com/assets/css/';
        
    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 1g;

What's happening here?

• Talking to Ghost: proxy_pass http://127.0.0.1:2368; is the key! This forwards requests to Ghost, which is running on the same machine (127.0.01) and listening on port 2368.
• location ~ /.well-known: A special pathway for tools to find important website information.
• client_max_body_size 1g: Sets a limit on how big a file someone can upload to your site.

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name nocdn.myghostwebsite.com;
    root /var/www/gsp_ghost/system/nginx-root; # Used for acme.sh SSL verification (https://acme.sh)
    ssl_certificate /etc/letsencrypt/live/nocdn.myghostwebsite.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/nocdn.myghostwebsite.com/privkey.pem; # managed by Certbot
    include /etc/nginx/snippets/ssl-params.conf;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2368;
    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 1g;

}

Step 4: Verify and Optimize

1. Build SSL: Run sudo certbot --nginx -d nocdn.myghostwebsite.com to generate a fresh SSL for our nocdn hostname.
2. Test Config: sudo nginx -t
3. Restart nginx: Apply your new configuration changes. sudo nginx -s reload
4. Test with DevTools: Open your blog in a browser, use Developer Tools (Network tab) to confirm images load from the CDN domain.
5. Cache invalidation: Understand that Bunny caches assets. When you update Ghost content, restart Ghost to force a cache refresh.
6. Preconnect (optional): Add <link rel="preconnect" href="https://cdn.myghostwebsite.com"> to your site's <head> for faster CDN connections.

CloudFlare w/o BunnyCDN

Using BunnyCDN as a classic CDN for images/js/css etc:

Ran 5 CDN tests

Average:

Low/High:

Median:

Updated BunnyCDN Settings

• */ghost*  (this keeps your editing area fresh)
• */members* (so each member sees their own stuff)
• */sitemap.xml (we don't want an outdated sitemap of your site)
• */robots.txt (to keep the instructions for search engines up-to-date)

Restricting Origin Access (Optional)

• Set up an Edge Rule: In Bunny CDN, add an edge rule to send a special header with a secret key for all requests to your CDN subdomain.
• Configure nginx: In your origin site's nginx config, check for this header and deny requests without it.

Troubleshooting and Support

• Bunny CDN Documentation: Refer to their guides for specific issues.
• Ghost Forums: Get help from the Ghost community.
• My X/Twitter: @graydonschwartz: Contact me directly if you're stuck.

Whew, that was a lot of technical details to go through! If you made it this far, give yourself a pat on the back. Setting up a CDN integration can seem daunting, but the performance benefits for your Ghost blog will be well worth the effort.

If you got stuck anywhere along the way, don't hesitate to reach out to the awesome Ghost community forums or even me directly on X/Twitter (@graydonschwartz). We're here to help fellow bloggers elevate their websites.

At the end of the day, a fast-loading blog just provides a better reading experience for your fans and followers. But the real magic comes from your unique voice and the meaningful content you put out into the world. So keep writing from the heart, connect with your audience, and let your authentic self shine through.

Wishing you all the best as you continue growing your Ghost blog! Adventures in coding and optimizations await, but don't forget to also schedule in plenty of breaks for creative inspiration. Happy writing!

I hope this guide makes the process smoother! Let me know if you have any questions.