17/02/2017

How to host Images and JavaScript/CSS files on Google Drive



host images, javascript and css files on google drive
After serving file hosting service on Gdrive for three years, Google had decided to discontinued the static website hosting on google drive like they depreciated Google code hosting. But if you will be happy to know that 'We can still host our files on Google Drive for free'


And in this tutorial, I will show you the 100% working method to host you Images, CSS and JavaScript using Google Drive for free 2017 (New Guide).

Demo. The following image is hosted on Google Drive

host image on google drive demo


Host Images, CSS and JavaScript files on Google drive


Step 1: Upload your files to Google Drive

  1. The very first thing you need to do is that create a folder on Google Drive and change the sharing permission of the file to public.

  2. And now upload your Images, JavaScript and CSS files to the folder.

Step 2: Obtain the sharing URL of the file

Now you need to obtain the link of your uploaded file. Just right click on the file and then select 'share' and then copy the link of the file and keep safe in notepad. see below picture.

host images and javascript and css files on google drive for free

Step 3: Create the direct download link of the URL (permalink)

Genrally, Google drive does not provide the direct link of the file. It only shows the sharing link of the file as Google photos do. So, we need to apply a trick to get the direct link to the file.


  1. First of all, navigate to direct download link generator. You can see the below like generator. And you just need to enter the sharing URL (which you kept safe in notepad at step 2) of the file into the number 1 text box and then hit on ' Generate'.

    host Images and JavaScript/CSS files from Google Drive

  2. And then, copy the generated direct link of the file and then keep safe in notepad.

Step 4: Embed the Image or Link JavaScript/CSS  Files in a HTML page

As you are a developer. You already know the HTML code to embed Images in a web page or link JavaScript and CSS files into the HTML.

If you want to embed an image, then you use the below code:

<img src='your-direct-download-link-of-image'/>
Or If you want to link CSS files, then use the below code:

<link href='your-direct-link-of-css-file' rel='stylesheet'/>
Or If you want to link JavaScript files, then use the below code:

<script src='your-direct-link-of-javascript-file'/>

Conclusion

As I said earlier, Google depreciated their hosting feature, and the above solution is a trick to force Google to host our files on Gdrive. So, you might face a problem of loading speed on your website.

Recently, I have made a tutorial to host JavaScript and CSS files on Github using RawGit (By MaxCDN) and also featured five best free image hosting website to host your image. And I will also recommend you to follow my recently published articles.

And you might also like to read 'Load Youtube and dailymotion video player on demand.'

Thanks. I hope that the above step by step guide helped you to sort your problem regarding hosting files on Google Drive for free.



About Admin
Vishal is a Web Designer and a blogger.
You can find him on Facebook, Twitter, Gplus


1 comment
  1. Budi kay phely check kr lety ka google 2016 may is ki support katum kr chuka hai
    aur tum ma kay kus is ko 2017 may post kr rahy hu

    ReplyDelete