Freely Host CSS, JS & other static files using Google Code and SubVersion

Google Code Google Code, is a free platform to host Open Sources Projects. If you are a web developer then you might have used Google Code before. In many projects, we can just simply upload JavaScript files and hotlink to it. But you should have noticed, that the same trick does not 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.

So, we are going to discuss in detail how to host any file using Google Code and Sub Version Client. After reading this tutorial you will know about

  • Project Hosting using Google Code;
  • Working with SubVersion using Free Clients like TortoiseSVN; Uploading and Downloading files using it;
  • Working with mime-type.
  • Obviously, successfully hot linking files directly from Google Codes;

So read on to know how…

#1: Registering to Google Codes and Creating a New Project:

If you have not already, then, go to and register with your Google Account. Now follow these steps:

  • Go to the Project Hosting page and click on the Create a new project; This will take you to a page to create a project from where you will be hosting your static files.
  • Now fill in the details as shown in the figure.Create a new project at Google Codes Make sure that you have selected “Subversion” as Version Control system. Click on the Create Project button when everything is done.
  • Once the project is created, the main Project page will be shown to you. Navigate to the “Source” tab from the project page.
  • Here you will find something like thisget the repo URL and password
  • Note down the URL of the svn checkout and then click on the password.note down the password Note down the password. We will need the URL and the password in the upcoming steps. These will be used to login to the repository where from we will be serving the static files. So do not share the password with any one, else other might be able to edit/remove/modify your files! 

Now you are done creating the project and collecting necessary information. Our next step will be to download and configure Subversion clients.

#2: Downloading & Configuring TortoiseSVN

As said before, we are going to use TortoiseSVN as our Subversion client to upload our static files with proper mime-type. Here are the download links…

  • Home Page: Click Here;
  • Download Page: Click here and download either 32 or 64 bit version according to your operating system [Mostly 32 bit]

Note that tortoiseSVN is a shell control client. Which means, you do not actually need to open up a new software. Just Right click where ever you are working on Windows Explorer and you are ready to launch TortoiseSVN. Now just do the following tweaking…

  • Right click on any open Windows or desktop and navigate to Tortoise SVN > Settings.Go to the settings page of tsvn This will pop up the settings page.
  • Now click on the “Edit” on edit to embed the mime-type accordingly This will open up a notepad with a text document.
  • This document holds all the records for the mime-type of the files to be uploaded. We need to add a list of mime-type according to extension on this file.
  • Just after the end of the text document, press enter and copy paste all the texts from the box below.
    enable-auto-props = yes
    # Scriptish formats
    *.bat        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
    *.bsh        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell
    *.cgi        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
    *.cmd        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
    *.js         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript
    *.php        = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php
    *.pl         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable
    *.pm         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl
    *.py         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable
    *.sh         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable
    # Image formats
    *.bmp        = svn:mime-type=image/bmp
    *.gif        = svn:mime-type=image/gif
    *.ico        = svn:mime-type=image/ico
    *.jpeg       = svn:mime-type=image/jpeg
    *.jpg        = svn:mime-type=image/jpeg
    *.png        = svn:mime-type=image/png
    *.tif        = svn:mime-type=image/tiff
    *.tiff       = svn:mime-type=image/tiff
    # Data formats
    *.pdf        = svn:mime-type=application/pdf
    *.avi        = svn:mime-type=video/avi
    *.doc        = svn:mime-type=application/msword
    *.eps        = svn:mime-type=application/postscript
    *.gz         = svn:mime-type=application/gzip
    *.mov        = svn:mime-type=video/quicktime
    *.mp3        = svn:mime-type=audio/mpeg
    *.ppt        = svn:mime-type=application/
    *.ps         = svn:mime-type=application/postscript
    *.psd        = svn:mime-type=application/photoshop
    *.rtf        = svn:mime-type=text/rtf
    *.swf        = svn:mime-type=application/x-shockwave-flash
    *.tgz        = svn:mime-type=application/gzip
    *.wav        = svn:mime-type=audio/wav
    *.xls        = svn:mime-type=application/
    *.zip        = svn:mime-type=application/zip
    # Text formats
    .htaccess    = svn:mime-type=text/plain
    *.css        = svn:mime-type=text/css
    *.dtd        = svn:mime-type=text/xml
    *.html       = svn:mime-type=text/html
    *.ini        = svn:mime-type=text/plain
    *.sql        = svn:mime-type=text/x-sql
    *.txt        = svn:mime-type=text/plain
    *.xhtml      = svn:mime-type=text/xhtml+xml
    *.xml        = svn:mime-type=text/xml
    *.xsd        = svn:mime-type=text/xml
    *.xsl        = svn:mime-type=text/xml
    *.xslt       = svn:mime-type=text/xml
    *.xul        = svn:mime-type=text/xul
    *.yml        = svn:mime-type=text/plain
    CHANGES      = svn:mime-type=text/plain
    COPYING      = svn:mime-type=text/plain
    INSTALL      = svn:mime-type=text/plain
    Makefile*    = svn:mime-type=text/plain
    README       = svn:mime-type=text/plain
    TODO         = svn:mime-type=text/plain
    # Code formats
    *.c          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
    *.cpp        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
    *.h          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
    *.java       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
    *.as         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
    *.mxml       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain

  • Save the text document and you are done.copy paste the text Now press OK on all the open SVN windows.

Note that you need to append the texts after the existing texts on that document. If you face any problem then do ask through your comments. This step is necessary to host the files properly!

Now that you are done tweaking, lets see how we can actually upload files using the client.

#3: Uploading files using Tortoise SVN client:

  • Open the folder where from you want to upload the files. Now Right Click and navigate to TortoiseSVN > Repo Browser.go to the Repo Browser Enter the https URL you have noted from the step #1.Enter the URL of your repository
  • A dialogue box will prompt for your username & Password. Enter the your Google account Username and the password you have noted.
  • Now the repository browser will and drag drop the file you want to upload Make folders according to your need [Just Right Click and Create a Folder] and drag and drop the file you want to upload and click Copy Items Here.
  • Wait till SVN client uploads the files.

You are done uploading. If you have configured TSVN properly then it will upload with proper mime-type and the file is ready for hot linking. Do the following for getting the URL:

  • Left click on the file you want to hot link from the repository browser and select and copy the URL.Note the URL of the file 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.

So, that was a detail discussion on how to hot link files using Google Codes. Using this method, you can easily host your CSS and JS files for your Blogger Blog. I hope you have liked this method. Do give us your feedback on this article. Also if you face any problem or confused about any step feel free to ask through your comments.

Logo Image Credit: Thomas Hawk


  1. Neo

    Well for hosting image and css for blogger blog or hosting images this method is not needed but yah its good to know this method….

    Thanks for this nice post…gotta new thing to learn

    My recent post Home

  2. Swashata

    Yaa! But if you copy all the CSS on the blogger template then the size of every page will increase dramatically. Also, if u host like this, then the css file will be cached upon first use and the other pages will load faster!

  3. Hirvesh

    Awesome tutorial! Thanks! This is especially useful for blogger webstes, when we need to host css and js files…

  4. Swashata

    Hey I am glad that you have found it useful! Thanks for you comment 🙂

  5. GreenLava

    I'm a blogspot user, and been looking for CSS hosting for ages.
    Thanks a million!

  6. gl_gl_grace

    hi, this is a nice article, however the sub version control tool is only useful for PC users. Can you suggest some method for MAC users as well??

    Thanks and your efforts appreciated.

  7. panks

    Awesome work man.. it took me a lil while but finally i got it working on my website!!
    Thanks for all your help!!


  8. runningduo

    I am completely new to this. I am trying to setup a website for my small business. I just purchased a website template and received the XHTML, CSS, and Javascript files for it. Now, I’m not sure how to proceed. Currently, my domain is registered at Google Sites, but they do not accept CSS and JS files. I am looking for a new host where I can input these files and get the template to work. I’m not sure if this method is appropriate for my situation. I should be able to customize it myself (title, headings, text, etc.). I just do not know how to get to that point. Any help, info, or suggestions would be greatly appreciated.

  9. jv

    is this in any way illegal? 😀
    wouldn’t want to p*ss off the big guy hehe but seriously, is this method ok to use?

  10. Waqas

    you rock, I was looking for such css hosting service, no one is better and faster than google.. great tutorial , Thumbs up.

    • defencedog

      will this method work for linking these files outside blogspot domain??

  11. SportingDude

    Right on. Great tutorial. Perfect use of screen shots. Well done.

    Because GOOGLE has such a robust infrastructure, I can be sure that my hosted CSS, JavaScript and REBOL scripts shall be there and available, FOREVER!

    Thanks for this!

  12. daus

    im a blogspot user too.. hmm but the step is so hard to follow 🙁

  13. Nuar Haruha

    If u set the file’s MIME type properly, u could probably hosted almost any types of files at Googlecode (pictures/mp3/swf). But I don’t really agree with this method, sooner or later ppl will abuse it. Googlecode is for open source project. let’s keep it that way.

  14. Surendra

    hey dude thanks for your help…
    with your helping instruction I have competed my contact_us form and I have uploaded my css file in my project.
    once again thanks.

  15. zaki

    hello you!
    first; i am zaki from algiers i have a question
    i have a question
    how can i build my own audio player with my logo …
    and iclude it to blogger
    please answer me!

  16. Pingback: 8 Css Hosting Sites | Best Hosting Companies

  17. Andrew

    Great worked a treat thanks. One thing however I tried to upload gif images my CSS sheet was using and for some reason it will not reference them.

    In my file for CSS in the trunk I modified it to point to a child directory of that directory using:

    background-image: url(“svn/trunk/CSS/images/bg_tile.gif”);

    Initially it never had quotes round the url so I put them in as I thought all url’s should have them but this never worked either. Previously my page used this background image fine from the style sheet but not now after going to SVN repository. Am I pointing to images wrong?

    • Swashata Post author

      It should be relative to the CSS file path. Say it is in svn/trunk/CSS/style.css and your image URL is as above. Then it should be

      background-image: url("images/bg_tile.gif");
  18. Chris

    I’m late to the party. Is there a way to change the mime type after the css has already been uploaded to google code?

  19. Rafi

    Thanx for posting a nice tutorial. now i can hos static html page on google hosting project

  20. Rafi

    This was very hard and difficult tutorial. How ever now i can host static html page on google code

  21. vacante

    TortoiseSVN can be installed only on Windows XP Service Pack 3.
    I have SP2: can you suggest another client or an older version that will work for me? Thank you.

    • Swashata Post author

      I really don’t know. I am using linux now a days, and I don’t have to use such program anymore 🙂

  22. Yan

    Wow, thanks so much to this! After all the search, it’s finally over!

Comments are closed.