Host Your Website on Google Drive

Posted on July 13, 2013
Plenty of things you can do while you do have one Google account. Having Google account gives you a complete cloud infrastructure, known as Google Drive. The core advantages of using such cloud services are anywhere accessibility of your stored documents and media, collaborative work, cross platform availability and easy sharing to the world.

Google Drive Image
 
Google Drive offers one exciting feature called, web hosting! Yes, you read it right. You can store your complete a web site or an HTML page built using javascript and css files. Above all, it's free!

This is useful for web developers like me who frequently need to demo to their clients. However, it should not be considered as a comprehensive web solution to host a website. It is useful for the "short lived" events like invitations and prototype presentations of the projects on which you are working. Check this live demo page I created and hosted on Google Drive.

Learning how to host a website over Google Drive requires 3 easy steps. The steps can be summarized in 3Ps - Prepare, Put & Publish.

Lets see each of them one by one here below.
  1. Prepare

    Prepare all your HTML files and their related images, javascript and css files, if any, in a single folder. Keep paths relative for all javascript, css and image files. Let say you are keeping all your image files under image folder, javascript files under js folder and css files under styles folder. In that case your relative paths will look like following.

    <img src="images/googledrive.png" width="100%">
  2. Put
    Once you are done with preparing your website or webpage in a separate folder upload the same to your Google Drive account. There are two ways to upload folder in to your Google Drive.

    If you've installed Google Drive on your desktop then simply put the website/webpage folder in your Google Drive folder.

    In case, if you don't use Google Drive desktop then use Google Drive website. To upload the folder login into your account and hit the upload button beside the Create button on left side.

    Upload folder on Google Drive
  3. Publish

    Up to this step only you can view the HTML pages you uploaded but not the world. To make it available to the world you've to change the sharing permission settings.

    Select the folder you just uploaded and hit the Share button.

    Share Folder On Google Drive

    In the Sharing Settings window, change the access permission by hitting Change link.

    Access permissions on Google Drive

    You will be prompted for Visibility Options, change the option to Public on the web from Private.

    Visibility options in Google Drive

    You're all set for your first Google Drive hosted website. Now, open the home page of your website in the google drive website generally home page named as index.html. Google Drive will open your page in a lightbox. Hit the Open button in the bottom of the lightbox.

    Open button in Google Drive

    Once the page loaded, hit the Preview button from the toolbar. It will take you to the live webpage.

    Preview button in Google Drive

    That's it! You will see a url that looks like https://googledrive.com/host/... in the address-bar. It is your first Google Drive hosted website's live url and you can share it to the world, Cheers!

    Live url of your hosted page on Google Drive
Hope you will find this useful. I would be happy to see your website hosted on Google Drive, leave it in the comment section if you got one!


See also: