The Ultimate Beginner’s Guide to Static Website Hosting With Google Firebase (for FREE)
Tags: codenewbie, beginners, webdev
Published: 2020-01-29 10:16:06

*Originally published on my blogging site [ajeet.dev](https://ajeet.dev/)*

**Disclaimer: I am a total noob when it comes to web development but I am improving my tech skills everyday. I have tried to keep this post as simple as I can so that it could help beginners like me. I have taken a very care of all the steps and codes I mentioned in this blog post, but if you find any errors or would like to suggest something, please feel free to comment. I would be grateful 🙏 **

---

Static sites are **fast, secure, flexible, and reliable**. You don't need to worry much about malicious code being injected into your site. The hosting cost of static sites are significantly cheaper. I won't go into the details on this topic but here is [a great article on static sites by Scotch](https://scotch.io/bar-talk/5-reasons-static-sites-rock).

In this blog post, I am going to deploy a static site on Google Firebase, and that too for FREE. The post is a step by step guide, and will be helpful especially for **newbies in tech**.


![Google Firebase Logo](https://dev-to-uploads.s3.amazonaws.com/i/yywr4rujvpdz72z80p3m.png)

Firebase was acquired by Google in 2014. It is built on Google infrastructure, and helps you build high-quality apps quickly, and that too without managing infrastructure. [Google Firebase](https://firebase.google.com/) lets you host your static contents for free under its Spark plan. [Read more about Firebase hosting](https://firebase.google.com/docs/hosting/).


## Prerequisites

As I said, this how-to guide is **purely for beginners**. So, to host your static site, you only need

1.  A Google account
2.  A laptop or desktop with Windows OS running
2.  Familiarity with basic keyboard functions of your laptop or desktop

That's it. Let's get started.

#### Step 1: Create a Project in Google Firebase

[Register](https://firebase.google.com "Google Firebase Sign in link") your account with Google Firebase. Create a Google account if you don't have. In the [Firebase console](https://console.firebase.google.com), click **Add project**.

![ Create your first project in firebase console](https://dev-to-uploads.s3.amazonaws.com/i/siu59yraoaeiq6zajwu7.png)


Enter a **Project name**, **Project ID** (Optional as Firebase automatically assigns a unique ID to your Firebase project). Use the **Default settings** for now, and click on **Create Project.**

![ Add a project in Firebase console](https://dev-to-uploads.s3.amazonaws.com/i/0qh9peg40uicy2r8q8va.png)

Once the Project is created, click on Continue button, and you will be directed to your Firebase Dashboard. You will find a few details here:

![ Google Firebase Dashboard or Console](https://dev-to-uploads.s3.amazonaws.com/i/a9ezrxhgopr98b1f7pbn.png)

1.  The current project is "thenewspaper-tech-demo". Click on the dropdown to  see all your projects, if you have created more than one.
2.  The current project is set to "thenewspaper-tech-demo"
3.  You can configure the settings for the current project by clicking on the project settings icon. For now, leave as it is.
4.  We will use this Hosting tab to deploy our static site.
5.  Your Firebase plan is Spark which is Free. [See all the Firebase Plans and Pricing](https://firebase.google.com/pricing).

#### Step 2: Set up the Necessary Tools

To host your site, you need to install Firebase command line tools.

-   [Download and install Node.js](https://nodejs.org/en/download) for Mac/Linux/Windows. I am using Windows10 64-bit. Make sure you download the LTS version recommended for most of the users.
-   Open
     Windows PowerShell. To open, press Windows+X buttons simultaneously using your keyboard and then click “Windows PowerShell Admin”. Click Yes when prompted by User Account Control.

![ How to Launch Windows PowerShell](https://dev-to-uploads.s3.amazonaws.com/i/tn4o2j69osqf11loxjq1.png)

-   Install Firebase command line tools by running the following command in the PowerShell:

`$ npm install -g firebase-tools`

![ Install Firebase command line tools
](https://dev-to-uploads.s3.amazonaws.com/i/w7r05vig1wftj4v6iz79.PNG)


This command installs the globally available `firebase` command. If the above command does not work, then [change npm permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions),  and run the command again. To make sure you have the latest version of Firebase CLI (command line interface), re-run the above command even if you have installed the command lines tools previously.

#### Step 3: Build your site Locally with Firebase

Now, let's start the deploying process. In the already opened terminal, run the following command to sign in to Google. 

`$ firebase login`

Running this command will open your default browser window and ask you to give Gmail access to Firebase. Click on Allow button and connect with your email. If you don't have Gmail account, create one. You might get a pop of Windows Firewall to for access. Just Allow or Click on Yes. 

This command connects your local machine to Firebase and grants you access to your Firebase projects. You will see a "success: logged in as.." message in the shell.

To test that authentication worked (and to list all of your Firebase projects), run the next command. The displayed list should be the same as the Firebase projects listed in the [Firebase console](https://console.firebase.google.com/).

`$ firebase list`

![ Login to Firebase
](https://dev-to-uploads.s3.amazonaws.com/i/hnensgcs05u7r2vxczf0.png)


Next, to connect your local project to your Firebase project, run the following command from the root of your local project directory.

`$ firebase init`

Once you run the above command, you will see your project directory. The project directory will be located in a folder at this path "*C:\Windows\System32*". The name of the working folder will be whatever you will name it. By default, Firebase names it as "*public*". We will see this in a bit. For now, type Y or Yes and press Enter button to proceed with the steps.


![ firebase init command
](https://dev-to-uploads.s3.amazonaws.com/i/mmuo4m5m2oat60rfp7wd.png)

The `firebase init` command presents with you a series of configuration options. You need to choose Hosting. Go down by pressing *Down Arrow Key* using your keyboard, and then press *Space Bar* to select Hosting feature. Press Enter button to continue.

![ Firebase Hosting Config
](https://dev-to-uploads.s3.amazonaws.com/i/w9uxgbnw57131nej3vwk.png)

![ Firebase Hosting Config](https://dev-to-uploads.s3.amazonaws.com/i/nhoqicxqokjczupqm39y.png)

Now you will be presented with Project Setup.

![ Firebase Project Set Up
](https://dev-to-uploads.s3.amazonaws.com/i/aswghhq23xqfjaldocfq.png)

Select your project, which you created earlier in Firebase console. The project name I created was "thenewspaper-tech-demo". You can create a new project from here as well.

Moving ahead, you will be presented with Hosting Setup. You will need to choose your project directory. Specify a directory to use as your public root directory. To specify, type *public* and press Enter. Note that you can enter a different name (such as "my_first_project') instead of "public". At this point, specify your public root directory, but you can also [specify it later](https://firebase.google.com/docs/hosting/full-config#public) by editing your `firebase.json` config file.

![ Firebase Hosting SetUp
](https://dev-to-uploads.s3.amazonaws.com/i/opm99syxn0lwm3q4yxva.png)

To set up more Firebase products, you can run `firebase init` later. The default for the public root directory is called *public* which is located here "*C:\Windows\System32\public*". It is interesting to note that Firebase does a couple of smart things automatically:

-   It creates a `public` directory if you don't create it
    
-   It creates an `index.html` file and `404.html` file in the directory. Open the `public` folder to see both the files
    
![ Location of Firebase Public Folder
](https://dev-to-uploads.s3.amazonaws.com/i/1pajzxiszx7b89eh9gdx.png)
    

Next, you will need to choose a configuration for your site.

![ Firebase Site Config
 ](https://dev-to-uploads.s3.amazonaws.com/i/vxqk6prjhgu47c2b18jh.png)

If you select to make a [one-page app](https://dzone.com/articles/what-is-a-single-page-application), then Firebase automatically adds [rewrite configurations](https://firebase.google.com/docs/hosting/full-config#rewrites) for you. Since I don't want to re-write urls, I choose N, and press Enter button. 

This will complete the Firebase initialization process. Note that the `firebse init` command adds a couple of files to the root of local site directory:

-   A json file, `firebase.json` , that shows the[ project configuration](https://firebase.google.com/docs/hosting/full-config).
    
-   A `.firebaserc` file which provides information on [project aliases](https://firebase.google.com/docs/cli/#project_aliases).
    
![ Firebase init command add two files ](https://dev-to-uploads.s3.amazonaws.com/i/3x1ocaf88r0pffaozqdg.png)
    

Now, let's [Start the local server](https://firebase.google.com/docs/cli/#test-locally) for development. Run the following command from the root of your local app directory: 

`$ firebase serve`

This command will serve hosting files from the public directory, and will start a local server.

![ Locally deployed files
](https://dev-to-uploads.s3.amazonaws.com/i/hl1vtcua9s11m7ri4v3o.png)

Open your browser and type: `http://localhost:5000`

![ open firebase deployed site locally
 ](https://dev-to-uploads.s3.amazonaws.com/i/5nkxhkav01ik9hq2b0ew.png)

So, you have built your site locally, which contains the content as you see in the above screenshot.

Now, let's change the content of the site and re-built the site to view the updated contents. First, go to Windows PowerShell pop-up that is already opened. Shut down the local server. To do this, click anywhere in the pop up area, and press CNTRL+C button. It will shut down.

![ Shut down local server
](https://dev-to-uploads.s3.amazonaws.com/i/rj509bc3drjond5lrcp7.png)

As I had shown earlier, the html files are located here "*C:\Windows\System32\public*". Go to the folder, copy the index html file and paste the file at your desktop. Now, right click and open the index html file with any [Text Editor](https://www.google.com/search?q=best+text+editor). I am using [ Visual Studio Code](https://code.visualstudio.com/).
By default, you will see Notepad in your right click pop up. If you don't see notepad, choose another app option, and scroll down at the end, and select More apps. From there, select Notepad.

![ How to use a text editor in Windows
 ](https://dev-to-uploads.s3.amazonaws.com/i/gwa0y70y15p73cb5p5k3.png)

Once the html index file is opened, change the word "Welcome" to "Hello World." 

![ Edit index files
](https://dev-to-uploads.s3.amazonaws.com/i/693gwtczjoygghisyb9w.png)

Save the File. Simply press CNTRL+S to save.The output will look like this:
![ Edit index files
](https://dev-to-uploads.s3.amazonaws.com/i/wnmgultv0z9kjr4esmuv.png)

Now, copy the modified index file, and paste in the *public* folder. To do this, you need to be the Admin of the computer. Give the permission to paste. Run the following command to start the local server

`$ firebase serve`

This command will serve hosting files from the public directory, and will start a local server. Open your browser and type: [http://localhost:5000](http://localhost:5000) . You will see your changes.

![ Hello World
](https://dev-to-uploads.s3.amazonaws.com/i/ph97nk632hx4hvzoqlwo.png)


#### Step 4: Deploy your site

Now we will deploy this project. But first shut down the local server as I instructed before. 
To deploy to our Firebase project "thenewspaper-tech-demo", run the following command from your project directory:

`$ firebase deploy`

This `firebase deploy` command deploys a release to your Firebase project's default hosting sites:

`project-id.web.app`

`project-id.firebaseapp.com`

![ Firebase deploy command
](https://dev-to-uploads.s3.amazonaws.com/i/3n5qkg1a1w60htsp8thi.png)

So, you will view your sites that will look like similar to these URLs:

[https://thenewspaper-tech-demo.web.app](https://thenewspaper-tech-demo.web.app "firebase deployed site")

[https://thenewspaper-tech-demo.firebaseapp.com](https://thenewspaper-tech-demo.firebaseapp.com "firebase deployed site")

![ View deployed site in firebase
](https://dev-to-uploads.s3.amazonaws.com/i/2kp1yqzyd080h7h4e21w.png)

![ View deployed site in firebase
 ](https://dev-to-uploads.s3.amazonaws.com/i/bh38gxwfv3x9qr6ltifa.png)

You can also see these URLs when you go to Hosting section of your Firebase Console.

![ Hosting section of Firebase Console
 ](https://dev-to-uploads.s3.amazonaws.com/i/jty9yrou4580nl3s5oih.png)

Congrats 🎉🎉! You have deployed your first static site with firebase, and that too for free.



---

**Don't forget to subscribe to my weekly [Newsletter](https://ajeet.dev/subscribe/) 📧**

---



*Credits: *
Cover image built with [BlogCover](https://blogcover.now.sh/)*