When you need to whip up a quick website, maybe to show to a client or make an example, there are a few options. You can already host websites on Dropbox, Amazon S3 and Google App Engine, even though these services were not meant to be used as a publishing platform. Last week Google announced that it is now possible to host HTML/CSS websites on Google Drive as well. Google Drive site publishing also supports JavaScript, so it's even possible to run a JavaScript Drive app directly from Drive. This short tutorial will show you how to host a simple website on Google Drive.
1. Go to https://drive.google.com and create a new folder. To do this click on the big red “Create” button and from the dropdown menu click on “Folder”.
2. Name you folder. It doesn’t matter what name you use because the name will not appear in the URL of the website.
3. Right click on the newly created folder, and from the context menu click on Share > Share. You can access this same menu from the “More” button at the top of your Google Drive page, once your folder is selected.
4. This will open the Share settings page, with a link to the shared folder. Copy this link to your clipboard.
The folder is currently private. You will have to make this public if you want to host a website accessible to all. Click on the “Change” link as shown above.
5. On the next pop-up window, choose the desired option. I’ve chosen “Public on the web” but you can also choose “Anyone with the link” if you wish to share the website only with a selected group of people. Be aware, that anyone can view this website if they have the link and no Google sign-in will be required.
6. Open your folder, and upload the contents of your website – HTML pages, CSS files, images and JavaScript.
Remember the share URL you copied to the clipboard? Oh, you didn’t. Don’t worry, you can return back to the drive listing and get the URL again from the Share context menu item.
The share URL looks like this: https://docs.google.com/folder/d/0B2TgmhltmR2FVZnN5aGttQU0/edit
The part highlighted in bold is the ID of the folder. You take that ID and turn it into this:
https://googledrive.com/host/0B2TgmhltmR2FVZnN5aGttQU0
That’s the URL to your website. Granted, it doesn’t look pretty and there is no way to add a custom domain to it, but you can always use a short URL service to shrink the URL.
You will need to have an index.html file in the folder for the website to display properly, otherwise Google will simply display a list of files in the folder.
To see Google Drive site publishing in action, check out this example site served from Google Drive at https://googledrive.com/host/0B716ywBKT84AcHZfMWgtNk5aeXM.
Cool!
ReplyDeleteGreat!
ReplyDeleteAnd you can shorten these URLs using gdriv.es!
ReplyDeleteThose gdriv.es URL would look great!
ReplyDeleteNice post. Trying some stuff with it.
ReplyDeleteOne question : how do you link files inside your html like css files or images ?
Thanks
To link files use relative URL such as /images/picture.jpg
ReplyDeletei do not seem to get this working
ReplyDeletei use google chrome
made a very simple index.html file
when i go to the webadress ,internet gives me the file but nothing is published
What's the address?
ReplyDeletethe address is
ReplyDeletehttps://googledrive.com/host/0BzO_dzKYET9AdUI5aFBLOFlKWWM/
thx for your help
You seem to have nothing on the url. Google shows a blank folder.
ReplyDeleteWhen i open in google chrome it gives the folder but not the simple index.html i putted in the folder
ReplyDelete