Pages

Saturday, November 2, 2013

How to Host your Websites on Google Drive

If you are looking for a place to quickly host your websites but don’t have access to any web server, Google Drive is a great alternative. You can use Google Drive to host basic websites or even complex JavaScript based web apps. You may publish any kind of static content* on your website including HTML pages, images, CSS, icons, audio and video files.
Google Drives serves your website over HTTPS and thus can be be used for hosting custom Facebook Pages since Facebook requires that custom pages are only served over secure HTTP.

How to Host your Website on Google Drive

The official procedure for hosting websites on Google Drive involves a couple of steps.
You need to upload your website files to a folder inside Google Drive, set the sharing permissions of that folder as public, open the index.html file that you uploaded in the Google Docs viewer and then click the “Preview” link to get the URL of your website.
The process may not be complicated but a little time-consuming for sure. There’s a better way though that will let you publish your websites on to Google Drive in a single step.

From your computer to Google Drive in one step

Just put all your website assets in a zip file (you may use this sample website) and then click here to upload that zip file to your Google Drive. Once the file has uploaded, the tool will generate the public URL of your website in the same step. Isn’t that simple?
Internally, this little Google Script is doing all the hard work for you. If you are using the tool for the first time, you may have to click the “Authorize” button since the script needs your permission to upload that zip file to your Google Drive.
There are a few things you need to know before hosting websites on Google Drive. One, you need to have an index.html as that file will be served when someone tries to access the homepage of your site. Second, 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. There’s a workaround though.

Public Google Drive Websites with different Web Domain

I’ll show an example here. This website is hosted on Google Drive and here’s thesame website but hosted on a different web domain. The trick is easy – you just have to wrap your Google Drive website URL inside an IFRAME tag as shown in the following snippet:
  1. <html>
  2. <head>
  3. <style>
  4. body { margin:0; padding:0; }
  5. iframe { position: absolute; height: 100%; width: 100%; }
  6. </style>
  7. <title>Google Drive Website</title>
  8. </head>
  9. <body>
  10. <iframe src="https://googledrive.com/host/ABCD/" frameborder="0"></iframe>
  11. </body>
  12. </html>
The height and width attributes of the IFRAME tag should be set to 100% for the Google Drive website to occupy the entire screen. The only downside is that the URL in the address bar won’t change if you open a different page of the website since you are now browsing inside an embedded page. 

No comments:

Post a Comment