Google Drive: Publicly hosting a static website

April 1, 2015

I frequently need to demo work in progress web sites and web apps to people I’m working with. I was looking for the most convenient way to do this and found that Google Drive was a good fit to letting me publicly share web development projects.

Google Drive provides an easy way to store and share documents in the cloud. The Google Drive desktop app also conveniently keeps a folder on your machine in sync with your online Google Drive folder in the same way Dropbox does. This post explains how to use Google Drive to publicly share a folder that contains a static website from your machine.

Publicly sharing a Google Drive folder as a website

First visit your online Google Drive folder at https://drive.google.com then:

1. Create a new folder e.g. called Public.

2. Right-click on the new folder and select “Share…”.

3. Select the “Anyone with the link can view” permission for the folder.

4. Take note of the sharing link that is display. It will look something like this https://drive.google.com/folderview?id=FOLDER_ID&usp=sharing where FOLDER_ID is a long string of text and numbers.

5. Save the updated folder permissions.

6. Copy your website files into your new Drive folder. One way to do this is to drag and drop the files into your browser. Another way is to copy the files into the local Google Drive folder that corresponds to your new public Drive folder and waiting for the Google Drive desktop app to sync the files.

7. If you now visit http://googledrive.com/host/FOLDER_ID/ in your browser, the index.html page in this folder will be opened as a web page. If you want to open a specific page within the folder such as one called example.html, use the URL http://googledrive.com/host/FOLDER_ID/example.html.

Publicly sharing multiple websites easily using Google Drive

Instead of having to go through this every time you want to share a new website with someone in the future, a simple approach is to use subdirectories within a single publicly shared folder:

1. Create and publicly share one Google Drive folder called Public as described above.

2. To share a new website, create a folder under the Public folder such as one called website1, copy the website files into this folder and then use a URL of this form to share the website: http://googledrive.com/host/FOLDER_ID/website1/

Conclusion

With the above system set up, you can now conveniently share a static website with somebody by copying the files to your local Google Drive folder and emailing a link. When working in remote teams, this can be valuable for quickly demoing and getting feedback on iterative changes being made to a work in progress site.