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 google codes and creating 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!
#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.
use 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.
No comments:
Post a Comment