March 28, 2013

How to Host a Website on Google Drive

How to host a website on Google Drive

Recently, Google added an exciting new feature to Google Drive — web hosting! Now you can build a website with HTML, CSS, and JavaScript files inside your Google Drive account. And did I mention that it's free? Yep, it's just one of the little perks that comes with a Google account.

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

As you can see from the lengthy, unmemorable URL of my demo site, Google Drive isn't an ideal hosting solution for your main web presence, but it's great for experimental or "limited time" sites, like event invitations or temporary promotions.

This tutorial is meant to show you how to use Google Drive for hosting, so I'm not going to cover how that demo page was designed. But, you're welcome to use its HTML & CSS for your own project if you like.

What You Need to Use This Tutorial

  • A Google account — Drive is included!
  • A plain text editor or an HTML editor (like Dreamweaver)

That's it for materials! To make use of Google Drive hosting, you should also know how to make a basic HTML website.

Step One: Prepare Your Files

At the bare minimum, to host a site on Google Drive you need to create a public file folder and put an .html file inside it.

As you write your site's HTML, you can use relative paths for your images, CSS stylesheet, and JavaScript (if any).

Your relative path to a file within the same folder as your .html file is just the file's name. Like this:

background-image: url(handmadepaper.png);

If you're building something a bit more complicated, you may want to organize your files into image, CSS, and JavaScript folders to keep things tidy. Your relative path to an image in a separate folder would look like this:

background-image: url(images/handmadepaper.png);

If you're using any external files in your website, like a JavaScript library or a web font hosted elsewhere, link to the secure version of that file (if possible). Google Drive sites default to https, and if you have any insecure links your visitors may get security warnings when they visit your site.

Step Two: Add Your Website to Google Drive

There are two ways to add your site to Google Drive; if you use the desktop version of Google Drive, just move your site folder into your Google Drive folder, then go to Step Three.

If you don't use the desktop Drive, you can upload the folder through the Google Drive website. The fastest way to upload a folder to Google Drive online is with the Chrome browser, since Chrome allows you to upload whole folders.

To add your website through the web interface, log in to drive.google.com. If you're on Chrome click the arrow next to the "Create" button. Then, upload your whole website folder.

If you're not on Chrome, click the "Create" button first to make a new folder within your Drive. Open that folder, then click the arrow button to upload each of your files into that new folder.

Step Three: Make Your Site's Folder Public

Once you've got your website's folder in Drive, you're just a few clicks away from publishing!

Go to the Drive website and click the checkbox next to your folder's name. Click the "Share" button above (it looks like a person with a plus sign next to their head).

On the next screen, under "Who Has Access", click the "Change" link next to the default "private" setting.

On the next screen, set the "Visibility Options" radio button to "Public on the web", then press the green "Save" button.

Step Four: Get Your Page URL

Once your website's folder is public on the web, you're ready to get its shareable URL. Go into your website's folder through the web-based Drive interface and click on your index.html file. Drive will open the file in a lightbox screen. Click the "Open" button at the lower right corner of the screen.

Once your file is open, click the "Preview" link near the top of the screen.

The preview link will take you to your live page. The URL in the address bar is your new site's URL. You can share that link with anyone and they can go check out your newest web creation!

Show Me Your Site!

I'd love to see what you do with Google Drive hosting! Leave a comment, Tweet me @MMosley, or get in touch on Google+.