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
Thanks .. it worked like a miracle.
Hi
followed the steps – this was a great hlp
Maggie
I hosted with github and linked the css file in my html website but it doesn’t work. Please help. (Used raw link )
thx, good post
PD: sorry my poor english, but css file no conect o syncronize with google code with my blog (google blogger), why that suced, thx in advance!
Thank you very much for writing this. I was trying to host my code on google drive and dropbox, then link to it that way. i did not realize there was more to it than that.
Good post!
I want to use it as my web server in facebook. But there’s a problem that the facebook request my page in a form post. Like this:
document.getElementById(“canvas_form”).submit()
And the google server responds with the following message:
Method Not Allowed
The requested method POST is not allowed for the URL /svn/index.html
Any solution?
The concept is to use static files not something which will POST data.
thank’s it’s really help me 😀