Host a static website for free with Google Firebase
Tags: firebase, webdev, tutorial, googlecloud
Published: 2022-01-30 21:35:49

Also located on my **New Blog**: [Host A Website For Free On Google Firebase](https://codelikeadev.com/blog/host-website-using-google-firebase-tutorial)

<p>In this post, we will learn how to host a static website for absolutely free and one of the best website hosting platforms i.e. Google Firebase.</p>
<div>A Static website is a website that does not have any dynamic rendering and does not have service side rendering. It can still talk to APIs.</div>
<div>We will use Google Firebase Hosting as our hosting provider. Google Firebase provides free web hosting for 1GB of data and 10GB of data transfer limit for a month.</div>
<div>Let's navigate to <a href="https://firebase.google.com">https://firebase.google.com</a> and log in via your Google account.</div>
<div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiz1-ewlTKjJv2Ps3WIFu2dmgAiVcFGQ8Jf6orUDFPatryaa4I1Rjpb-aPtnCyT6qfwE_mXSByOlgLnLa02CzCKcaWqxgzv7lzsukVDDzbmt-ADWJ_YlRpBFiJXVFZRnEOLcp6BJwZGqHLemCHj4iYHS8Qi9R6Nb07C9Cd8RRJnRMR1KaEaJ5LSM4BC=s1565"><img alt="" border="0" data-original-height="612" data-original-width="1565" src="https://blogger.googleusercontent.com/img/a/AVvXsEiz1-ewlTKjJv2Ps3WIFu2dmgAiVcFGQ8Jf6orUDFPatryaa4I1Rjpb-aPtnCyT6qfwE_mXSByOlgLnLa02CzCKcaWqxgzv7lzsukVDDzbmt-ADWJ_YlRpBFiJXVFZRnEOLcp6BJwZGqHLemCHj4iYHS8Qi9R6Nb07C9Cd8RRJnRMR1KaEaJ5LSM4BC=s16000" /></a></p>
</div>
<div>The "Spark Plan" of Google Firebase offers 1GB of website hosting and 10GB per month of data transfer and is the free plan that Google Firebase offers.</div>
<div>We will click on the "Start Now" button
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgls8lgd9hJD2XEZvyEMsnQvBHSmDf5DhaVRYC6kvHrgsSujwCxZVocCK_qaEO-SBGlyp60S6bChhOf6HUtqGDJrMkgPMwK7rO2W76mR59aAAazpNTU04oc-GsVXQcm810fMM0EjJonW3cXrdFS9XYz53Ba819r_4fL9SiPA5aMU9aFTHohNC_qfSEH=s1241"><img alt="" border="0" data-original-height="480" data-original-width="1241" src="https://blogger.googleusercontent.com/img/a/AVvXsEgls8lgd9hJD2XEZvyEMsnQvBHSmDf5DhaVRYC6kvHrgsSujwCxZVocCK_qaEO-SBGlyp60S6bChhOf6HUtqGDJrMkgPMwK7rO2W76mR59aAAazpNTU04oc-GsVXQcm810fMM0EjJonW3cXrdFS9XYz53Ba819r_4fL9SiPA5aMU9aFTHohNC_qfSEH=s16000" /></a></p>
When in <a href="http://console.firebase.google.com">console.firebase.google.com</a> click on the "Create A Project" button</div>
<div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEj2aOIyzRz6Q7Y8xWeHC3gUBaKBmNgpZhbecaR5NXq3ghWWCMEVVmyKFYBAHTmZHM9zVq_hXecUSvbv8Cz3wckCB6J_OF67yYtySij1t1YtbWL0-SG1Sb05kXVofiJy0m0iDQrgTdPycwKQrIZ07KTfDQLUFRRrijrk7phVFBhIF4hoIQiABsJJIg0f=s1020"><img alt="" border="0" data-original-height="505" data-original-width="1020" src="https://blogger.googleusercontent.com/img/a/AVvXsEj2aOIyzRz6Q7Y8xWeHC3gUBaKBmNgpZhbecaR5NXq3ghWWCMEVVmyKFYBAHTmZHM9zVq_hXecUSvbv8Cz3wckCB6J_OF67yYtySij1t1YtbWL0-SG1Sb05kXVofiJy0m0iDQrgTdPycwKQrIZ07KTfDQLUFRRrijrk7phVFBhIF4hoIQiABsJJIg0f=s16000" /></a></p>
Give a name for the project, for example, "FreeWebsiteHostingDemo"</div>
<div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEh6TVnyeOaTnbfeclTzVdOmwA_8LKS65OwJ7kMJ-qR8YZKNPnh72Eucp5wn3Y3feAw88r4pKwbBlOFumSnO9spuOFdUCCk7j3qSUBmSLC3Wty0un5SPKbT-YIQI1P0EX56xO0gSIRKKPE44Hw8LLsjgI4AY0IcBNXRP29xzhpLs-6Loxs9cdxrC7e2x=s986"><img alt="" border="0" data-original-height="402" data-original-width="986" src="https://blogger.googleusercontent.com/img/a/AVvXsEh6TVnyeOaTnbfeclTzVdOmwA_8LKS65OwJ7kMJ-qR8YZKNPnh72Eucp5wn3Y3feAw88r4pKwbBlOFumSnO9spuOFdUCCk7j3qSUBmSLC3Wty0un5SPKbT-YIQI1P0EX56xO0gSIRKKPE44Hw8LLsjgI4AY0IcBNXRP29xzhpLs-6Loxs9cdxrC7e2x=s16000" /></a></p>
Click on "Continue"</div>
<div>Accept the "Terms" from the next screen and click on "Continue"</div>
<div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjambt8sQq1l5l__7ZGY0D4goPtkcHYyPBiF9qzf9nS93eEHryc7sEsyClfefYYFIUbTjF47IjrdHsAlRe2OkhAYQWHjXKcxz5KnnfObV7VEzo3-SOPx38desmHaR6JYoSkVARXLa2ZOVaqRFNf7r14-Ctg8dijXIoNpVG57xnd5TAcEDAYTF0hpL-0=s977"><img alt="" border="0" data-original-height="702" data-original-width="977" src="https://blogger.googleusercontent.com/img/a/AVvXsEjambt8sQq1l5l__7ZGY0D4goPtkcHYyPBiF9qzf9nS93eEHryc7sEsyClfefYYFIUbTjF47IjrdHsAlRe2OkhAYQWHjXKcxz5KnnfObV7VEzo3-SOPx38desmHaR6JYoSkVARXLa2ZOVaqRFNf7r14-Ctg8dijXIoNpVG57xnd5TAcEDAYTF0hpL-0=s16000" /></a></p>
Then Click on "Create Project" to create a project on Google Firebase.<br /><br />Now that Google Firebase has created us a project and we are in that project, we will start by creating an application for that project. So we will select a "Web project" </div>
<div>Google Firebase then asks us to Add Firebase to your web app.</div>
<div>Give a name to the web application you want to register with your project.</div>
<div>Example "OurFirstWebsite"
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEinLA9s9d2POtX-Hn8DqV6Yjc9n5TD5_GU1BaCBEwBSb2MPTq78g-Z1QZgBX7L3Vqsg4yS-KVPPKiNTb2mU3gN8TjBvUxsUJ2EdRGd6ICZIMW5191riNva6uQLKE7j1_1tjTBz08Y8UuvlBhKe4oue8h_giUqZMAYviyQPTkXV5NSGPgbctuDnk8iKp=s677"><img alt="" border="0" data-original-height="547" data-original-width="677" src="https://blogger.googleusercontent.com/img/a/AVvXsEinLA9s9d2POtX-Hn8DqV6Yjc9n5TD5_GU1BaCBEwBSb2MPTq78g-Z1QZgBX7L3Vqsg4yS-KVPPKiNTb2mU3gN8TjBvUxsUJ2EdRGd6ICZIMW5191riNva6uQLKE7j1_1tjTBz08Y8UuvlBhKe4oue8h_giUqZMAYviyQPTkXV5NSGPgbctuDnk8iKp=s16000" /></a></p>
Then, it asks us to add Firebase SDK , which you can ignore for this demo.</div>
<div>From the side navigation, select "Hosting"</div>
<div>Click on "Get Started"</div>
<div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEh844eozqg-TXTjyscWV8EQm_MGANpl0aIkLLJsD6HftD25MKyRjYYoJMDWuz_ep3Dd-K3t9iwihON5FZgk88TEi9YqsBDzFNhVaNRhX5sd62yllhjfAoHj_POizZEVQiLjoj021xxkXKH77myZQrk45Tb2yqH6JWmjMO5vNjQj3K74x3bDHtJf5TKd=s933"><img alt="" border="0" data-original-height="468" data-original-width="933" src="https://blogger.googleusercontent.com/img/a/AVvXsEh844eozqg-TXTjyscWV8EQm_MGANpl0aIkLLJsD6HftD25MKyRjYYoJMDWuz_ep3Dd-K3t9iwihON5FZgk88TEi9YqsBDzFNhVaNRhX5sd62yllhjfAoHj_POizZEVQiLjoj021xxkXKH77myZQrk45Tb2yqH6JWmjMO5vNjQj3K74x3bDHtJf5TKd=s16000" /></a></p>
<h2><br />Install Firebase CLI</h2>
<div>To host your website with Google Firebase Hosting, you need the Firebase CLI. Run the following npm command to install the CLI or update to the latest version of the CLI.</div>
<div>But before using the command, we have to make sure we have node installed in our machine.</div>
<div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhcrqlWOtXV434-513wY-qzsEmHqlWRR4zZkON-K6-0k-nKbjoiQSqD_iptMaQfSJlvgicJdPmyB4zh9o8lonmdvlbBDs5VkA5CsCicEThI4gOwh-ZpISsjl7qC210d23xR6FhgIncq3LnkcPNH4s0TIGLvJ02jdLbIThCi2IH23BON73EbpLjw_vpI=s576"><img alt="" border="0" data-original-height="137" data-original-width="576" src="https://blogger.googleusercontent.com/img/a/AVvXsEhcrqlWOtXV434-513wY-qzsEmHqlWRR4zZkON-K6-0k-nKbjoiQSqD_iptMaQfSJlvgicJdPmyB4zh9o8lonmdvlbBDs5VkA5CsCicEThI4gOwh-ZpISsjl7qC210d23xR6FhgIncq3LnkcPNH4s0TIGLvJ02jdLbIThCi2IH23BON73EbpLjw_vpI=s16000" /></a></p>
Use the below command to install Google Firebase CLI<br />
<h4>npm install -g firebase-tools</h4>
<h2>Login To Firebase Using The CLI</h2>
<div>The next step is to login to the Firebase CLI using the below command. So use the command prompt window or a terminal and paste the below in it.</div>
<h4>firebase login</h4>
<div>It will ask you the following question: "Allow Firebase to collect CLI usage and error reporting information?" - type "Y" and press enter.</div>
<div>It opens a browser window and asks you to login to Google via your Google account.</div>
<div>After logging in, the command prompt or terminal tells you that you have successfully logged in to the account.</div>
</div>
<h2>Hosting Your Website</h2>
<div>Using command prompt or terminal, browse to the location where you have your website hosted.</div>
<div>For example, my website is physically located under this folder structure</div>
<div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiyoA169-QL8XHQ2dJN_u3zS-4Xu-23rex7JLeUw3Dudl2y4gnqFP7A-5kR6gSBOfS6eC36weyUPc_63OG6UySr4wuphpmrjc0V8Eh0U7ECCr51Pq7eW5PIfHLkmERNeerXxItTgMqPe47QZMnr60g27YaZQsleJvZK1CpwhllgNFVECrsr4nmIpQvi=s847"><img alt="" border="0" data-original-height="302" data-original-width="847" src="https://blogger.googleusercontent.com/img/a/AVvXsEiyoA169-QL8XHQ2dJN_u3zS-4Xu-23rex7JLeUw3Dudl2y4gnqFP7A-5kR6gSBOfS6eC36weyUPc_63OG6UySr4wuphpmrjc0V8Eh0U7ECCr51Pq7eW5PIfHLkmERNeerXxItTgMqPe47QZMnr60g27YaZQsleJvZK1CpwhllgNFVECrsr4nmIpQvi=s16000" /></a></p>
I will use a command prompt or terminal and I will browse to the below location</div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjW-v299OqGozwIwhtv80becSUMPME8ANqglEqOWYnn9FQi3CB8_EyiKwZ09w00tFoXYYfgkEcRrRWjMHRwSnnSLfAQfJ7Tcfl8E0mTRPqzaMGOAMuBhOLGnanpMOzHYR8brcsvGvULH293ayiCbeayrWvxaISU6p_IzNtw1HUnKxg0ZTMR7heYYl_Y=s632"><img alt="" border="0" data-original-height="246" data-original-width="632" src="https://blogger.googleusercontent.com/img/a/AVvXsEjW-v299OqGozwIwhtv80becSUMPME8ANqglEqOWYnn9FQi3CB8_EyiKwZ09w00tFoXYYfgkEcRrRWjMHRwSnnSLfAQfJ7Tcfl8E0mTRPqzaMGOAMuBhOLGnanpMOzHYR8brcsvGvULH293ayiCbeayrWvxaISU6p_IzNtw1HUnKxg0ZTMR7heYYl_Y=s16000" /></a></p>
Then I will use the command "firebase init" (without quotes) and will press enter as below</div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgqPhTpnQ1TqQDNEMnN0pT5YjqklEi4BGvukFfKIV8XzWR-KbO8ND72bD_VScdEgyERqt21aRjrOJ7P-JpvR_GUdkFDs-1eYlgDwwOC9T0o41QkfuipI1J9IbdpTqlhbQ4uRZ8bifaG-Uo6qFQcFFbS2pZr5vZ8BQO30JkzL_SHY88-AgBB_K-28f8K=s641"><img alt="" border="0" data-original-height="253" data-original-width="641" src="https://blogger.googleusercontent.com/img/a/AVvXsEgqPhTpnQ1TqQDNEMnN0pT5YjqklEi4BGvukFfKIV8XzWR-KbO8ND72bD_VScdEgyERqt21aRjrOJ7P-JpvR_GUdkFDs-1eYlgDwwOC9T0o41QkfuipI1J9IbdpTqlhbQ4uRZ8bifaG-Uo6qFQcFFbS2pZr5vZ8BQO30JkzL_SHY88-AgBB_K-28f8K=s16000" /></a></p>
<p>When it asks "Are you ready to proceed?" type "Y" and press Enter</p>
<div>Then it asks which service do you want to use? Use the arrow keys to come down to hosting and press space to select. Then press "Enter" to continue.</div>
<div>It then asks us if we want to "Use an existing project?"</div>
<div>Type "Y" (without quotes) and press Enter and choose the project that you created for this website.</div>
<div>Then it will ask us where are the files that you want to use for hosting. By default Google will look at a public folder inside your website and go inside the folder and copy all the files to Google.</div>
<div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgPTbOjCX02Fs7m-Aaog-S4m_a3F1LMoj4Uh5j-VTmyCfViOob7drTd5oBgr6ytVrve4inQqe_4-6FQ0GB2ya6JPkmew1QmXnUzquaPnBLez7hgqwY4YjdyAmyRHmtGr_w52suMSSbFQd9ety-Np8wFk4k4d15wBN3xF-R859LRrzycHCd8w_KNVvmP=s775"><img alt="" border="0" data-original-height="286" data-original-width="775" src="https://blogger.googleusercontent.com/img/a/AVvXsEgPTbOjCX02Fs7m-Aaog-S4m_a3F1LMoj4Uh5j-VTmyCfViOob7drTd5oBgr6ytVrve4inQqe_4-6FQ0GB2ya6JPkmew1QmXnUzquaPnBLez7hgqwY4YjdyAmyRHmtGr_w52suMSSbFQd9ety-Np8wFk4k4d15wBN3xF-R859LRrzycHCd8w_KNVvmP=s16000" /></a></p>
Create a "Public" folder in your directory and copy all the files needed by the website into this "Public" folder.</div>
<div>Select "N" if it is not a single page application.</div>
<div>Then it asks that it has found a index.html file, do you want to override it?</div>
<div>We will press "N"</div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiey2rMmMHlvGQ4kKmoW8ceVfd9tgjcKrMcptKaKPR2-Xlra7vDkz7yMsG8ofoKwV7yhRfbVby0gbIt72qBYKHiaB_pnzLGwjKRXwqcgDnnUh5qLe10ml9RDUtPIvbmo5cVzN2R2oHdhtF7aQ2Oatw8yrkzn_986kz6vB9fhu4HfDg3ljgT7Ga2vWc5=s607"><img alt="" border="0" data-original-height="117" data-original-width="607" src="https://blogger.googleusercontent.com/img/a/AVvXsEiey2rMmMHlvGQ4kKmoW8ceVfd9tgjcKrMcptKaKPR2-Xlra7vDkz7yMsG8ofoKwV7yhRfbVby0gbIt72qBYKHiaB_pnzLGwjKRXwqcgDnnUh5qLe10ml9RDUtPIvbmo5cVzN2R2oHdhtF7aQ2Oatw8yrkzn_986kz6vB9fhu4HfDg3ljgT7Ga2vWc5=s16000" /></a></p>
<h2>Deploy Website To Google Firebase</h2>
<div>After all the setup is done, the final step is to deploy the files.</div>
<div>In your command prompt or terminal window, type the below command and press enter.</div>
<h3>firebase deploy</h3>
<div>After this we have successfully deployed our website to Google Firebase. In the command prompt, it tells us the URL that Google Firebase has given us so copy that and paste that in your browser.&nbsp;</div>
<div>Your website is now hosted successfully on Google Firebase.</div>
<p><a href="https://blogger.googleusercontent.com/img/a/AVvXsEj6womiKLxotjBvPW3RxQbnMIhhw5Z9ixsnQguG0jAqaTWFQCCbFHYfYz_dxRj0SoiykNqY86NPUxyGPAIy9MijHJFuiLrvY9aZ4jd8HtUAho4AoiENRIZwKuAOrh3HzdOtzHcUHnkOQkHNCIRTsj4MjMF---uj2MAA7jGY2ILXkS5QQCvp29tCP9Y2=s877"><img alt="" border="0" data-original-height="393" data-original-width="877" src="https://blogger.googleusercontent.com/img/a/AVvXsEj6womiKLxotjBvPW3RxQbnMIhhw5Z9ixsnQguG0jAqaTWFQCCbFHYfYz_dxRj0SoiykNqY86NPUxyGPAIy9MijHJFuiLrvY9aZ4jd8HtUAho4AoiENRIZwKuAOrh3HzdOtzHcUHnkOQkHNCIRTsj4MjMF---uj2MAA7jGY2ILXkS5QQCvp29tCP9Y2=s16000" /></a></p>
<div>
<h2>Video Tutorial To Host Your Website On Google Firebase For Free</h2>
<p>{% youtube w7xKZ5PWizs %}</p>
<br />
<br /></div>