WordPress + git + nginx = dev workflow success!

I’ve placed myself on a path to better get a grip on git and actually use it in my day-to-day development of this site. In looking up the best practices for running WordPress under git, I ran into a handy slide deck from my WordCamp Columbus buddy @stevegrunwell titled Keeping WordPress Under [Version] Control with GIT. How fancy!

If you are going to run WordPress under git, work through Steve’s slides and you’ll get a good start. When you use git to copy your WordPress into dev, there are a lot of good reasons for omitting the wp-content/uploads folder (among other folders/files) which Steve goes into detail explaining in the slide deck.

In order to still have a functioning WordPress install in dev, you still need to load up your images. Steve offered a fairly simple and elegant solution to doing so using some Apache rewrite rules to take any resources that aren’t found in dev and load them directly from production instead. Problem is, I’m running nginx, not Apache! Rewrite rules are a little different under nginx, you can’t just drop in an .htaccess file like most people are used to doing.

Here’s Steve’s Apache/.htaccess config:

<IfModule mod_rewrite.c>
RewriteEngine on

# Attempt to load files from production if
# they're not in our local version
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule wp-content/uploads/(.*) \ http://{PROD}/wp-content/uploads/$1 [NC,L]

My nginx derivative code (place in your dev site nginx config):

location ~ ^/wp-content/uploads/(.*) {
   try_files $uri @missing;
location @missing {
   rewrite ^/wp-content/uploads/(.*)$ http://{PROD}/wp-content/uploads/$1 permanent;

A quick test and… voila! The images on my dev site are gracefully loaded from production. To be doubly-sure it is working as intended, I copied a file from the upload folder on production into my dev uploads folder. A refresh of the page now shows the image being loaded from dev. Delete the file and refresh – images comes from prod. WOO!

Quick note – in both mine and Steve’s code examples, {PROD} is meant to be replaced with your actual production domain. Don’t forget to change it!

Leave a Reply

Your email address will not be published. Required fields are marked *