mercredi 20 octobre 2010

How to host files on Google (javascript, css, html, ...) and get a permanent, non-redirecting and bandwidth-generous hotlink

What is the point of hosting such files on Google and not on another server?

I think this question needs no response, the purpose is to take advantage of the very generous bandwidth of Google to display our html or our images, to load our scripts or css stylesheets.
After a long search for the miraculous solution, and after having tested everything: Google sites, Google docs, javascript and css encapsulations on images, ...etc I finally found the ultimate solution.

In fact the two solutions Google sites and Google docs are not permanent, since the links to the files change from time to time, such that we find ourselves forced to update the source code of our site each day! Also, the links used make redirections, which translates into a larger load times for our pages.

The solution of encapsulated script (hidden) in an image is also not very clean, in fact I noticed a big slowdown in the browser when evaluating a heavy script with eval() function.

The final solution is to use Google Code to store files and get a direct link (without redirection, permanent, and mainly mime-typed ). Here's how it can be done:

  1. Create your Google Code project:


    Go to http://code.google.com/hosting and click Create a new project, give a name, a summary and a description to the project, then choose Subversion in Version control system and anything in Source code license then click on Create project button, once the project is created, you will find yourself in the Project Management page, go to the Source tab and note the link of the project directory, it will look like this: https://ubugnu.googlecode.com/svn/trunk/ and will be next to svn checkout.
    To be able to put files in that directory you will need a password (otherwise anyone can tinker with your project), to get the password click googlecode.com password just below the link, note also that password.

  2. Connect to the project via svn and host files on Google by synchronizing the project directory with a local directory


    We will need the subversion package, install it with:
    ubugnu@ubugnu-laptop:~$ sudo apt-get install subversion
    Once the package is installed, here is what we'll do: Create a local directory which will be an exact copy the project directory and which you can synchronize at any time, ie edit the files locally, then synchronize the files so that Google files are also modified. That's how you create a copy of the project directory:
    ubugnu@ubugnu-laptop:~$ svn checkout "https://ubugnu.googlecode.com/svn/trunk/" ubugnu
    This command will create a directory called ubugnu which is an exact copy of that which is on the server, and as it is empty, my local directory will also be so.
    We will add a file (eg javascript) in our local directory then "spread" the change to the Google server, for example:
    ubugnu@ubugnu-laptop:~$ cd ubugnu
    ubugnu@ubugnu-laptop:~$ touche test.js
    ubugnu@ubugnu-laptop:~$ cp /var/www/test.js ./test.js
    ubugnu@ubugnu-laptop:~$ svn add ./test.js
    We will need to link to svn a text editor, nano would be best suited:
    ubugnu@ubugnu-laptop:~$ export SVN_EDITOR=nano
    You can put your favorite editor instead of nano (eg gedit)
    Now that our local directory ubugnu has been changed, one must propagate this change to the server with:
    ubugnu@ubugnu-laptop:~$ svn commit ./test.js --username ubugnu
    I put my Google nickname (put yours, it is the one contained in your gmail email address)
    A page will then appear in the text editor that you previously selected, save (Ctrl+o) and quit (Ctrl+x), then type the letter "c" (continue to) in the terminal and press enter.
    The terminal will then ask you the password of the administrator (root), type it, then it will ask for the password to access the project directory on Google, type the one you noted earlier and submit. Bravo, the file has been placed on the Google server.
    To check, click the Source then Browse and finally Trunck links, you'll see the file test.js, click it, then in the page that appears click on view raw file at the bottom right. The link you get is the one you can use in your source codes, it is quick and permanent.

    Go back and notice that the MIME-type file is text/plain (below view raw file) that is plain text, which is not a problem for a javascript file but can affect interpretation of other extensions (css for example)

  3. Changing the mime-type of files depending on their format:


    So as I said, mime-type can be problematic when it comes to files for which the browser checks the mime-type, try for example a css file on the server and include it in a page you will see that it will have no effect (it will not be interpreted) because its mime-type is the default text/plain, so we must change it.

    For our example, we will not use a css file but an html file, create an html file locally and put in a little html code:
    ubugnu@ubugnu-laptop:~$ touch test.html
    ubugnu@ubugnu-laptop:~$ nano test.html
    And put
    <html> 
    <body>
    <h2>it works</h2>
    </body>
    </html>
    Now we propagate the change with commit
    ubugnu@ubugnu-laptop:~$ svn commit ./test.html --username ubugnu
    We go as earlier to Source::Browse::trunck and click on test.html, then on view raw file and we note that the page appears in source code, meaning that the browser has not parsed the html code, simply because it considers the file as raw text because its mime-type is text/plain.
    Here is how to fix this:
    ubugnu@ubugnu-laptop:~$ svn propset svn:mime-type text/html ./test.html
    then propagate againe
    ubugnu@ubugnu-laptop:~$ svn commit ./test.html --username ubugnu
    Refresh the page test.html, you will see that the code is now parsed (Here is an example) :-)
    if we had wanted to host for example a css file, it should have been
    ubugnu@ubugnu-laptop:~$ svn propset svn:mime-type text/css ./test.css