Why Firebase?#
I notice a huge slowdown in my website after I enable HTTPS in Cloudflare. I try to tweak some settings in cloudflare but it still super slow. I try to disable proxy setting in DNS and my personal website become quite fast. For comparison, I have to wait my Metabee art post for 8 minutes until it fully load if I enable the proxy. Once I disable it, it reduce to 3 seconds with 2 object still loading (font and some java script library). Without proxy I lose the HTTPS feature from Cloudflare and it is the only reason I’m using it. HTTPS also encrypt my content, so my ISP can’t inject an advertisement into my page (I wish I could sue my ISP). Another problem, Google cloud storage is not as responsive as I think. The performance on the server depends on your region. While delivering HTML file and JPEG is good. The performance of loading javascript library and font file is unrealiable.
After spending 4 hours thinkering with Cloudflare and Google Cloud Storage, I see an article about Firebase.
Introducing Firebase#
Firebase actually has a lot of feature. Most of the feature are very useful for web development. Firebase hosting is using global CDN (Content Delivery Network). In theory this feature will deliver your content blazing fast anywhere in the world. The best news is they offer a free tier which has 1 GB of storage with 10 GB of bandwith per month. This offer a fantastic deal for me. It is fast and cheap as long as i can optimize my website.
Seting up my website using Firebase#
1. Creating a project in Firebase#
You need a google account to use firebase. Then go to Firebase console and create a project. The wizard will ask you about the project name, the google analytic account and what plan you are using. You don’t have to worry about the plan because you could change your plan in Project overview page.
2. Installing NodeJS#
You need NodeJS to use NPM (Node Package Manager). NPM are like Playstore in Android but it is for applicaiton distribution for NodeJS. To download NodeJS go to this page. I’m using Windows so the installation is really strightforward. After the installation try to run NMP command in your command prompt to test it. It will prompt you on how to use it.
3. Installing and hostin your static web into Firebase#
To install firebase use the command below:
npm install -g firebase-tools
Once the installation complete you can test to run below command:
firebase --help
It will give you a brief overview on how to use it. Next step login your account using command:
firebase login
This will open your browser to allow access for firebase. Once you are login, change your directory to your website directory. In my case, it is my Hugo root directory. Then run the below command to initialize your firebase configuration:
firebase init
It will ask you about few things:
What feature you want to use? Answer: Hosting
Which project? Answer: Use the project you create before
Which directory to publish? Answer: by default it will pointing to puclic and I use the default
Configure as a Singel-Page APP? Answer: No for me because I have a lot of page
Once complete I just need to run Hugo to genenrate my static website. Then I just run below command to deploy my content to Firebase:
firebase deploy
4. Setting my DNS#
The last step I need to do is to change my DNS to point to the firebase server. I’m still using CloudFlare nameserver so I just need to change my DNS settings in CloudFlare. I did the change at night and I just have to wait for replication in the morning.
Conclusion#
After I woke up, I test my personal website. I’m very satisfied with the loading speed. It feel snappier than before and it support HTTPS. I regret not using it before so I don’t have to waste my time try to optimize my website. I recommend you to try it and test it for yourself.
