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 http://code.google.com 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.
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 this
… - Note down the URL of the svn checkout and then click on the googlecode.com 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.
This will pop up the settings page. - Now click on the “Edit” button.
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.
[miscellany] enable-auto-props = yes [auto-props] # 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/vnd.ms-powerpoint *.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/vnd.ms-excel *.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.
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.
Enter the https URL you have noted from the step #1.
- A dialogue box will prompt for your username & Password. Enter the your Google account Username and the googlecode.com password you have noted.
- Now the repository browser will open.
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.
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
Swashata has written
Hey there! This is the place where I write about the technologies I understand. Personally I'm a geek and professionally Web Developer. You can also check my other site to get to know about my other hobbies ;)
Swashata has another home at http://www.swashata.com/
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
TC
My recent post Home
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!
Very true! Great tutorial ! Thanks a bunch
::
Regards
%nDr3$
A.
Awesome tutorial! Thanks! This is especially useful for blogger webstes, when we need to host css and js files…
Hey I am glad that you have found it useful! Thanks for you comment
thanks now i host my files on google only
My recent post VLC Media Player version 1.1 will get extensions support
Nice article. I also using ” target=”_blank”>http://www.yourjavascript.com to host my .js files. Their network is fast.
EDITED BY ADMIN => Removed Link to a pornographic website
Nice article. I also using ” target=”_blank”>http://www.yourjavascript.com to host my .js files. Their network is fast.
EDITED BY ADMIN => Removed Link to a pornographic website
I'm a blogspot user, and been looking for CSS hosting for ages.
Thanks a million!
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.
I'm wondering if its OK to host such files on google code? After all, the individual files are just files, not a complete open source project.
My recent post Can You Install and Run Ubuntu on Microsoft Virtual PC 2007?
Awesome work man.. it took me a lil while but finally i got it working on my website!!
Thanks for all your help!!
Panks
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.
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?
you rock, I was looking for such css hosting service, no one is better and faster than google.. great tutorial , Thumbs up.
will this method work for linking these files outside blogspot domain??
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!
SportingDude recently posted..\
im a blogspot user too.. hmm but the step is so hard to follow
daus recently posted..Spectacular Blogger Template
can i know the html code? ..
daus recently posted..Spectacular Blogger Template
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.
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.
I followed your tutorial and uploaded an html file but when I open it, it shows all html script not the page. please help me. what mistake i have done please check it at.
http://wigets.googlecode.com/svn/zico/Bloggingxray.htm
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!