How to Host JavaScript Files on Firebase for Blogspot Blogs

I have been with Blogger.com since year 2008. To this date I run several blogger blogs on different niches. All of my blogs are embellished with custom templates. Since Blogger doesn’t provide too many useful widgets, I do have to use some custom ones. But in order to achieve that I have to rely on JavaScript. But Blogger does not have any dedicated hosting service for JavaScript files. Therefore, most of the time I have to use some third party sites to host JavaScript files. I preferred Google Drive and yourjavascript.com. But unfortunately the former has shut down their service for hosting JavaScript files, while the latter has been malfunctioning every now and then. When Google Drive ceased its service, I tended towards yourjavascript.com. But as their service is being interrupted I sought for an alternative. Then after lots of Googling I have come across with Firebase, ironically, another storage service by Google! Up till now which is allowing bloggers to host their JavaScript and CSS script files for free.

Just as Google Drive, Firebase is also a storage service. Here the users can upload and store their images, videos, CSS, and JavaScript files. Users can upload files from Windows PC, iOS, and even Android Device. If you are a Blogger user then you should store your CSS script files or JavaScript files on Firebase since it’s Google’s own service.

Uploading CSS script files or JavaScript files on Firebase is very fast and simple. Just follow the under mentioned steps to upload your very first CSS or JavaScript file(s):

Step -1

Open your internet browser and go to https://console.firebase.google.com and sign in by using your Google account and then click on“Get started”:

Sep -2

When the new page has been loaded then Click on “Create Project”:

Step-3

In the next page Fill up the “Enter your project name” field, tick on the “I accept the Firebase terms” and then click on “Continue”:

Step-4

Now select the desired account from the drop-down menu (if prompted) and then click on “Continue”:

Step-5

Accept the terms and click on "Create project":

After appearance of this message: “Your new project is ready”, click on “Continue”"

Step-6

Now scroll down the page and click on “See all Firebase features →”:

Upon visibility of more items please click on “Storage”:

Step-7

Click on “Get Started”:

Step-8

Click on “Next” to set "Secure rules for cloud storage":

Once setting the “Cloud Storage location” click on “Done”:

Step-9

Now click on “Upload” and select the desired CSS or JavaScript file(s) to be uploaded:

Step-10

Select a file from the list and click on “Open”:

A new tab will open in the internet browser from where you can copy the file url. The url will look something like the following:

https://firebasestorage.googleapis.com/v0/b/mycodes-1bcd9.appspot.com/o/img-thumb.js?alt=media&token=06bfe1e9-36d9-40e9-9a2e-8631bd4f15b

But you cannot add Firebase urls directly into Blogger template without some modifications. Bloggers template editor will show error message if you try to implement unmodified urls. The modification is really simple, just replace the & with & and you are ready to put the end product into your template. Therefore, after alteration, your url will look like as under:

https://firebasestorage.googleapis.com/v0/b/mycodes-1bcd9.appspot.com/o/img-thumb.js?alt=media&token=06bfe1e9-36d9-40e9-9a2e-8631bd4f15b3

I believe that from onward, you won’t be wasting too much time on looking for free hosting sites for storing your JavaScript or CSS script files. Since Firebase is owned and maintained by Google, its service will definitely be much more secure and reliable than any other hosting sites. Please leave your comments regarding your experience with Firebase.

View More Posts

Be Informed Whenever a New Post is Published.

If you enjoyed this article, SUBSCRIBE now for FREE to get regular updates delivered to your E-mail inbox.Your E-mail is safe with us - No spam, we promise.

Life in Bangladesh

Tuesday, October 29, 2019