That referrer, cdn1-mycompany.netdna-ssl.com, isn’t allowed to serve this file. But there’s an easy fix: you can whitelist the CDN itself in the CDN.
The fix: whitelist the CDN itself
In MaxCDN, go to Pull Zones > Security > Whitelist.
You might already have yourdomain.com in here. What you need to add is the domain your CDN files are pulled from.
In my case, that was a domain that took the form of cdn1-mydomain.netdna-ssl.com, but you can find out what yours is by looking in the Network tab while you try to load your site. Look for a red-colored error message and open the Headers.
Anyway, the fix is as easy as adding the domain to this list of whitelisted domains and waiting a few minutes (for me it was about 10 minutes). Reload your website and the Font Awesome icons should now appear.
Note: You will probably need to Purge All Caches, too, once the time has passed to actually see the change in your browser (I use the dropdown in the WP toolbar).
My W3 Total Cache settings
(Just in case it’s useful to someone else trying to debug this problem)
My W3 Total Cache settings are set to upload .css, .tff, .otf, .woff, and .woff2 files.
I just moved one of my blogs to a new host (yay!). This blog uses MaxCDN for its content delivery, and moving the blog to a new host messed up the site’s styles and it took me a while (plus some back and forth with support) to get everything fixed because MaxCDN was still referencing the old host.
In case I ever do this again, here’s what needed to be done to move my WordPress blog to a new host with MaxCDN as my content delivery network.
Step 1: Add a CNAME record to your new host
My new host has CPanel (Digital Ocean, by contrast, had a Networking tab with a link to Domains and their records were accessible through there). If you have CPanel, click on Simple DNS Zone Editor.
Add a new CNAME record. It’ll probably look something like this:
Name
cdn1.yoursitename.com.
Record
cdn1.yourbusinessname.netdna-cdn.com
(Your CPanel might add the . at the end of name for you, and it might autocomplete for you if you just type the subdomain portion and then tab out of the field.)
Note: I use a custom domain in MaxCDN because I don’t want it to use the default “business name” URL that MaxCDn gives you.
Step 2: Update the Origin IP over in MaxCDN’s settings for your pull zone
Go to Zones > Pull Zones > Settings and get into that particular pull zone’s settings. At the bottom is Origin Information. Check the checkbox and enter the IP address for your new host. Click Update button to save.
Step 3: Whitelist your new IP
Go into your Account > look under the API section > click Manage > add your new IP as a whitelist IP.
You may also need to whitelist your own IP address, if you get problems with cURL requests failing when you try to clear CDN cache.
Step 4: Update your WP caching plugin
You may need to reconfigure your WP cache plugin. I use W3 Total Cache which, for reasons unbeknownst to me, likes to replace my entry for “Replace site’s hostname with:” with the word “Array” instead of the URL I give it.
For reference, “Replace site’s hostname with:” should be followed by your cdn url, like cdn1.yoursite.com.
Step 5: Purge all caches and check your site
When you’ve done all of the above, purge your CDN cache and your WP cache via your caching plugin.
It might also help to flush your local DNS. I’m on Windows and I do that in a command prompt with ipconfig /flushdns
Open a Chrome incognito tab and load your site – if your styles and images load, you’re good to go. If your site looks incomplete, look in the console for an error message. I found many of them (like 502 bad gateway) to be covered in MaxCDN’s documentation.
If you are using a custom domain with MaxCDN like I am, then putting that custom domain into whatsmydns should yield the actual “business” domain in the results list. In other words, if you search for cdn1.yourcustomdomain.com and you get responses of cdn1.yourbusiness.netdna-cdn.com, you’ve got it set up correctly.
What’s your site’s IP? In a command prompt / Terminal window, ping yoursite.com to get its IP address.
Is your CDN URL responding? In a command prompt / Terminal window, ping cdn1.yourcustomdomain.com and see if you get anything. If it can’t find your host, this could indicate an error with your CNAME record with your new hosting service.
Are you seeing stale or current stuff in your browser? I use Chrome incognito because each window starts with a fresh cache and no cookies. CTRL SHIFT N opens up a new incognito window.
You may also want to flush your DNS in between tests. ipconfig /flushdns does this in Windows.
If all else fails, email MaxCDN’s customer support. Even on a US holiday, I got a response within 20 minutes and they helped me get things working again.
Moving a WordPress site from one host to another with minimal of downtime doesn’t have to be a huge hassle, and it’s easy to do it yourself even if you aren’t a web developer. Here is the process I use to move a WordPress site to a new host, with about 10 minutes or less of actual downtime (and because of caching, many visitors during the migration may not even see the outage).
I like this method because:
It’s easy
You don’t have to mess around in MySQL
It’s free
It’s maybe 10 minutes of downtime for your site, depending how fast you can upload your backup and how much you have to do to get your caching plugin/CDN (if you have them) on board with the new IP address
Before you begin, make sure you have:
A WordPress site on your current host
Access to your new hosting account (preferably with CPanel and phpMyAdmin to get the most out of this guide)
Access to your domain’s DNS records (yoursite.com may be registered with your current host, or a separate registrar)
Nameservers for your new host (they usually look like ns1.newhost.com)
FTP access to old host and new host via your choice of FTP software (I use Filezilla) *optional* – you can do the same stuff through your host’s CPanel File Manager if they have it
About an hour of time to dedicate to reading this guide and the actual migration
Step 1: Install UpdraftPlus plugin on your site
Log into your WordPress dashboard (http://yoursite.com/wp-admin) and install the free UpdraftPlus plugin.
This plugin is awesome and I recommend it for use outside of just moving your WordPress site to a new host. Here’s why:
The backup files do actually work (this plugin has saved my ass a couple times now)
You can use it to make a manual backup of your site at any time
You can set it up to create automatic backups and put them on the cloud storage service of your choice (personally, I back up to Google Drive)
Step 2: Use UpdraftPlus to make a backup of your site
Use Backup Now to start the backup process.
I like to do this right before I’m ready to start the migration process, so the backups are as fresh as can be.
Step 3: Download your backup files
Go back to your UpdraftPlus plugin page and go to the Existing Backups tab. Find today’s date and click each of the buttons (database, plugins, themes, uploads, others).
Updraft will prepare each backup file for you (there are 5 total). Wait for Updraft to prepare the files, then click Download to your computer for each one.
You’ll get 5 compressed files:
Step 4: Set up an account with your new host and install WordPress there
If you haven’t done so yet, sign up for an account at your new host.
I use the StartUp package for my up-and-coming sites, and the GoGeek plan for my top performers. You can upgrade your plan at any time as a site grows. I especially like the GoGeek plan because they throw in SSL for free (or at least they did for my first year) and because it has a separate staging environment for testing stuff on a copy of the site before pushing it live.
Next, install WordPress on your new host. Many modern hosts (including SiteGround and BlueHost) have an easy one-click install for WordPress nowadays – look in the CPanel or just the dashboard in general once you’re logged in.
Don’t worry about picking a login/password you want to use in the long run, your Updraft backups will replace whatever you choose during setup with whatever your existing site already has. Do write down whatever name/password you choose here, you’ll need it to access your new WP install until you overwrite it with your backups.
It’ll probably tell you the installation was successful and you can go see it at the following url, but that link won’t work because you haven’t updated your domain’s nameservers yet.
Step 5: Change your domain’s nameservers
I do this in dynadot.com’s domain manager because that’s where my domain is managed, but your domain may be attached to your old hosting. In any case, change its two nameservers from ns1.oldhost.com and ns2.oldhost.com to ns1.newhost.com and ns2.newhost.com (or similar).
It should propagate fairly quickly (check it here: https://www.whatsmydns.net/) but it may take a while to see the change on your machine. One way to speed it up (on Windows, anyway) is to open a command prompt (cmd) and type ipconfig /flushdns.
Load your site again (in an Incognito window in Chrome or after clearing browser cache) and you should now see your new WP install.
Step 6: Install UpdraftPlus on your new blog and restore backups
Now that you have dashboard access to your new WordPress installation, install UpdraftPlus and click Restore.
Drag your 5 files here and wait for them to upload.
When those are done uploading, click Restore.
Follow the prompts until you’re force to re-log in to your site. It should now look exactly like it used to on your old host, but you can confirm that it’s actually on your new host by pinging it in a command prompt or Terminal window (ping yoursite.com). If the IP address returned matches your new host’s, you’re good to go.
Extra step for CDN users:
I’m on MaxCDN, but regardless of what CDN you use (if you use one) there will probably be some additional setup steps to make sure your existing CDN account references your new IP and host.
Step 7: You may need to do some other setup on your new host
Leave your old host active for a little while while you confirm everything’s working on your new site over the next couple days.
You may need to move the following separately:
Email accounts. If you had email accounts set up at your old host, take note that they don’t come with the Updraft migration and you’ll have to recreate them (and redo any redirects) on your new host.
Favicon: if your site had a custom favicon sitting in your site’s root directory, you might need to copy it from your old host and upload it to your new one
Google Analytics .html file: If you put any .html files for analytics tracking (Google Analytics is the one I always have to move manually) in your old site’s root folder, you will have to copy them to your new host
Robots.txt and anything else sitting in root (this will vary by site)
Images or other media in dedicated folders: Anything that’s part of your site but not part of WordPress will have to be manually moved. For me, this is sometimes a site logo or images on the site that I keep in a separate images folder, not uploaded to WordPress’s file manager.
If you’re afraid of losing anything off your old site, take the time now to download a copy of its entire directory off your old host, before you shut down your old hosting account. That way, if you find something missing later on, at least you can dig around the old files and maybe find it.
This guide was written after I completed the process of hooking up MaxCDN to my Digital Ocean hosted WordPress blog.
This wasn’t a straightforward process, partially due to my own errors and partially because I was using WP Super Cache which I’m pretty sure just doesn’t cooperate with MaxCDN for reasons I may never understand. However, I now have it working so here’s my guide to everything I did.
Why I wanted a CDN: To speed up my top money-making property, which is also my slowest because it’s got long articles and lots of images.
I chose MaxCDN because it seemed to have a lot of good reviews and at about $10/month was reasonably priced.
Setting up MaxCDN with W3 Total Cache and a custom CNAME on Digital Ocean
I signed up and was disappointed to see that the URL MaxCDN gave me by default included the business name I used when I signed up. I wanted cdn.mysitename.com, but by default MaxCDN gave me cdn1.mybusinessname.netdna-cdn.com. MaxCDN calls this the “branded domain” and you can use it as-is, but I would guess most people want to customize it.
My business name and my website name are not the same and I didn’t want to expose the former in the latter. (They don’t tell you they’ll use your business name this way when you sign up, nor do they let you change it once you opened your account. Ugh.)
Fortunately, you can set up a custom domain and use that instead, and my steps below include that process.
Step 1:Enter your custom domain into the pull zone settings. Go to Pull Zones > Settings and fill in the Custom Domains field with cdn.yoursitehere.com (or cdn1.yoursitehere.com, or whatever you prefer. The important thing is that all three parts of the url are present.)
Step 2: Get into Digital Ocean’s record management. Inside Digital Ocean’s droplet management page, go to Networking and then go to Domains. Click the magnifying glass next to the domain you’re adding this CDN to to get into its records. More help adding/editing domain records in Digital Ocean.
Look in Networking, Domains
Step 3: Add a CNAME record to your droplet’s domain. If you want cdn1.yourdomain.com, fill the form out like this:
Enter Name: cdn1
Enter hostname: cdn1.yourdomain.netdna-cdn.com (the “branded” domain that Digital Ocean gave you by default)
Be sure to click the Create CNAME Record button to actually add it to the list of records.
Step 4: Wait about 20 minutes for it to propagate.
Assuming nothing else is conflicting (you didn’t leave your DNS hooked up to CloudFlare like I did, you don’t have a competing www.yourdomain.com record like I did, etc), this should happen in 20 minutes or less.
At first, I was using WP Super Cache and every time I turned on the CDN feature my site’s styling and images disappeared. I fought with this for a while, got good and frustrated, then tried W3 Total Cache like MaxCDN suggests and WOW – it was like night and day. I followed MaxCDN’s tutorial and basically, it just worked. Be sure to whitelist your site’s IP (go into Terminal or command prompt and ping www.yoursite.com to get your site’s IP if you don’t know it, or look in Digital Ocean’s droplet list).
If you’re having a problem with WP Super Cache making your styles and images disappear with MaxCDN, try W3 Total Cache instead.
Step 6: Verify it works by loading your site
If everything’s working, you should be able to load your site (yoursite.com) at its usual url (not the cdn url) and look in the network tab of your browser to see responses coming in from the CDN url (cdn.yoursite.com).
Fast way to check: right click any image on your site and view it in another tab. Its url should be your cdn’s url.
If you don’t have any images, you can see this in Chrome by right clicking to Inspect and then click over to the Network tab before loading your site. Hover over some resources (like .css resource) and you should see cdn1.yourdomain.com.
You should also start to see improvements to your page’s load time immediately.
If you don’t see the changes right away: While the cdn1.mysite.com changeover was observable right away on the computer I was working on, it wasn’t on my laptop. The cause seems to be the computer’s own DNS settings. By switching my laptop’s DNS settings to Google’s, I was able to see the most up-to-date (ie: not cached) version of the website.
(Alternatively, waiting a while – up to a day – should resolve it with no changes to your computer.)
Pingdom results, before and after MaxCDN
Here’s a couple of “before” load times on my website, taken less than a minute apart and both from New York City. The thing I often notice on Pingdom’s Website Speed Test is how much variance there can be in load time across multiple tests when all other factors remain the same (location testing from, time of day, etc).
Site speed: before
Here, there’s a huge difference in load time just on these two “before” tests.
The kind of extreme difference in load time seen above is why I like to run several Pingdom tests when collecting my “before” data before making a change that I think should effect load time. Here’s another test, this one from San Jose, California.
Site speed: after
Whoo! Look at that, down to <2 seconds since turning on MaxCDN:
Here’s an even faster one, best one I saw in my several tests:
And one from San Jose:
So far I like MaxCDN. Their online support is very responsive. I sent a detailed plea for help on a Sunday afternoon in the U.S. and had a (reasonably) customized response within an hour. Their documentation is plentiful and thorough. They include many examples and their screenshots are up-to-date with their current interface.
The real test will be in seeing if getting the site speed down to ~2 seconds has any noticeable effect on the site’s Google rank and total conversions (sales).
CDN Traffic Boost?
Totally unscientific study here, but my site’s traffic pulled out of a slump as soon as my CDN hookup went live. (March 17 is just beginning as I post this update.)
