Google added an impressive features to it's Google drive - file or web
hosting. Developers can now host their website in Google drive by
uploading and sharing HTML, CSS or JavaScript files.
Do you have a presentation or a complex JavaScript based web apps you want to showcase? Then, you can take the advantage of Google free CDN service. Google has several servers across the globe and we can be sure that a file downloaded from Google server will be much faster compare to our shared hosting server. But there's a little drawback. Google Drive websites have a URL structure like googledrive.com/host/ and there’s no way to change the default URL.
For instance, if your are hosting a website on Google Drive but wish to serve it under your own custom domain, that’s not possible yet unless you wrap your Google Drive website URL inside an iframe tag as shown in the following snippet:
<html>
<head>
<style>
.body { margin: 0; padding: 0;}
.iframe { position: absolute; height:100%; width:100%;}
</style>
<title> Google Drive Website </title>
</head>
<body>
<iframe src = "https://googledrive.com/host/FILE-ID/" frameborder= "0"></iframe>
</body>
</html>
<head>
<style>
.body { margin: 0; padding: 0;}
.iframe { position: absolute; height:100%; width:100%;}
</style>
<title> Google Drive Website </title>
</head>
<body>
<iframe src = "https://googledrive.com/host/FILE-ID/" frameborder= "0"></iframe>
</body>
</html>
You can see a live demo of a static webpage hosted on Google Drive here.
This guide assumes you already have some HTML content you’d like to publish. Now let's get these done.
1. Login to drive.google.com
2. Select Create > Folder
3. Give your folder any title you like
4. Now that a new folder is created. Select the check box next to the folder
5. Select the Share settings icon
6. In the next pop up window, click on "Change" under "Who has access" section.
7. Make your folder "Public on the web", Save your changes, then click Done.
8. Open your newly created folder and you can see it's empty. It's time to upload your files.
9. Click the "Upload" icon, then "Files"
10. Open your uploaded file and click the "Open" with Google Drive Viewer button below the page.
Click "Preview". The string of characters after "host" in your address bar is your page id. You can share the page URL with anyone.
As the owner of the account, you can access (and edit) your files via http://drive.google.com/page-id
Visitors can access it via http://googledrive.com.com/page-id
11. Show me your work ;-)
I'd love to see what you've been doing with Google Drive. Leave a comment and we'll be happy to visit.
Subscribe For Free Updates!
*Please confirm the email sent to your inbox after clicking "Sign Up!".
Subscribe RSS
Follow us on Facebook
Follow us on Twitter
Circle us on Google+
Connect on LinkedIn
Follow us on Pinterest
Connect on StumbleUpon
Google Drive does not support web resources that make use of server-side scripting languages like PHP. It only suport HTML, CSS and JavaScript.
ReplyDeleteGreat share admin, i know you are doing very hard work in implementing all these tutorial for us..Thanks for this post
ReplyDeletebest web development company
You are welcome Isabella!
DeleteThis is awesome! I can't wait to get some projects done! https://googledrive.com/host/0B7eDanXKiw9qa3VsWWt4cE5wZVk/Website%20editor.html
ReplyDeleteI have got this informative article which is very essential article which is very useful to me as well. I am sure the article will be very handy for me as well. Keep it up.
ReplyDeleteDarrell Issa
Nice post . Thanks for the shearing valuable information. I really fiend this type blog. Special thanks to writer.
ReplyDeleteBuy Instagram Followers
thanks for the commentors, who share useful resources here is mine review of online essay-writing services. I believe it will help.
ReplyDeleteFacebook is a really powerful platform to boost your website and your business. So if you buy facebook likes with real person then it it will more benifitable then others. Thanks for your informations.
ReplyDeleteThanks for your nice and informative post. It helps me much. Please don't forget to visit us as well at buy Facebook photo likes
ReplyDeletemichael kors outlet clearance
ReplyDeletepolo ralph lauren
polo ralph lauren outlet online
lacoste polo shirts
michael kors outlet store
pandora outlet
cheap mbt shoes
michael kors outlet
mbt shoes
coach outlet online
huangxiang20170509