ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How to Use DropBox as Free CDN for WordPress Blog

rainmaker
How to Use DropBox as Free CDN for WordPress Blog

We all know CDN helps to decrease the blog load time but again most of CDN services are paid. Here I’m sharing a tutorial on how you can use your free Dropbox account as CDN account using Super Cache WordPress plugin. Using CDN will significantly decrease your blog loading time and I have tried and tested it on my blog today. Here at ShoutMeLoud, we already shared a post on How to boost your blog with Rackspace cloud files but again you need to pay for Rackspace account.

You will be surprised to know that Dropbox lowered the site’s load time up to 4 times. My site took around 6.1 seconds to load but after using Dropbox, the load time get lowered to just 1.5 seconds. That’s exactly 4.06 times lower. Some other advantages of using Dropbox as CDN are that its free and also, it lowers down the site’s bandwidth.

Look at the screenshot below in which you can see the how much fast Dropbox loads then other CDN servers.

cdn image

<Source>

How to Use Dropbox as CDN

First of all you download all of your site’s static files (i.e wp-content and wp-includes folder in WordPress). Upload all the files to Dropbox and link to them from your site. Well the linking thing is pretty much lengthy so you may need a Plugin, WP Super Cache for that purpose. I guess all the WordPress users use it but if you don’t, download the plugin from here and install it.

1. Download COMPLETE wp-content and wp-includes folders (you can skip .php files) from WordPress.

2. Create a new Directory i.e CDN in your Dropbox public folder. (If you don’t have a Dropbox account sign-up here)

3. Create a new sub-domain i.e cdn.example.com. (Scroll down to learn why to create a sub-domain and what to do if you don’t want to create sub-domain)

4. Open your site’s file manager and in the directory CDN, create a new file named .htaccess and add the following code in it. (Replace ID with your Dropbox ID)

Redirect 301 / http://dl.dropbox.com/u/ID/cdn/

5. Open the Super Cache settings page and click on the CDN tab. Configure the settings accordingly. (Replace cdn.havefunforever.com with the url to sub-domain you created in 3rd step)
dropbox cdn 520x550
6. Click on Save button and you know what? Everything is done.

Why a Sub-Domain? I don’t want to create a sub-domain!

Well the sub-domain thing is optional but I prefer to use it because it keeps URLs clean and is also better for branding. If you are sure you don’t want to create a sub-domain then you can do the following.

  • Skip 3rd and 4th step.
  • In the Super Cache CDN setting page, in Off-site URL, give the path to your Dropbox folder where all the files resist i.e http://dl.dropbox.com/u/ID/cdn.

Note:

From now-on, all of your files would be hosted on Dropbox so whenever you change anything in wp-content and wp-includes folder (expect changes in php files), you must also apply the changes to the files hosted on Dropbox. If you upload any image to your WordPress site, you must also upload the images to Dropbox.

Do let us know if you have any query while setting up Dropbox as CDN. Also if you have set up this free CDN for your WordPress blog, don’t forget to check your blog load time and let us know the difference.

  • Author Bio

  • Latest Post

Article by Yousuf Khan Jee

Yousuf has written 5 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.


{ 30 comments… add one }

  • eri

    this is very interesting, i never though that we can use dropbox as CDN. as i know dropbox using for file or data transfer. but implementing dropbox as CDN its very interesting. i should give a try..

    Reply
  • Saurabh

    Hello Everyone!
    I am trying to set up Dropbox as CDN for my website but Dropbox don’t offers “Public” Folder Now. How to get the public link?
    I searched net and found an app of site44.com but still they are not free there limits for free a/c are 100 mb/month lolz..
    Can you tell me any other alternative? Also they offers 10GB/Month… how much average traffic it meant? And also I got stuck in finding DropBox UID. Please help me get out of all these bugs.

    Reply
  • Taifur

    how can I find my dropbox ID? I use my email & password to log in there.

    Reply
  • Seye Kuyinu

    This tutorial is great but my question is this:
    Are you saying anytime I upload an image to my wp-content/uploads folder through the in-built Media upload function, I have to also upload them on Dropbox?

    Reply
  • Dyce

    I like the idea of this and would even be willing to pay to upgrade dropbox, but it seems like a hassle to upload new images to both my wordpress and my dropbox. Is there a way to upload directly to dropbox through the wordpress media upload interface?

    Reply
  • Kang

    I has try your tutorial,
    if cdn URL using Dropbox, its work fine, thanks
    but, if use subdomain: cdn.domain.com is: Internal Server Error
    I want use sub-domain but not work, help me :D
    you can check my test in: ciamis.pamali.com

    Reply
  • SiRu

    I would also like to know the plugin “Dropbox CDN” is for?

    http://wordpress.org/extend/plugins/dropbox-cdn/

    Regards

    SiRu

    Reply
    • Kang Sawul

      That plugin only execute style.css from Dropbox
      I has try that plugin week ago.

      Reply
    • Yousuf Khan Jee

      Kang Sawul is right!

      Reply
  • SiRu

    Hi,

    Anyone able to do it using “W3 Total Cache plugin”? I am using this plugin and I cant use 2 plugins (W3 Total Cach and Super Cache),

    Regards
    SiRu

    Reply
  • [email protected]

    nice trick! :). I have created a dropbox account. Now, time to try this CDN trick.

    Reply
  • uncleboob

    Nice tutorial. Thank you very much. I now serve the content from the dropbox CDN.

    Reply
  • Raje

    Any plugin available to use drop box as CDN in WordPress

    Reply
  • Nicholas Teo@Feng Shui since 1988

    I am also using W3 Total Cache plugin and have trouble setting a CDN for it but I think its already fast enough for me.

    Reply
  • Anshul

    Hi,
    I am using W3 Total Cache plugin. I am not able to setup CDN in this plugin. Could you help me out.

    Reply
    • Yousuf Khan Jee

      I haven’t used W3 Total Cache plugin so I can’t help you but you can use the above method and it works really well!

      Reply
  • Jenn@mc700ll a

    The idea is just great, Yousouf.

    Thanks for sharing this, I can’t afford paying amazon, so I would try to implement this method.

    Thank you

    ~J.

    Reply
  • MAHESH KUMAR

    okay…that’s very important tip and I am going to try this

    Reply
  • AlmostLikeEverything!

    First Of all Great Tip Yousuf, i am also on the same terms that using Dropbox as CDN is restricted to websites which have low traffic on the other hand for all those who want to setup CDN for zero cost should use trick of Loading static files from subdomain [You can do that using w3 total cache plugin]
    I know that its not a real CDN but you can take the advantage of Parallel downloading function in Browsers, which will reduce your site load time by 30-40 % and its free as subdomains are free!

    Reply
  • Thierry

    I will try it for my blog. :) Thank you for this tip.

    Reply
  • Jacob Share

    Even if it has limitations – to be expected with a free tip – this is still a good idea for small bloggers who can’t afford or even justify paying for a real cdn solution.

    Reply
  • Octa Rendra

    Yes I like this, Idea .. I want to try implement this on one of my low traffic sites..
    Thanks

    Reply
  • kbharath @ Techntricksonline

    Thanks for sharing this and the tutorial is Clean and easy to understand i have to give a try definitely because my site takes more time to load.

    Reply
  • Amit

    The idea is nice but it has some caveats.

    If your site traffic goes high, as a site owner you will be in trouble. Dropbox has a limitation on the Bandwidth, so double check your stats and Awstats logs before implementing this. If your site consumes a fair amount of bandwidth, Dropbox will put a temporary Ban on the static files e.g CSS, JS, Theme Files Images, hence the visitors coming to your site will see broken design or maybe 404’s.

    Read this: http://www.labnol.org/software/dropbox-bandwidth-limit/18278/

    However, you can use it for small sized websites with low traffic, service or portfolio pages. I have used this trick before in my site but dont use it now.

    Reply
    • Yousuf Khan Jee

      Well you are right but if the bandwidth limit exceeds, you can pay for the service and you can get bandwidth of 250 gb per day which is pretty much good.

      Reply
      • Amit

        Well then it’s not a FREE CDN anymore :-) I would prefer using Amazon S3 for a paid cdn though

        Reply
        • Yousuf Khan Jee

          As you wish but do check the image in the post. :) It clearly shows the time of loading a file on Amazon S3, Dreamhost and Dropbox. You can see that dropbox loads faster then the others! :)

        • Jakub

          That image must be wrong then. Dropbox uses Amazon S3 internally…

        • Yousuf Khan Jee

          I can’t say if Amazon is slower then Dropbox or not as I have never used Amazon but I have read that Dropbox is faster then Amazon. Well, I have used Dropbox on my site and it is better then the old ftp.

    • Eric : Manila Blog

      I was supposed to implement this if not for the bandwidth limitation. :(

      Reply

Leave a Comment