Wednesday, June 5, 2013

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.

7 comments:

  1. Sad that they wouldn't currently support "referenced" .js I don't like the idea of dumping a bunch of js into the page...and going trough the "app" process is a headache... but hey can't complain for a free tool that helps me keep at least some of my code handy.

    ReplyDelete
  2. But you can do all that in blogger too, Flash and all?!!?!

    ReplyDelete
  3. Obrigado Esta informação foi muito útil para mim.

    ReplyDelete
  4. dear,
    friends
    There are many key points to remember when making the right choice for your Branson web designer. These apply to all businesses who are currently seeking a web designer for their new project.
    see more details:web site design Massachusetts

    ReplyDelete
  5. Best web hosting and domain reviews and deals in one place!
    dns domain

    ReplyDelete
  6. dear,
    friends
    There are many key points to remember when making the right choice for your Branson web designer. These apply to all businesses who are currently seeking a web designer for their new project.
    see more details:web design Massachusetts

    ReplyDelete
  7. Thank you for sharing the information. On availing of the GeM registration, you can take the benefits of smart trade and commerce offered by the government.
    Gem Helpdesk
    Gem Consultancy in India

    ReplyDelete

Thank you for taking the time to read and post a comment on my blog!
Chad