Most of us are not web developers and most of us may never really want to build a website. But, last week I wrote a post about using Google Hangouts and Google Drive. After that post, I received a follow up question or two after my weeks wrap up and saw that you can host a simple website using Google Drive. I went through that process, which I’ll share.
1. I opened up my google drive in my web browser and created a new folder.
2. I named that folder Website 1. You don’t have to name it this in order for it to work. I just wanted to keep it simple.
3. I opened up a text editing file and inserted a little code that I knew. If you are on Windows, you can use note pad. I used Text Wrangler on my iMac. I wrote a few simple html lines. I opened with a simple html tag, than a body tag. The <p> tags serve as a simple break, like a paragraph. Be sure to close every tag that you open. You don’t have to add links and pictures in but I did. Feel free to copy the code here if you are not familiar with html code. (Note: the <a href> code is the open tag for creating a link. The <img src> tag tells the browser where to look for the image). [Click the image for a larger version of the code]
4. I saved this file as index.html then created an images folder in the same directory.
5. I return to my google drive area in my browser and select the Website 1 folder, then click the Share button at the top.
6. Once my dialog opens, I make sure that I set my folder to be public on the web.
7. Open the Website 1 folder and then drag the images folder and index.html over to it. The shared settings will now be applied to these files.
8. Now, if I look up in my address bar, I will see that the URL says https://drive.google.com… with some additional letters after it. I copy the letters after the word folders.
9. I open up a new browser tab and type http://googledrive.com/host/. I paste the copied letters after host and hit Enter.
10. My website shows up.
So aside from collaborating on text documents, spreadsheets and other files types, Google Drive is a powerful tool that in many ways has replaced Dropbox for my personal and business uses.
Join the discussion 13 Comments
This is really neat, Robert. Thank you for sharing. There’s so much that can be done with Google and its products!
No problem. Thanks for your comment.
Thank you for sharing this tutorial! It is interesting!
Always good to see what else we can use in Google!! Thanks!
Oh.My.Gosh. This online stuff has a steep learning curve, and I’m out of shape. I’m now following you so maybe I’ll began to understand some of what I need to do. I understood most of this post (I made a website years ago following a book and classroom advice) however, I forgot (or it changed) everything I did. Sorry to be so dense (or OLD) what do you mean, “open up google drive?” Thanks
Thanks Nita for posting. Yes, there definitely is a lot of information to swallow and things are definitely changing. If you have a gmail account or google apps account, then Google Drive will be listed at the top for you.
I’ve been hearing a lot more lately about Google Drive but I haven’t had the time to explore it yet.
Thanks Toni. Worth the exploration I believe.
Going to show this to my son, he is learning about website design and such, this could be an awesome tool for him especially since I set him up on Google (gmail, chat, blogger, etc..) now might actually have to let him set up with Google + page.
It’s better to paste this folder ID on GDrives to get your own free short URL.
Hi Robert, thanks for sharing this in such a simple step by step approach!
THanks. I will check this out.