Using Google Drive to Host CSS and JS


Google Drive offers 15 GB of secured storage online and can be used create secure online backups. It comes with limited storage but Unlimited Bandwidth and hence it can used as a host for your JS and CSS. Google also offers paid cloud solutions. If you need more storage, you can make use of this cloud platforms. The files are in Google’s high speed servers and hence we don’t need to worry about the downtime. Let us see the steps in using the Google Drive as a host for your static files.

This is not only for the CSS and JS. It can be used to host all type of files that Google supports. This includes all the Google documents, PDFs, Word documents, Zipped files, Photos, Video files and other Static files. This hosted files can be easily linked with Blogger, WordPress and other Websites. This will be very helpful for bloggers who are maintaining their blogs in Free services that do not offer file uploads and Google’s blogger is the example. So the files that has to be linked in Blogger Blogs can be uploaded in Google Drive and can be linked with blogger in its templates or directly in the Posts and  Static Pages while creating them. Code to link the files are at the end of this post.

Adding Files to Google Drive

Adding files in to the Google Drive is as easy as adding files into the Folders in your computer. Login to your Drive using the Google account from Once you are logged in just drag and drop the files in to the desired folder or upload the using the uploader by clicking New button in the left side as shown.

Upload your files

Upload your files using the uploader or simply drag and drop the files inside the drive to upload. After uploading the file, you have to set the access to public or simply change the access of the folder to public in which you had uploaded your file. Check the screenshots below for reference. Right click the file and click Share or click the file and click the share button.

Click share Icon

In the popup that appears click Advanced as shown here.

Click Advanced

In the popup that appears again,  click Change under “Who has access” as shown

Click change in “Who has access”

Now in the next screen Click On – Public on the web, Select the Access type to Can View, then click Save as shown here.

Set the Access to Public

You have now given Public access to your file. Anyone in the Internet can now access your file.  Now copy the Link to share and get the file ID. This file ID has to be used in the Google Host URL.

Public can access your files now !

This is the sharing link. The text in red is the file ID. You can use this file ID in the Google Hosting URL that looks like File ID here/ . Paste your ID and this is the URL for your file hosted in google. The URL looks like this.

This can be used to link the files in your websites. For example the CSS and JS can be linked to blogger blogs as follows. CSS can be directly added into the template easily. Read: Adding Custom CSS to blogger blog

The Code to link the CSS file is here.

<link rel="stylesheet" type="text/css" href="" />

The Code to link the JS file is

<script src=' file ID here' type='text/javascript'></script>

Kindly Note that the Javascripts should be added at the footer or just above the closing of body tag (</body> and the CSS should be added to the head tag in the template. You can link these JS and CSS for some particular posts also in Blogger. These code has to be added while creating the posts or while Creating the Static Pages or can be added to the Widgets.

Other People are reading
Hope You liked this Tutorial. Leave your valuable feedback and suggestions in the comment box provided below this post. Subscribe to our Newsletter for getting the future updates directly in your inbox.
Free Email Updates !
Join the visitors who are receiving our newsletter and receive the Daily Mass Readings, Prayers and other updates directly in your inbox.
We respect your privacy and take protecting it seriously.