A decent website is a the right mix of multiple solutions gathered in one place – your website. And while history witnessed many successful stories for choosing and implementing well-supported online platforms latest on that at http://symfony.com/blog/symfonylive-san-francisco-we-re-back, there is one particular case we would like to discuss today. Dropbox is a great online data back-up service that lets you store up to 100GB, and for basic users (i.e. free version) it offers a space of 2GB. It’s also a good way to sync your files across your multiple devices. Plus the service is fairly easy to use. Just install the app and start ‘drag and drop’ files you want to sync in your Dropbox folders on your computer or mobile device.
The best thing is besides backing up important files, you can also use Dropbox for hosting your websites too, For FREE!. Here you might share – or working together – your HTML page with your friends first before choosing the right domain. Within the Dropbox, there is a folder called Public, by default. From there you can create a sub folder for your website’s files (HTML, CSS, even Javascript) so that you share all the resources over the internet i.e. permit the access to public.
However today I would focus only about working with CSS files. Until now I don’t have an issue hosting javascript files on Google Code. But it’s not friendly enough handling CSS files over there, compare to Dropbox.
Should you host Your CSS files somewhere else
Let’s be clear again that Blogger isn’t self-hosted platform. We don’t have complete freedom to control over our blog’s existence. It’s always a good idea to keep the main resources in one place; stay with Blogger. Otherwise, we just increase the risk when the number of server is doubled up. Concerning server downtime, we should be worrying to use another server for our CSS as we know all the stylings are really important to the website. Plus, Blogger has unlimited bandwidth to host all the files. So the answer is… you shouldn’t.
Now lets talk about why you shouldn’t be using Dropbox as a CDN (Content Delivery Network) for your blog. There are several reasons:
- I believe Dropbox is not a CDN. A real CDN has servers located worldwide in different locations so that any request from web users will be served from the nearest server.
- Dropbox has bandwidth limits. According to Dropbox support, links that use up more than 20GB/day for Basic (free) accounts and 200GB/day for Pro and Teams (paid) accounts are automatically suspended.
- Dropbox is a file hosting and sharing service. The domain might be blocked by most of the organization/office/school networks.
How to host Your CSS files using Dropbox
Using Dropbox is only an alternative when you have solid reasons hosting your CSS outside Blogger. But when?
- You have several CSS files to differ your pages for instances home page, static page, and error page. Or maybe you have specific stylesheet for IE.
- You have a big size of CSS file especially for those who love CSS3 and fallbacks.
- You are working with responsive design.
- You are looking for valid HTML5 which you have to clean up your HTML from any inline styles.
- You know what you’re doing.
Seriously it’s pretty simple, just sign up Dropbox here and download the application and you will get free 2GB of online storage. Once you install the application and set which folder you will dedicate for your blog, you can simply start dragging your CSS file and it will be stored in the cloud.
Here you need to create a stylesheet using any Text Editor. Cut all stylings in between <b:skin><![CDATA[ tags;
<b:skin><![CDATA[ ...CUT ALL CODE HERE AND LEAVE IT BLANK... ]]></b:skin>
Paste the code on your text editor and save as CSS file ( e.g. style.css ). Drag/paste the file into your dedicated folder inside Dropbox then right click on the file to copy its public link that will be used inside your template.
There are two ways to include a stylesheet in your template. You can use <link> tag after ]]></b:skin>;
]]></b:skin> <link rel='stylesheet' href='style.css' />
Or you can use the CSS @import rule:
<b:skin><![CDATA[
@import url('style.css');
]]></b:skin>
But if you have more than one CSS file, using @import within a stylesheet adds one more roundtrip to the overall download time of the page and IE causes the download order to be altered. Read more here
So the latter isn’t recommended. To load only specific stylesheet you can use <b:if cond> e.g. for your 404 error page;
<b:if cond='data:blog.pageType == "error_page"'> <link rel='stylesheet' href='404error.css' /> </b:if>
It’s brilliant that Dropbox keeps a snapshot every time you save a file. Within 30 days you can preview and restore ‘style.css’ by choosing one of the versions.
While experimenting this, I found Dropbox is really handful feature to host media files specifically images. I can retouch an image in my post using Photoshop and just click ‘Save’ (or Cmd + S) to update the image. Compare to an image from the default uploader in Blogger, I have to re-enter my post, re-upload the image also need to go to my Picasa web album to completely delete the old image.
I did checking its loading time and it’s quite consistent though it will take few milliseconds more during the connection.
