How To Serve HTML and JavaScript enabled Web Pages via Google Drive

Yes, you read the headline right. You can host your HTML websites with Google Drive!

I'm not sure if any of you have attempted to upload HTML files on their Google Drive (only to end up seeing the source code instead of a web page) but it is actually possible to use Google Drive as your web server. There are just some tweaks you need to do in order to make it work and don't worry they are not very technical.

If you are a teacher handling basic web design and development, this is revolutionary as your students will be able to see their outputs live on the internet and even share it with their parents or friends without having to pay for monthly hosting. If you remember Geocities before, this is a very good alternative. Novice developer for family sites can also use this feature.

Below are the steps on how you can host HTML pages in Google Drive:

There are only 2 things you need to remember in order for your websites to show up on the internet. First, all files and folders must be set to public on the web. Second, you need to find the public URL with the unique webViewLink code.


1. Create a new folder and set its sharing permission to public on the web. As a best practice, you can create a standard “Public” folder on your Google Drive and place all future public files and folders there.

host-html-on-google-drive.png


2. Upload your website files and folders. HTML, CSS, and JavaScript are viewable as a website. While server side scripts like PHP, are not supported.

Another best practice is to name your home page or start page as index.html to avoid your other files from being displayed to others.




You don’t want this.

If you have an index file, Google will automatically display that page. Otherwise, the files under that directory will be displayed.

3. Open the page you want to publish on the web with Google Drive Viewer. Doing so will let you see the source code for that page. Find the Preview button at the top to see the website version.



A new browser tab or window will be launched displaying your website. Voila!

Get the URL and share it with everyone who you want to see your website. Use URL shortening services like Goo.gl or Bit.ly so you can easily remember your website address.


Some live examples here and here.

So there you have it. You have now learned how to host your own website using Google Drive. Another Google trick added to your list. What a great way for your students to showcase their web design skills!

Don’t forget, if you want to learn more tips and tricks like this, join an AppsEvents Google in Education Summit near you. Visit www.appsevents.com now!

Popular posts from this blog

How To Bypass Google Drive Viewer and Create Direct Download Links

How I Passed the Google Educator Qualification Exams

Google Easter Eggs: Show Pony Parade, Shy Dino, and Angry Mob on Hangouts