Learn 'How to Host your Website on Google Drive' and 100% Uptime Server 24x7.
Why to Host files on Google Drive?
Step1# Create a new folder in Drive and share it as “Public on the web”.
Step2# Upload your HTML, JS & CSS files to this folder.
Step3# Open the HTML file & you will see “Preview” button in the toolbar.
Step4# Share the URL that looks like www.googledrive.com/host/… from the preview window and anyone can view your web page.
How to use CSS, JS , HTML File on your Website
After Copying the sharing Link from google drive, it would somewhat looks like this https://docs.google.com/file/d/your-file-code/.
You have to change the copied link to https://googledrive.com/host/your-file-code.
- Google Drive provides you 5 GB storage to regular accounts so you can easily upload lots of documents. However, if your disk space is full, then you can upgrade your account from basic to premium.
- You host files in google drive server so google provide 100% Uptime Server.You can host any thing and access any time from your drive.
- Google Drive provides you the flexibility to create and host different kinds of document, spreadsheets, form, drawing and presentations.
- Real time process in google drive - If you edit and change any thing on your drive then spontaneously show change in online document and see real-time changes as they appear.
- You can perform different operations on your google drive- ' Create New folder , Open , Open with different Apps , share publicly , move , rename and download'
- Google drive provide complete secuirty of your file. You can share your file publicly and privately both.Your file host on SSL encryption link - HTTPS.
- Purely Free of cost.
Which files host on your website?
Google drive upload and share everything but In your website , you can host some coding files -- CSS File
- HTML File
- JS File and more.
How to Host CSS, JS and HTML Files with Google Drive in Your Website
Here’s what you have to do:Step1# Create a new folder in Drive and share it as “Public on the web”.
Step2# Upload your HTML, JS & CSS files to this folder.
Step3# Open the HTML file & you will see “Preview” button in the toolbar.
Step4# Share the URL that looks like www.googledrive.com/host/… from the preview window and anyone can view your web page.
How to use CSS, JS , HTML File on your Website
After Copying the sharing Link from google drive, it would somewhat looks like this https://docs.google.com/file/d/your-file-code/.
You have to change the copied link to https://googledrive.com/host/your-file-code.
Remember: Make sure “your-file-code” remains the same before and after the changes are made.
let us do a small demonstration which would help you in explaining better. For Example, if the link of my file is https://docs.google.com/file/d/0BwQxBNm16ilRcGdrOGJlV2xBVjQ so I will change it to https://googledrive.com/host/0BwQxBNm16ilRcGdrOGJlV2xBVjQ. The only thing which remains the same is the file code.
Public Google Drive Websites with different Web Domain
I’ll show an example here. This website is hosted on Google Drive and here’s the same website but hosted on a different web domain. The trick is easy – you just have to 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/ABCD/" frameborder="0"></iframe> </body></html>
The height and width attributes of the IFRAME tag should be set to 100% for the Google Drive website to occupy the entire screen. The only downside is that the URL in the address bar won’t change if you open a different page of the website since you are now browsing inside an embedded page.
For CSS and JS files -
<link href='https://googledrive.com/host/ABCD/' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/ABCD/' type='text/javascript'/>
Note :
[*] For blogger user above CCS and JS file place before <head> tag.
[*] Google Drive cannot be used for serving dynamic pages like those generated through PHP scripts on a WordPress website.
Video Tutorial :
0 comments:
Post a Comment