Howi.In

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-LnaWdr0OSIA/WDheDw0uRrI/AAAAAAAAIG4/n_nQ_paDoqAyHDUozMrbwXvLILjEU25JQCLcB/s1600/Own%2BStatic%2BWebsite%2BUsing%2BGoogle%2BFirebase.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Step By Step Tutorial to Create Website Using Google Firebase" border="0" src="https://1.bp.blogspot.com/-LnaWdr0OSIA/WDheDw0uRrI/AAAAAAAAIG4/n_nQ_paDoqAyHDUozMrbwXvLILjEU25JQCLcB/s1600/Own%2BStatic%2BWebsite%2BUsing%2BGoogle%2BFirebase.png" title="Step By Step Tutorial to Create Website Using Google Firebase" /></a></div>
<h2 style="text-align: left;">
Introduction:</h2>
There is a lot of free web hosting providers on the internet. Most of them will suspend our A/c after getting some amount of visitors, or they will show ads on our website. Showing Ads under our company or personal website will make lose our site reputation. We always trust Google right? Yes then, host your new static website under their Firebase Free Hosting. Today We are going to learn to host a static website under Google Firebase.<br />
<h4 style="text-align: left;">
What is Firebase?</h4>
<i><span style="font-family: "georgia" , "times new roman" , serif;">Firebase is a mobile platform that helps you quickly develop high-quality apps, grow your user base, and earn more money. Firebase is made up of complementary features that you can mix-and-match to fit your needs. </span></i><br />
<br />
<span style="font-family: inherit;">Firebase mainly using while creating mobile applications such as Android App, IOS App, Windows App, Etc. It will provide free database and other hosting services to support the App. So developers who don't have a web server can use the Firebase as their App database and Hosting service. The main advantage of Firebase is, It will provide Real Time Sync and scalable Database Structure. </span><i><span style="font-family: "georgia" , "times new roman" , serif;"> </span></i><br />
<h4 style="text-align: left;">
How to Create Website Using Google Firebase Hosting:</h4>
To host a website in Firebase, You needed an A/c in Google and linked with <a href="https://firebase.google.com/">https://firebase.google.com/</a> . Once you liked with the Firebase. You can "<b>Get Started For Free</b>". Now follow the steps to host your first site.<br />
<ul style="text-align: left;">
<li>Once you log-in to your A/c provided by Firebase. Click on the "<b>Create New Project</b>" Button in blue color. </li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-52HOMl1codg/WDXW3C0uRsI/AAAAAAAAIE4/asWQOE4SiiABi7FluBif6VGVUAjWV_dDQCLcB/s1600/new%2Bproject.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="Create New Project in Firebase" border="0" height="377" src="https://1.bp.blogspot.com/-52HOMl1codg/WDXW3C0uRsI/AAAAAAAAIE4/asWQOE4SiiABi7FluBif6VGVUAjWV_dDQCLcB/s640/new%2Bproject.PNG" title="Create New Project in Firebase" width="640" /></a></div>
<ul style="text-align: left;">
<li>After you name your first project, Click on the "<b>Create Project</b>" Button to complete the action. Once you fill out the work, You will be taken to the Dashboard.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-fRHwKf6tzKI/WDXYAmxENuI/AAAAAAAAIFA/uuXfPaQO3PUzjtWxeBvzmM2ooZ32q6regCLcB/s1600/hosting.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="306" src="https://3.bp.blogspot.com/-fRHwKf6tzKI/WDXYAmxENuI/AAAAAAAAIFA/uuXfPaQO3PUzjtWxeBvzmM2ooZ32q6regCLcB/s640/hosting.PNG" width="640" /></a></div>
<ul style="text-align: left;">
<li>Inside the Dashboard, you can see the "<b>Hosting</b>" Tab under the "<b>Develop</b>" Section which located on the left side. Click on it and you will reach the step to host your first website with Firebase service.</li>
<li>Click on the "<b>Get Started</b>" Blue button.</li>
</ul>
Before getting started, you need to install "<b>Node.JS</b>" Software in your PC. You can download that from their official website. Click on the link address that given below and download the latest version as per your computer OS.<br />
<ul style="text-align: left;">
<li><a href="https://nodejs.org/en/" rel="nofollow">https://nodejs.org/en/</a> - Go to this link address to download Node.JS.</li>
</ul>
Once you download the Node.JS software and installed it on your PC. You have to create a folder where ever you like in the PC. Once you created a folder. Enter to the folder and "<b>Hold Shift Button + Right Click Mouse Button</b>". Once you do the action, You can see "<b>Open Command Window Here</b>". Click on will open Command Window. Once you opened the command window. Enter the following command to install Firebase into the folder.<br />
<pre class="brush: js;"><code>$ npm install -g firebase-tools</code></pre>
<ul style="text-align: left;">
<li>Once the action finished. You have to log intoF your A/c. For that, you have to execute the following command on the command line. </li>
</ul>
<pre class="brush: js;"><code>$ firebase login</code> </pre>
<ul style="text-align: left;">
<li>Now you need to initiate your project by executing the command that given below.</li>
</ul>
<pre class="brush: js;"><code>$ firebase init</code></pre>
<ul style="text-align: left;">
<li>The "<b>Init</b>" Command will ask you further questions. You can use the below image as a reference to answer the question.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-YbDn0aRHkA0/WDhWO-imiyI/AAAAAAAAIGQ/3nVWsOwtxqUxKx7pVPRVzh9uwlb-S2c6ACLcB/s1600/command%2Bwindow.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="554" src="https://3.bp.blogspot.com/-YbDn0aRHkA0/WDhWO-imiyI/AAAAAAAAIGQ/3nVWsOwtxqUxKx7pVPRVzh9uwlb-S2c6ACLcB/s640/command%2Bwindow.PNG" width="640" /></a></div>
<ul style="text-align: left;">
<li>Once you finished the above Initialisation Process. The final step is to complete the process by publishing the site. </li>
<li>You can make changes on the index page which located inside the "<b>Public</b>" Directory in your project folder. </li>
<li>You can also create new pages and link them each other. </li>
<li>After doing the changes that you require on the pages. Execute the below command to finish the process.</li>
</ul>
<pre class="brush: js;"><code>$ firebase deploy</code></pre>
<ul style="text-align: left;">
<li>You are done. Once you published the site, The command line window will show you the link to access it via a web browser.</li>
<li>You can also grab the link address from the "Dash Board".</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-yhER101fZb4/WDhXoHEMKXI/AAAAAAAAIGY/JKPucgaE6CwWvAY1B7p4IxeJmvdSe8tWgCLcB/s1600/link%2Baddress.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="Link Address" border="0" height="292" src="https://1.bp.blogspot.com/-yhER101fZb4/WDhXoHEMKXI/AAAAAAAAIGY/JKPucgaE6CwWvAY1B7p4IxeJmvdSe8tWgCLcB/s640/link%2Baddress.PNG" title="Link Address" width="640" /></a></div>
<ul style="text-align: left;">
<li> You can connect own domain by click on the "<b>Connect Custom Domain</b>" Button. It will ask you to enter the domain, and it will ask you to add TXT Record in your domain control panel. Once you finish the process, it will take 24 Hours to change the domain DNS updating process. Once it finished. Your site will go live. </li>
</ul>
You can use Firebase to host official website for free that doesn't require Database. If you are a genius in Development. You can use the Firebase Hosting purpose for many things.<br />
<h4 style="text-align: left;">
Suggested Articles for Webmasters:</h4>
<ul style="text-align: left;">
<li><a href="http://www.howi.in/2014/09/create-your-own-live-cricket-score-wapsite.html">Create Own Live Cricket Score Website Using PHP API Script.</a></li>
<li><a href="http://www.howi.in/2016/11/use-google-geo-api-to-get-user-current-location.html">How to Use Google GEO Location API to Get User Current Location. </a></li>
<li><a href="http://www.howi.in/2016/11/autocomplete-textbox-using-jquery-ajax-in-php.html">PHP Script to Autocomplete Textbox Using Ajax and Jquery.</a></li>
<li><a href="http://www.howi.in/2016/10/stop-wordpress-asking-ftp-Credentials.html">How to Stop Wordpress Asking FTP Login Credential.</a></li>
</ul>
I hope you well enjoyed this article. If you have any doubts or suggestion related to this article. Please let me know it by using the command box that given below. Thanks<br />
<ul style="text-align: left;">
</ul>
</div>

How to Create a Static Website Using Google Firebase

Introduction: There is a lot of free web hosting providers on the internet. Most of them will suspend our A/c after getting some amount...

+ Read more »