Tutorial

How To Store WordPress Assets on DigitalOcean Spaces

How To Store WordPress Assets on DigitalOcean Spaces

Introduction

DigitalOcean Spaces is an object storage service that can be used to store large amounts of diverse, unstructured data. WordPress sites, which often include image and video assets, can be good candidates for object storage solutions. Using object storage for these types of static resources can optimize site performance by freeing up space and resources on your servers. For more information about object storage and WordPress check out our tutorial on How To Back Up a WordPress Site to Spaces.

In this tutorial, we will use a WordPress plugin that works directly with DigitalOcean Spaces to use it as the primary asset store. The DigitalOcean Spaces Sync plugin routes the data of our WordPress media library to Spaces and provides you with various configuration options based on your needs, streamlining the process of using object storage with your WordPress instance.

Prerequisites

This tutorial assumes that you have a WordPress instance on a server as well as a DigitalOcean Space. If you do not have this set up, you can complete the following:

With these prerequisites in place, we’re ready to begin using this plugin.

Modifying WordPress Permissions

Throughout this tutorial, we will be working with the wp-content/uploads folder in our WordPress project, so it is important that this folder exists and has the correct permissions. You can create it with the mkdir command using the -p flag in order to create the folder if it doesn’t exist, and avoid throwing an error if it does:

  1. sudo mkdir -p /var/www/html/wp-content/uploads

You can now set permissions on the folder. First, set the ownership to your user (we will use sammy here, but be sure to use your non-root sudo user), and group ownership to the www-data group:

  1. sudo chown -R sammy:www-data /var/www/html/wp-content/uploads

Next, establish the permissions that will give the web server write access to this folder:

  1. sudo chmod -R g+w /var/www/html/wp-content/uploads

We will now be able to use our plugins to create a store in object storage for the assets in the wp-content/uploads folder, and to engage with our assets from the WordPress interface.

Installing DigitalOcean Spaces Sync

The first step in using DigitalOcean Spaces Sync will be to install it in our WordPress folder. We can navigate to the plugin folder within our WordPress directory:

  1. cd /var/www/html/wp-content/plugins

From here, we can install DigitalOcean Spaces Sync using the wp command:

  1. wp plugin install do-spaces-sync

To activate the plugin, we can run:

  1. wp plugin activate do-spaces-sync

From here, we can navigate to the plugins tab on the left-hand side of our WordPress administrative dashboard:

WordPress Plugin Tab

We should see DigitalOcean Spaces Sync in our list of activated plugins:

Spaces Sync Plugin Screen

To manage the settings for DigitalOcean Spaces Sync, we can navigate to our Settings tab, and select DigitalOcean Spaces Sync from the menu:

Settings Tab

DigitalOcean Spaces Sync will now give us options to configure our asset storage:

DO Spaces Sync Configuration

The Connection Settings field in the top half of the screen asks for our Spaces Access Key and Secret. It will then ask for our Container, which will be the name of our Space, and the Endpoint.

You can determine the endpoint of your Space based on its URL. For example, if the URL of your Space is https://example-name.nyc3.digitaloceanspaces.com, then example-name will be your bucket/container, and nyc3.digitaloceanspaces.com will be your endpoint.

In the plugin’s interface, the Endpoint section will be pre-filled with the default https://ams3.digitaloceanspaces.com. You should modify this endpoint if your Space lives in another region.

Next, you will be asked for File & Path Settings. In the field marked Full URL-path to files, you can input either a storage public domain, if your files will be stored only on your Space, or a full URL path, if you will store them on your Space and server.

For example, if your WordPress project is located in /var/www/html, and you want to store files on both your server and Space, then you would enter:

  • http://your_server_ip/wp-content/uploads in the Full URL-path to files field
  • /var/www/html/wp-content/uploads in the Local path field

The Storage prefix and Filemask settings are prefilled, and do not need to be modified unless you would like to specify certain types of files for your sync.

We will cover the specifics of storing files on your server and Space and on your Space alone in the following sections.

Syncing and Saving Files in Multiple Locations

DigitalOcean Spaces Sync offers the option of saving files to your server while also syncing them to your Space. This utility can be helpful if you need to keep files on your server, but would also like backups stored elsewhere. We will go through the process of syncing a file to our Space while keeping it on our server. For the purposes of this example, we will assume that we have a file called sammy10x10.png that we would like to store in our media library and on our Space.

First, navigate to the Settings tab on your WordPress administrative dashboard, and select DigitalOcean Spaces Sync from the menu of presented options.

Next, in the Connections Settings field, enter your Spaces Key and Secret, followed by your Container and Endpoint. Remember, if the URL of your Space is https://example-name.nyc3.digitaloceanspaces.com, then example-name will be your Container, and nyc3.digitaloceanspaces.com will be your Endpoint. Test your connections by clicking the Check the Connection button at the bottom of the Connection Settings field:

Check Connection Button

Now we are ready to fill out the File & Path Settings.

In the Full URL-path to files field we can enter our full URL path, since we are saving our file on our server and on our Space. We will use our server’s IP here, but if you have a domain, you can swap out the IP address for your domain name. For more about registering domains with DigitalOcean, see our tutorial on How To Set Up a Host Name with DigitalOcean. In our case, the Full URL-path to files will be http://your_server_ip/wp-content/uploads.

Next, we will fill out the Local path field with the local path to the uploads directory: /var/www/html/wp-content/uploads.

Because we are working with a single file, we do not need to modify the Storage prefix and Filemask sections. As your WordPress media library grows in size and variety, you can modify this setting to target individual file types using wildcards and extensions such as *.png in the Filemask field.

Your final File & Path Settings will look like this:

Sync Server and Cloud

Be sure to save your configuration changes by clicking the Save Changes button at the bottom of the screen.

Now we can add our file, sammy10x10.png, to our WordPress media library. We will use the wp media import command, which will import the file from our home directory to our WordPress media library. In this case, our home directory will belong to sammy, but in your case this will be your non-root sudo user. As we move the file, we will use the --path parameter to specify the location of our WordPress project:

  1. wp media import --path=/var/www/html/ /home/sammy/sammy10x10.png

Looking at our WordPress interface, we should now see our file in our Media Library. We can navigate there by following the Media Library tab on the left side of our WordPress administrative dashboard:

Media Library Tab

If we navigate to our Spaces page in the DigitalOcean control panel, we should also see the file in our Space.

Finally, we can navigate to our wp-content/uploads folder, where WordPress will have created a sub-folder with the year and month. Within this folder we should see our sammy10x10.png file.

Storing Files on Spaces

The DigitalOcean Spaces Sync plugin has an additional option that will allow us to store files only on our Space, in case we would like to optimize space and resources on our server. We will work with another file, sammy-heart10x10.png, and set our DigitalOcean Spaces Sync settings so that this file will be stored only on our Space.

First, let’s navigate back to the plugin’s main configuration page:

DO Spaces Sync Configuration

We can leave the Connection Settings information, but we will modify the File & Path Settings. First, in the Full URL-path to files, we will write the storage public domain. Again, we will use our server IP, but you can swap this out for a domain if you have one: http://uploads.your_server_ip

Next, we will navigate to Sync Settings, at the bottom of the page, and click the first box, which will allow us to “store files only in the cloud and delete after successful upload.” Your final File & Path Settings will look like this:

Sync Cloud Only

Be sure to save your changes by clicking the Save Changes button at the bottom of the screen.

Back on the command line, we will move sammy-heart10x10.png from our user’s home directory to our Media Library using wp media import:

  1. wp media import --path=/var/www/html/ /home/sammy/sammy-heart10x10.png

If we navigate back to our WordPress interface, we will not see sammy-heart10x10.png or sammy10x10.png in our Media Library. Next, if we return to the command line and navigate to our wp-content/uploads directory, we should see that sammy-heart10x10.png is missing from our timestamped sub-folder.

Finally, if we navigate to the Spaces page in the DigitalOcean control panel, we should see both files stored in our Space.

Conclusion

We have covered two different options you can use to store your WordPress media files to DigitalOcean Spaces using DigitalOcean Spaces Sync. This plugin offers additional options for customization, which you can learn more about by reading the developer’s article “Sync your WordPress media with DigitalOcean Spaces.”

If you would like more general information about working with Spaces, check out our introduction to DigitalOcean Spaces and our guide to best practices for performance on Spaces.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
10 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

To manually move old media to spaces, use:

cd /path/to/wp-content/uploads
s3cmd put * --acl-public --add-header=Cache-Control:max-age=86400 --recursive --continue-put s3://name/of/bucket/wp-content/uploads/

Work like a charm: https://www.digitalocean.com/docs/spaces/resources/s3cmd/

I notice that this doesn’t seem to sync all folders and files from the WP /uploads/ directory. Only the typical WP year/month directories for me are syncing to Spaces. However I need other directories and files within the WP /uploads/ to sync. Any idea how to make that happen using the DigitalOcean Spaces Sync Settings Plugin? Theme CSS and some other Plugin files often get put in this /uploads/ directory and don’t follow the same naming convention as base WP media files.

Does the plugin move existing media files to DO Spaces and rewrite the media URLs?

The plugin is not working in 2024. It is outdated and has no support at all. It’s a shame that DigitalOcean does not offer an official plugin for this specific need.

Please help My origin Endpoint is https://myendpoint.sgp1.digitaloceanspaces.com, i have a folder name “location” How can i set up my upload file go to exact Local path: https://myendpoint.sgp1.digitaloceanspaces.com/location/2024

That plugin was out of update, and it does not work when checking the connection.

Set Full URL-path to files: to https://uploads.your_server_ip will not work unless you manage the subdomain to the space, so if you do not set the subdomain, fill the field with this value: https://Bucket-Space-Name.nyc3.cdn.digitaloceanspaces.com/

do not forget to replace nyc3 with the region of the space, and remove cdn if you not enable it for the space

The command to install Digital Ocean Spaces Sync ('wp plugin install do-spaces-sync") failed. It couldn’t create the directory and ‘do-spaces-sync’ plugin could not be found.

I was, however, able to install the plugin from Wordpress

“…be sure to use your non-root sudo user”

I had no idea how to do this, but this article was helpful:

How To Create a New Sudo-enabled User on Ubuntu 18.04

I created a CDN and have everything connected and working as expected. The website has 1000’s of images and I was curious if it were possible to upload all them to spaces then sync them to wordpress. Is this possible?

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel