Monday, November 25, 2013

How to Host a Website or File on Google Drive

Host a Website or File on Google Drive

Google added an impressive feature to it's Google drive - file or web hosting. Developers can now host their website in Google drive by uploading and sharing HTML, CSS or JavaScript files.

Do you have a presentation or a complex JavaScript based web apps you want to showcase? Then, you can take the advantage of Google free CDN service. Google has several servers across the globe and we can be sure that a file downloaded from Google server will be much faster compare to our shared hosting server. But there's a little drawback. Google Drive websites have a URL structure like googledrive.com/host/ and there's no way to change the default URL.

For instance, if your are hosting a website on Google Drive but wish to serve it under your own custom domain, that's not possible yet unless you wrap your Google Drive website URL inside an iframe tag as shown in the following snippet:

<html>
 <head>
  <style>
 .body { margin: 0; padding: 0;}
 .iframe { position: absolute; height:100%; width:100%;}
 </style>
 <title> Google Drive Website </title>
 </head>
 <body>
 <iframe src = "https://googledrive.com/host/FILE-ID/" frameborder= "0"></iframe>
 </body>
 </html>

You can see a live demo of a static webpage hosted on Google Drive here.

This guide assumes you already have some HTML content you'd like to publish. Now let's get these done.

  1. Login to drive.google.com
  2. Select Create > Folder

    Host a Website or File on Google Drive
  3. Give your folder any title you like
  4. Now that a new folder is created. Select the check box next to the folder
  5. Select the Share settings icon

    Host a Website or File on Google Drive
  6. In the next pop up window, click on "Change" under "Who has access" section.

    How to Host a Website or File on Google Drive
  7. Make your folder "Public on the web", Save your changes, then click Done.
  8. Open your newly created folder and you can see it's empty. It's time to upload your files.
  9. Click the "Upload" icon, then "Files"

    Host a Website or File on Google Drive
  10. Open your uploaded file and click the "Open" with Google Drive Viewer button below the page.

    Host a Website or File on Google Drive

    Click "Preview". The string of characters after "host" in your address bar is your page id. You can share the page URL with anyone.

    Host a Website or File on Google Drive

As the owner of the account, you can access (and edit) your files via http://drive.google.com/page-id
Visitors can access it via http://googledrive.com.com/page-id