10 July, 2011

Where to store JavaScript and CSS files for Blogger

If you are a Blogger user, then you already know that currently there is no possibility to upload your custom JavaScript and CSS files. You have to host your files somewhere else and then link them in your blog template. One of the places where you can host your custom JavaScript, CSS and any type of files is Google Code. Google Code, is a free platform to host Open Sources Projects.

You can just simply upload your files and hotlink to them. Main issue in this simple task is that it’s working for JavaScript files but it doesn’t work when hot linking to CSS or Image files. The reason is that, by default when we upload any file to Google Code, it is served as text-plain mime-type. This works with JavaScript files but not with CSS, Image files or HTML files.

Below is a small tutorial showing how to create a new project on Google Code, how to use an SVN client to upload new files to it and how to set the mime-type for these files.

  1. Go to http://code.google.com/hosting/ and create a new Google Code project in case you don’t have one already.
    Google Code Project Hosting
  2. Make sure that you have selected Subversion as Version Control system.
    Google Code Create New Project
  3. Note down your repository URL, username and password. We will need these details in the next steps when we will use an SVN client to upload files to repository.
    Google Code Source Page
  4. Install an SVN client. In this example we are using TortoiseSVN.
  5. Right click where ever you are working on Windows Explorer and lunch TortoiseSVN Repo-browser.
    TortoiseSVN Repo-browser Menu
  6. Enter you repository URL, then username and password (from step no. 3).
    TortoiseSVN Repo-browser URL
  7. Repo-browser lets you browse, add, remove and edit files from your SVN repository.
    TortoiseSVN Repo-browser Add File Menu
  8. After you have uploaded the files to repository, you can set their mime-type. Right-click on a file and select Show properties from context-menu.
    TortoiseSVN Repo-browser Properties Menu
  9. Using Properties dialog you can add, remove and edit file’s properties.
    TortoiseSVN Repo-browser Properties
    TortoiseSVN Repo-browser Add Properties
  10. You are done uploading. Get the file URL by doing left click on the file you want to hot link from the repository browser and select and copy the URL. Just replace the https with http and you are done. Now you have got the URL to hot link. Use it where ever you like.
    TortoiseSVN Repo-browser File URL

12 comments:

  1. Thank you very much!
    That is the only way to placing working css files to blogger!

    ReplyDelete
  2. Free File Hosting , Upload and Share you files securely with FileLoby.

    ReplyDelete
  3. Sir, any other option for uploading CSS files??

    ReplyDelete
    Replies
    1. I didn't investigated more. Currently I'm using this one.

      Delete
  4. Cảm ơn bạn rất nhiều

    ReplyDelete
  5. Want to offer for you a user-friendly platform to businesses and individuals to Post Free Ads.
    Get free account via Facebook Login or Post Free Ads in one click.
    Get more with free advertising at Postallads4free.com

    ReplyDelete
  6. Fairly segment of content. I just stumbled upon your site and in accession funds to claim which i acquire actually cherished account your blog posts.Anyway I will be subscribing for your feeds or even I achievement you access persistently swiftly.
    website design

    ReplyDelete
  7. You are awesome!!!!! great it worked very well and really it raised up my page speed :)) and i'll try CSS too i believe it should work that way!
    Thank you very much for the tip!

    ReplyDelete
  8. But now we have a problem! can we set cache or specify an expiration to these files?

    ReplyDelete