Documentation

How to Set Up a Custom Domain for DigitalOcean Spaces with KeyCDN

This article assumes that you’ve already set up a DigitalOcean Spaces bucket (Space) and followed the steps within our DigitalOcean Spaces Quick Start Guide.

It’s possible to use a third-party CDN that pulls from the DigitalOcean Spaces bucket, set up a custom domain name for the CDN, and then WP Offload Media can use the custom domain for all offloaded media.

In this example we’re going to configure KeyCDN as the CDN provider, but you can adapt these instructions for other CDNs such as Fastly or StackPath too. However, be aware that to use Cloudflare’s CDN you’ll need to have an Enterprise account in order to use its “Host Header Rewrite” feature, or use the paid “worker” feature. For this reason, we don’t recommend using Cloudflare.

Enable File Listing

Before a third-party CDN can be used with a DigitalOcean Spaces bucket, it needs to be configured to allow listing of files, otherwise the CDN will not be able to proactively pull files from the bucket into its cache.

Go to the Settings for the Space (bucket), found under the bucket’s “More” dropdown link in the control panel’s Spaces page.

DigitalOcean - Spaces - Bucket Settings

Click the “Edit” button alongside the “File Listing” setting.

DigitalOcean Edit File Listing

Select the “Enable File Listing” radio button, and then “Save”.

DigitalOcean - Enable File Listing

With File Listing enabled for the bucket, you can now configure KeyCDN. Keep a tab open with your bucket’s settings page loaded though, you’re going to need it soon.

Add KeyCDN Zone (pull)

If you haven’t signed up for a KeyCDN account yet, sign up, and make sure to activate your account via the email that is sent to verify your account, you can’t do anything until your email address is verified.

If you already have a KeyCDN account, log in.

Either way you should now have an activated account as indicated in the KeyCDN admin panel.

KeyCDN Control Panel

Before adding a Zone to KeyCDN that will pull from the DigitalOcean Spaces bucket, flip back to the bucket’s settings and copy the “Origin” URL from the “Endpoints”.

DigitalOcean Origin Endpoint

Back in the KeyCDN admin panel, select the “Zones” section from the left-hand menu and add a Zone. Give the zone a nice short all lowercase name that makes sense for your site, ensure the Zone Status is “active” and the Zone Type is “Pull” as per its defaults. Then paste the full origin URL you copied from the DigitalOcean Spaces bucket’s settings into the “Origin URL” setting. Finally, click the “Save” button to start the deployment of the Zone.

KeyCDN Add Zone

Create CNAME Record For Custom Domain

While you wait for the new zone to deploy, copy the new Zone URL by rolling your mouse over it and clicking. We’re going to use this domain as the target of our custom domain’s CNAME record.

KeyCDN Zone Deploying

Log into your DNS provider’s admin panel and add a CNAME record for a subdomain of your site’s primary domain. The exact steps for doing this differ depending on DNS provider, but you should end up with some sort of means of adding the left most segment of your chosen subdomain’s name as a CNAME for the new KeyCDN Zone’s domain name. Something like this…

Add CNAME for KeyCDN Domain

Add Zonealias For Custom Domain

Once your DNS has a CNAME record for your chosen subdomain, switch back to the KeyCDN admin panel and select the “Zonealiases” option from the left-hand menu. Then click “Add Zonealias”.

KeyCDN Add Zonealias

Enter your chosen custom subdomain into the “Alias” field, select your new Zone from the corresponding select list, and then click the “Add” button to save the new Zonealias.

KeyCDN Save Zonealias

Enable HTTPS For Custom Domain

Although in theory you’ll now have a working CDN with a custom domain, it will not be of much use to most as it does not currently support HTTPS. To fix that we’re going to enable using a free Let’s Encrypt certificate in the Zone settings which the Zonealias will then take advantage of.

Back in the Zones section of the KeyCDN admin panel, use the “Edit” option under the “Manage” dropdown menu for the new Zone.

KeyCDN Edit Zone

The SSL configuration is hidden by default, so click the “Show Advanced Features” checkbox next to the “Zone Type” to show all the settings.

KeyCDN Zone Show Advanced

Scroll down to the “SSL” setting, choose “letsencrypt” from its options, and then scroll to the bottom and save the changes.

KeyCDN Zone Use Let’s Encrypt

Now go make a cup of tea while you wait for the Zone to re-deploy.

KeyCDN Zone Re-deploying

Once you have your cup of tea, and more importantly the Zone has finished re-deploying, go back to the Zonealiases section of the KeyCDN admin panel and click “Edit” next to your custom domain’s alias.

KeyCDN Re-edit Zonealias

Once in the “Edit Zonealias” page, just click the “Save” button so that it re-deploys and picks up the new SSL certificate setting.

KeyCDN Re-save Zonealias

Configure WP Offload Media With Custom Domain

It can take up to 5 minutes for the Zonealias to become globally active with its new certificate. After that time you can go into WP Offload Media’s settings in your WordPress Admin Dashboard, enable the “Custom Domain (CNAME)” setting, enter the custom domain, and “Save Changes”.

Offload Media Add KeyCDN Custom Domain

Check Custom Domain Works

You should now see that any media that has been offloaded to the DigitalOcean Spaces bucket is being served using the custom domain, and that the request headers show the items are being served via the KeyCDN servers.

In the following screenshot you can see how an offloaded media item shows the correct “File URL” and the image is visible, confirming all is well. For completeness I’ve accessed my browser’s devtools and checked the image’s response headers.

KeyCDN Working With DigitalOcean Spaces