Wednesday, December 12, 2012

Using Google Drive As A Web Host

Okey, another one of my experiments. I came to know a few days ago that Google officially announced how you can now use your Google Drive account as a web host.

So, I decided to make use of this awesome new feature and tried to create and host my profile on Google Drive itself. In this post, I am simply going to tell you what you need to do to get up and running with Google Drive as your web host in its simplest form.

Things that you need to do to setup Google Drive as your web host


  1. Go to Google Drive
    Of course, you gotta have a Google account to begin in the first place and then just type in drive.google.com

  2. Create a public folder
    This is important. If you want to use Google Drive as a web host, you need to keep your files in a public directory. Create a new folder and then simply choose the 'share' button and give it public access. Lets assume my folder is called 'ryan'

  3. Dumping your static files
    Lets say that your site has a lot of html pages, css stylesheets, jQuery, javascript, images - the usual stuff. Just add all your files in the same directory structure in which they are present in your local system to the public folder that you just created. So, all my files are dumped into the public folder called 'ryan' in my google drive.

  4. Naming convention
    Ensure that at least one file in the public folder is named as index.html. This will act as the landing page for your site.

  5. What to publish
    Now comes an important step. In order to share your site, you need to share a link to the public folder. Initially I thought that you would need to share the link to the index.html but that did not work as expected.
    So what you need to do is,  note the google drive file-id of your public folder. To do that, just open your public folder in google drive. By default it lists all the files in that folder. In the url at the top, you will see that it contains a long string of garbled aphanumeric characters after the last slash. That is your folder id. Copy it.

  6. Creating a url to publish
    Now all you need is a url that points to your folder. To create your url, simply append the file id to the following string - http://googledrive.com/host/

    For eg. The raw link to my profile on google drive is http://googledrive.com/host/0B87xZT3F0rDcZlVONVRVY3QtZFE



And that pretty much does it. Clicking on the above URL serves the index.html page of your public folder. 


Other Tips

  1. If you want to use a neat little name instead of the long string of garbled alphanumeric characters that appear at the end of the url, go to Gdriv.es and convert your folder id custom name. That's what I did for my profile, and now it looks like this - http://gdriv.es/ryansukale. Much more neat i'd say.
  2. Sometimes its just easier to download Google Drive for the desktop, edit your files right in your local machine and then watch them automatically get uploaded.
  3. When multiple pages are interlinked, I have observed that the url in the address bar remains the same. So, I guess bookmarking will be an issue in this case.


Signing Off 

Ryan

6 comments:

CH said...

Hi Ryan,

I tried to insert a simple javascript into the index.html... But there is no response to the javascript.

Please help...

Thanks.

Unknown said...

Could you post your javascript or link me to your page so that I can take a look?

niu tech said...

Thanks for mentioning gdriv.es!

Anonymous said...

Nice tutorial. I'll add that I had to change drive.google.com as I cut from my folder to googledrive.com to get it to work.

Anonymous said...

A real wonderful tutorial, you saved me from a lot of work of post data to my site. Now, I just use the shared folder to and all that is uploaded there, just pops up as the content of my website. well, It may or may not be picked up by the bots... I am keen on knowing of it.. Any ways thank you ryan....

Unknown said...

Thank You Ryan for GREAT post. I did everything, but "google maps" is NOT showing, and some other scripts. Please help.