Host Webpages On Google Drive

You can now host Webpages and Gadgets on Google Drive and in Drive you now have the option to edit and create the files directly in Drive .

Announcement: This will not be available after August 31, 2016
You can continue to use this feature until August 31st, 2016, but after that, googledrive.com/host/ID will no longer work.

 Google cloud platform is available. There is a free trial available.  See 


Drive is a great place to store HTML, JavaScript and Gadget XML files so they are safe, available from anywhere, and easy to work on with others. Note: Since hosting these files in Google Drive is being discontinued  I recommend using DropBox instead. You can also host your XML files in a file cabinet page in a Google site.  HTML files will have to be converted to gadgets.  See THIS SITE

The HTML for the examples below are hosted on Google Drive and inserted using the "Include gadget (iFrame)" gadget.

Google's Help Page is HERE

You can also use DropBox for this purpose and personally I find it easier. See this page.

First Letter Big

You used to be able to do this in an HTML Box but that isn't working now.
You can put the code in an html page and host it in Google Drive or Dropbox. Note: hosting in Google Drive is going away. Most of these examples will be hosted in DropBox instead.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<p><span>T</span>he first letter in this paragraph is styled with CSS</p>
</body>
</html>

Expand Text



YouTube Playlist



Tip Of the Day


Music Player

Find the code for your music player (look at the source code in a site or search Google for HTML Music Player)
Make an HTML page using your code.
Upload it and your music to a public Google Drive folder.
Embed it into your Google Site using the include iframe gadget.

NOTE: IE will not play.WAV files, MPG and OGG fies work.

HTML:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 1//EN">
<html>
<head>
</head>
<body>
<audio src="https://googledrive.com/host/0B28Gtf1n8u8DUWtCRHR4RXBjaVU/02%20-%20Blood.mp3" controls>
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
</body>
</html>


Google Fonts

  The default that Google Fonts gives is "http://". Change it to "https://" to prevent browsers from giving a security warning:

<link href='https://fonts.googleapis.com/css?family=Tangerine|Lobster' rel='stylesheet' type='text/css'>


How to do it

Create HTML page: If you have code you want to make into an HTML page the simplest thing to do is to preface the code with "<html><body>" and add "</body></html>" at the end.

Google Sites Help Page: Host webpages with Drive
Note: Hosting these files in Google Drive is being discontinued so I recommend using DropBox instead.
  1. Make a public folder in Google Drive
  2. Upload your HTML file to it
  3. Select the file.
  4. Click the Share button at the top of the page.
  5. Click Advanced in the bottom right corner of the sharing box.
  6. Click Change....
  7. Choose On - Public on the web and click Save.
  8. Before closing the sharing box, copy the document ID from the URL in the field below "Link to share". The document ID is a string of uppercase and lowercase letters and numbers between slashes in the URL.
  9. Create a URL that looks like "https://www.googledrive.com/host/[doc id] where [doc id] is replaced by the document ID you copied in the previous step.
  10. To insert it into a Google Site use an iframe gadget* and configure it with the above url like https://www.googledrive.com/host/0B28Gtf1n8u8DX0NiNnoxYzJZM28/
   *Iframe Gadget: Insert>>More gadgets. Search for "iframe"


Instructions for Gadgets


Note: The Google Gadget Editor (GGE) is gone. See this page.