Hosting HTML, CSS, and Flash websites in Google Drive

Earlier this year I discovered a hidden gem in Google Drive. Using a few steps, it is now possible to host a website within Google Drive. As a web design teacher, this is a great feature for my students. Now, with Google Drive, students can upload completed products and provide a link for their live website to anyone. And, using a tool like gdriv.es, they can create a website alias that is easy to share.

So far we have found that this service works best with HTML and CSS pages. It can also work with embedded javascript, though we occasionally have some problems when trying to use tools such as jquery. One feature I love is that it can store and properly load Flash files. A free host for Flash! Bonus!! Just follow the steps below...

Steps

Once a website is completed, follow these steps to bring it to the world. Note, this process will create a completely public facing website; there is no other option.

1. Upload an entire website folder. This only works in Chrome, or using the Google Drive desktop agent. The website must be within a folder because the folder is where the website is 'hosted'.
   
   
   
2. Share the entire folder as 'Public on the web'. No other setting will allow the 'Preview' button to work.
1. Check the box to the left of the folder 
2. Click on the Share (person with a plus) icon
3. Change the privacy setting by clicking 'Change'
4. Choose 'Public on the web' > Save > Done
   
3. Open the folder on Google Drive and open the homepage. This will display the code in a preview screen.
   
4. Click the blue 'Open' button on the bottom right. This will open the code into a color-coded previewer.
   
5. Click the 'Preview' button on the menu bar. This will preview the page as a website.
   
6. Copy the URL from the newly displayed webpage. This URL can be shared with anyone in the world for access to the website.
   

View an example of this tool in action with a portfolio of Flash projects hosted on Google Drive for an annual art gala.

If you want to include Flash files in your upload, you must be sure to publish both the SWF file as well as the related HTML file from Flash. Once this is done, it is a breeze to follow the steps above and get it fully functional.

Do you have any additional tips and ideas? Comment below or send them my way!

---

Chad McGowan is a high school technology teacher and professional development specialist in educational technology. Over the past 16 years, Chad has taught a variety of math and computer courses for grades 7-12. Since 2000, Chad has been guiding other professionals, pre-k-12, in educational technology. Follow Chad on Twitter @ahstechteacher and through this blog.