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 (try Brackets if you don't already have a favorite.)
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.
Your relative path to a file within the same folder as your .html file is just the file's name. Like this:
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!