I use a lot of different tools to run my websites, and over time I’ve learned what I want is to have my static content, the files that are uploaded and are images, stored separately from my apps. So while I have the basic folders on my domain (wordpress, wiki, gallery) I have a special subdomain called static.example.com for all those images and videos.
There are a few reasons I do this. First, I like having my images separate. Second, it allows me to establish a cookie-free subdomain for images and that shuts up YSlow’s check.
Create The Subdomain
Do this however your host allows. Keep in mind that some don’t allow you to traverse domain folders. If your host creates your domain as /home/user/example.com and subdomains as /home/user/static.example.com you may have to fight a little more with things depending on your setup. If possible, I prefer to put the subdomain folder inside the main web root.
If you’re using cPanel, by default you get your static subdomain installed at /home/user/public_html/static which is how I like it. This is perfectly accessible by all things but it’s also browsable at example.com/static/ and we don’t want that. Applying a little .htaccess magic will solve this.
# CDN
<If "%{HTTP_HOST} == 'example.com' ">
RedirectMatch ^/static/(.*)$ http://static.example.com/$1
</If>
Now we’re ready to go!
Move WordPress Uploads
This used to be really easy. Go to Settings -> Media and change things. But we removed that to stop people from blowing themselves up. Now there are a couple ways about it. I jumped right over to editing the options by going to wp-admin/options.php and look for upload_path and upload_url_path.
I change upload_path to /home/example/public_html/static/wordpress which is where I’ve moved all my images. Then upload_url_path becomes http://static.example.com/wordpress and I’m done except for fixing my old posts. It’s actually pretty neat that once I put those paths in, the Media Settings page lists them as editable.
Fixing the old posts takes a little trick though, and you’ll have to search/replace your posts via the database:
UPDATE wp_posts SET post_content = REPLACE(post_content,'http://example.com/wp-content/uploads/','http://static.example.com/wordpress/');
Or in wp-cli:
wp search-replace http://example.com/wordpress/wp-content/uploads http://example.com/wordpress
The gotcha here is that since I use SSL for my administration, I had to set up a new certificate for the static domain. Not a big deal right now since I can set up a self-signed, or use StartSSL until Let’s Encrypt is off the ground. It is something to consider though.
Move ZenPhoto Uploads
I have to start by warning you that Zenphoto doesn’t like this. When you install it, it puts your images in an albums folder, in the Zenphoto gallery install. This isn’t so bad, but you actually can move it around. You have to look in your zenphoto.cfg.php file (found in zp-data). The default location for your albums is defined by this:
$conf['album_folder'] = '/albums/'; $conf['album_folder_class'] = 'std';
Since I want it in the static location, I tell it my folder path based on ‘web root’ and that its ‘in_webpath’ (which tells ZenPhoto to look in the root and not relative), by changing that section to this:
$conf['album_folder'] = '/static/gallery/albums/'; $conf['album_folder_class'] = 'in_webpath';
But that means my URLs for images become http://example.com/static/gallery/albums... and I wanted http://static.example.com/gallery/albums... instead. Thankfully the .htaccess rule I used at the beginning of all this covers me there. Looking into this, I understand this is the case because unlike MediaWiki or WordPress, ZenPhoto only has one ‘location’ setting. The other two have path and URL.
MediaWiki
This was … weird. Technically all you have to do is set up the folders and change the following values in LocalSettings.php:
$wgUploadPath = "/static/wiki"; $wgUploadDirectory = "/home/example/public_html/static/wiki/";
The thing that’s weird is that the documentation says you can do this:
$wgUploadPath = "http://static.example.com/wiki";
And when you do, the image URLs properly call from the domain name. They just won’t load. When you dig deeper, it turns out that it’s caused by the settings for responsive images. The way it puts in srcset doesn’t seem to like this. So for now I’ve disabled it and my setup is this:
$wgUploadPath = "http://static.example.com/wiki"; $wgUploadDirectory = "/home/example/public_html/static/wiki/"; $wgResponsiveImages = false;
End Result?
All my uploaded content is on my ‘static’ subdomain, separate from everything else, which makes version control even easier. Also now if I ever decide to move things off to a CDN, I’m pretty well set up.
The real reason I do this is that while some of my content is uploaded via the content management systems I use (WordPress, ZenPhoto, etc), the majority is not. ZenPhoto, for example, is faster to FTP up a gig of images than it is to use a PHP tool. Ditto videos. And because of them, it’s nice to have a separate location I can give access to without allowing someone full rights on all my tools.
Comments
12 responses to “Static Content Subdomain”
Bear in mind that with subdomain-based multisite, those cookies will leak across to your static subdomain too. You need to create a separate domain entirely to stop cookies being sent for static assets.
e.g. with network example.com and sites blog.example.com, shop.example.com, a static subdomain static.example.com will be sent cookies from both blog and shop. You’d need a separate domain like static.example.net to prevent that.
@Ross McKay: They should only leak if your main domain is (like mine) http://example.com. If the domain has www, they shouldn’t.
But yeah, Yahoo uses yimg.org for a reason.
Hi, thanks for this tutorial. Would it be possible to host the content on an entirely different domain rather than a subdomain? What would the process be for this?
@Opel: Totally possible. In fact, that’s what I’ve ended up doing. I mapped the domain (my-static.com) to the folder /public_html/static/ and changed all the URLs appropriately.
I tried this on the site I linked to and boy oh boy here came issues one after the other. http://asylum.rocks and everything went bonkers. I might not have done it right so I figure I would put a comment here and see if you can check my progress. it also seemed to not work 100% at first too.
@BOGO: I’m good, but I’m not psychic. “everything went bonkers” is not descriptive. Neither is “here came issues.” Both are incredibly vague.
Your issue is that your CSS isn’t loading. You can tell because your page styling is broken. Lead with that. Remember, ‘issues’ can be a lot of things. Are your images not loading? Is it the content? What? You should be clear.
What did you move and to where? It’s great you gave the URL, but… Seeing as this post is about moving the
wp-contentfrom domain.com to sub.domain.com, what’s your subdomain? (Or heck, is this even WordPress? I also talked about MediaWiki and Zenphoto.) Don’t make people ‘assume’ if you’re asking for help 🙂I did a view page source and I see this:
http://asylum.rocks/wp-content/cache/minify/…
So that tells me your code is still trying to look on the same domain as your blog, which implies you didn’t do everything or caching is stuck. Delete your cache. Always delete cache when you’re messing around with your site 🙂
OK your right, I was vague, sorry. Was in a somewhat rush I guess to get this here. What I did was the above for the asylum.rocks website. I then had to for the slider on the front page reload images but they were not going to the new subdomain folder. They were going to the same old spot of uploads. I do have in my .htaccess a change now that puts the uploads in the imgs folder. that works for the most part, but it still creates other image sizes which I just hate.
I just created a subdomain and did as your code states and it just went to the old uploads folder in the wp-contents. So not sure what happened there. I tried it on another site I own and it had issues showing two images one in the sub domain and one on the previous uploads folder. Also when I had that working, per say, it would not load my images. they would be broken. So not sure what happened there. I then just went back to the first thing I had and all worked fine again. I cleared all the cache’s and the like and it still did not stop showing to places and or showing broken images. So I copied exactly what it shows over and over and still broken images.
@BOGO: Rule #1 of support is that a rushed question gives you a shitty answer. Be calm. Think and read what you’ve written aloud.
Stop.
You’re still rushing and concentrating on the wrong things. Step BACK.
“I want to move my wp-content from asylum.rocks/wp-content/ to …”
Be concrete.
Okay. HOW did you create the subdomain? “I made a subdomain in cpanel and pointed it to /public_html/subdomain/”
Again. Be descriptive and precise. It really matters when you’re talking about something with multiple steps.
Do you have hotlink protection turned on?
@Ipstenu (Mika Epstein): Hotlink protection is currently “disabled”. So not sure what more I could do. I will just have to think this is a not going to happen?
@BOGO: You still haven’t given me really enough information to go on past giving you the general advice I already have.
Go back to the beginning. Start over and check and triple check each and every step. And if that doesn’t work, go to the support forums or consider hiring someone to help you out, but remember:
1) MAKE SURE upload_path and upload_url_path are 100% right.
2) Make sure you can SEE the new URL: http://static.example.com/wordpress/wp-content/uploads/2015/09/image.jpg – If THAT doesn’t work, that’s your problem
3) ONLY THEN change the URLs for images
4) ONLY change the images for URLs. Notice how I wrote my examples for the search replace? It was VERY specific to be the uploads URLs only. If you thought you were going to be smart and make it shorter, you weren’t.
5) Always always always turn off all your caches when you start moving things around. I didn’t spell that out because if you’re at the point where you know you’re moving code and CSS files, you should know that already.
Now, keep in mind, you haven’t told me if you did any of that.
You just said you followed the steps. Awesome. I’m not a mind reader, rumors aside. So I literally know you’ve only done what you specifically say you’ve done. Right now you’re giving me nothing to go on, so of course I can’t help you concretely.
Like I said before. Stop rushing. Giving incomplete information is a sign of being agitated and nervous. You want an answer and you’re upset, which is totally normal, but if you want a total stranger to help you through a problem, you’ve got to fight that instinct and remember we’re not in the same room and we’re not on the same page of a conversation. It’s your job to be clear and descriptive.
This is, by the way, the limit of the free support I can give anyone. You’re not giving me anything to go on, so I cannot keep giving you guesses. It’s a waste of both our times.
This Link I just found this today. I guess I am having an issue in following some of the directions because they skip around I feel. I have started over and over and over and I get to certain points and stops working or it does not change things like it says but then it does not say.
@BOGO: You’re still not telling me anything useful. At this point, I’m going to be deleting any more comments about this. Post in the support forums for WP in general. I can’t help you if you can’t detail things.