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 that Google depreciated their hosting feature. But 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 out your problem regarding hosting files on Google Drive for free.



About Vishal Chopra
Vishal Chopra is a part-time blogger And Fountainhead of 'Blogger SEO Lab'. He has been a huge fan of Blogger since he first laid eyes on it, and has been writing informative content for Blogspot users since 2014.


3 comments
  1. Suggestions for everything:
    It turns out after I searched for quite a while I finally got a more effective site to create a direct google drive link. Here, although large file sizes such as high-res video (Bluray) can be generated, either the download link or the original. So no need to visit google download page again.

    Htmlkomik.tk | Embedlink
    Note to admin would you take the time to review this site and write an article about this site after your review.
    I really thank the admin or the manager of this site if willing.

    ReplyDelete
  2. This does not work as blogspot blocks id

    "Error parsing XML, line 15, column 65: The reference to entity "id" must end with the ';' delimiter."

    ReplyDelete
  3. Thanks for that, great help

    ReplyDelete