Host a static website on Google Drive (in 5 easy steps)

You need to host a static website but don't have the time, money or resources to set up a web server.  Perhaps you're learning to code or just doing a demo. Here's a way to set up a web site at no cost, in just a few minutes.

Step 1. Create a new folder in Google Drive.

From Google Drive, Click 'Create', select 'Folder' and enter the folder name.
(I chose 'hybrid' for this example, but you can choose anything you want).

Step 2. Share the folder.
First select the folder you created (displayed in the folder list), then click the sharing icon.

In the Sharing Settings popup, go to the 'Who has access' section and click 'Change'

The Visibility options pop up will appear. Change the Visibility option to 'Public on the web'. 

Although set by default, make sure that 'Access' is set to 'Can view'.

Click 'Save'.

The folder is now shared. Click Done.




3. Upload your web content.
Open the folder and drag/drop your web content into the folder.
You can upload HTML, JS, CSS.  (I'm sure you can try media files as well but I haven't).

(Note: I have used Hakim El Hattab's Stroll.js CSS experiment for this example. You can find the original content at http://lab.hakim.se/scroll-effects/ ).

Double check that the files are also publicly viewable.

4. Create your site URL.
Your Google drive folder is accessed using a specific URL. The site URL has the following structure:
Google Drive host / folder ID / your web page.html

First get your folder's unique identifier. Look in your browser address bar, the URL will end with a long unique string after the last "/".

Copy that long string.  Based on this information, we have:

Google Drive Host: https://www.googledrive.com/host/
Folder UID: 0B8SIN8IVD8DGRFByVGZ0Vjdfcnc    (** yours will be different)
Web page: index.html (this is the name of your web page)

Open up your favourite browser and enter the following URL (use your folder UID and web page name)

https://googledrive.com/host/0B8SIN8IVD8DGRFByVGZ0Vjdfcnc/index.html

Your web page should now display. Yay !! Almost there.

5. Make the URL a friendly one.

That URL is a little long - so the final step is to use a URL Shortener such as bit.ly or goo.gl

Copy your URL and enter it into your chosen URL shortener. Once converted you will have a short and simple URL such as http://bit.ly/1kCcqsO or  http://goo.gl/69KvBD

Enjoy !!