Are you looking for a good alternative of Google Drive to host your necessary Java Savript and CSS files? Then you must try another amazing Google Product called Firebase.
A website’s loading speed depends on a dedicated hosting server. If your hosting site limits the bandwidth then your website will take time to load. Ultimately it will affect your Site traffic and SEO.
What is Firebase?
Firebase is a robust Storage that has designed specifically for scale, security, and network resiliency.
In fact there are many other sites that we can use for hosting script but Google is recommending Firebase because it is Google's own services. And to use this service you do not need to create separate account because your Gmail account will help you to login directly into Firebase dashboard.
<style> CSS Script Here </style>
Step #2: From notepad click
File-> Save asand now type any name for the file and include .css or .js e.g. masonry.js
|Create CSS File by Notepad|
Step #3: In Save as type field select All Files and make sure Character Encoding UTF-8 has set.
This is really easy process to host files in firebase but many of us don’t know how to do it exactly. I assume that you have already created specific file by following the above guideline and now your file is ready to host in Firebase. Let’s go through the below steps:
Step #1: First log in to your Google account or Gmail and visit https://console.firebase.google.com/ URL.
Step #2: Once the page opens, click Create a New Project. Fill in the project name and country of origin, and then click Create Project.
Step #3: Now locate the vertical menu from left side and navigate to the menu storage. Here you can upload script files (js, css, html, etc.)
|File Upload on Firebase|
Step #5: After uploading the script file we have to grab the file URL to use in a website. So click the file that you want to use in a website and then Firebase will display the file info on the right. Get the file url from
Storage locations -> Download URL. Then click on the displayed URL to copy to complete.
Now paste the URL in a notepad. You will see hosting URL created from Firebase is bit longer than Google Drive. But don’t worry this URL will work in any website.
How to Add Hosing script file in Blogger Site?
I will show you how to use Firebase hosted file in blogger site. This is pretty easy but you have to apply little trick to make the file compatible for hosting. Please go through the below step-by-step guides.
Step #1: Login to your Blogger site and Go to Blogger dashboard.
Step #2: From dashboard click
Step #3: It’s time to add the hosted script but you must encode the script first before use. For Encode the URL please use my HTML Encoder Tool http://www.bloggerspice.com/p/html-encoder.html Add the hosting URL in Encode and click Convert button and copy the URL for further use.
Generally the Firebase hosted URL will be like below:
Now after encode the URL will be look like below:
Step #4: Now wrap up the encoded URL like below:
For Hosting CSS File markup line would be like below-
<link type='text/css' href=' https://firebasestorage.googleapis.com/v0/b/blogger-spice.appspot.com/o/masonry.css?alt=media&token=2e8ebf46-0d90-466c-bfd6-2677f12e3804' rel='stylesheet'>
So we just complete the wrapping up work to make it compatible for blogger site.
Step #5: Get back to your Blogger site and add the above encoded hosting URL above/before </head>
Step #6: Finally click Save theme to make the change effect.
Now check your Widget or website that Firebase is serving hosted file from their server. I hope you have understood the tutorial properly, if you have any query then feel free to write me.