How to host Images and JavaScript/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'

host images, javascript and css files on Google Drive 2017 New guide

Click To Tweet

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 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.

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'.
   
   


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.

• How to host JavaScript and CSS files on Github using RawGit
• 5 Best free image hosting website with faster loading speed

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.