Skip to main content

How to Host Websites on Google Drive

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”.

google-drive-publish-1

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.

google-drive-publish-2

4. This will open the Share settings page, with a link to the shared folder. Copy this link to your clipboard.

google-drive-publish-3

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.

google-drive-publish-4

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.

Comments

  1. And you can shorten these URLs using gdriv.es!

    ReplyDelete
  2. Nice post. Trying some stuff with it.
    One question : how do you link files inside your html like css files or images ?

    Thanks

    ReplyDelete
  3. To link files use relative URL such as /images/picture.jpg

    ReplyDelete
  4. i do not seem to get this working
    i 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

    ReplyDelete
  5. the address is

    https://googledrive.com/host/0BzO_dzKYET9AdUI5aFBLOFlKWWM/

    thx for your help

    ReplyDelete
  6. You seem to have nothing on the url. Google shows a blank folder.

    ReplyDelete
  7. When i open in google chrome it gives the folder but not the simple index.html i putted in the folder

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.

Diagram 101: Different Types of Diagrams and When To Use Them

Diagrams are a great way to visualize information and convey meaning. The problem is that there’s too many different types of diagrams, so it can be hard to know which ones you should use in any given situation. To help you out, we’ve created this diagram that lays out the 7 most common types of diagrams and when they’re best used: