DigitalOcean Spaces for Storing WordPress Static Assets

When hosting your WordPress site on DigitalOcean, storing your static assets nearby makes a lot of sense. Since the advent of DigitalOcean Spaces in 2017 this has become a much less arduous process. In this post we’ll go through step-by-step how to host your media (and static css/js if you want) in a DigitalOcean Space.

Setting up a DigitalOcean Space

Before you get started you need to set up your DigitalOcean space. To do that, log in to DigitalOcean and click the “Create” dropdown. From there, choose the “Space” option.

Creating DigitalOcean Spaces screenshot
Create a DigitalOcean Space

Select your region, ignore the CDN (for now. You should do this later though), leave the file listing as restricted, and then pick a name. It can be anything, but something descriptive is usually best. In our case, we’re going to use kernl-blog-space.

Once your space is created, you need to make a few minor changes in it’s settings to allow for file uploading. Under CORS Configuration we need to add the domain where files are going to be uploaded from. In our case, we added:

  • Origin – (this is my test domain)
  • Methods – I selected all of them, because I want the plugin that will be managing the files to be able to make all the modifications that it needs.

The other two options I left blank/default.

CORs configurations list
DigitalOcean Spaces CORs Configuration

Finally, you’ll need access keys. To generate those, look in the left menu on DigitalOcean, go down to the “Account” section, and click “API”. Now scroll down and click “Generate New Key”, pick a name, then click the check mark. Copy the access and secret key somewhere. You’ll need it for later.

WordPress Configuration for DigitalOcean Spaces

The next step is to set up WordPress to send and server media from your DigitalOcean space. First up, you need to install the WP Offload Media Lite plugin from the repository.

WP Offload Media Lite plugin screenshot
WP Offload Media Lite plugin

Once installed and activated, go to Settings -> Offload Media Lite. Select DigitalOcean Spaces, choose whether to store keys in the database or not, add your keys, and then click “Next”.

Storage provider list inside of Offload Media Lite being configured for DigitalOcean Spaces
Offload Media Lite Configuration

The next step is selecting the region where your space is located and then copying the name of that space into the “bucket” field. Once you’ve done that click “Save Bucket Settings”.

Testing it Out

Now let’s test it out! Go to your media library and upload a few images. Once uploaded, click into the image detail view, and checkout out the source.

Screenshot of the test image successfully being served from DigitalOcean Spaces
Image served from DigitalOcean Spaces!

And just like that, we’re done! Images are now served from DigitalOcean spaces. A next step you should take it to configure to the CDN so your media is globally distributed, but this is a great start.

Categorized as Kernl