Static sites are fast, secure, flexible, and reliable. You don't need to manage a server. No updates and patches are needed, and thus no need of worrying about malicious code being injected into your static site.
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 begineers.
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 lets you host your static contents for free under its Spark plan. Read more about Firebase hosting.
As I said, this is how-to guide purely for beginners. So, to host your static site, you only need
- A Google account
- 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
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.
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:
- The current project is "thenewspaper-tech-demo". Click on the dropdown to see all your projects, if you have created more than one.
- The current project is set to "thenewspaper-tech-demo"
- You can configure the settings for the current project by clicking on the project settings icon. For now, leave as it is.
- We will use this Hosting tab to deploy our static site.
- Your Firebase plan is Spark which is Free. See all the Firebase Plans and 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 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.
- Install Firebase command line tools by running the following command in the powershell:
$ npm install -g firebase-tools
This command installs the globally available
firebase command. If the above command does not work, then change 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: Deploy your site 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.
$ firebase list
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 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.
Now you will be presented with Project Setup.
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 by editing your
firebase.json config file.
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". Firebase does a couple of smart things automatically:
- It creates a
publicdirectory if you don't create it
- It creates an
404.htmlfile in the directory
Next, you will need to choose a configuration for your site.
This will complete the Firebase initialization. Finally, the
firebse initcommand adds a couple of files to the root of local site directory:
- A json file,
firebase.json, that shows the project configuration.
.firebasercfile which provides information on project aliases.
Start the local server 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.
Open your browser and type:
So, you have built your site locally, that 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 first. To do this, click anywhere in the pop up, and press CNTRL+C button. It will shut down.
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. I am using Visual Studio Code. By default, you will see Notepad in your right click pop up. If you don't see notepad, select Choose another app option, and scroll down at the end, and select More apps. From there, select Notepad.
Once the html index file is opened, change the word "Welcome" to "Hello World." Save the File. Simply press CNTRL+S to save.
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 . You will see your changes.
Now we will deploy this project. But first shut down the local server. To deploy to our Firebase project "thenewspaper-tech-demo", run the following command from your project directory:
$ firebase deploy
firebase deploycommand deploys a release to your Firebase project's default Hosting sites:
So, you will view your sites that will look like similar to these URLs:
You can also see these URLs when you go to Hosting section of your Firebase Console.
Congrats 🎉🎉! You have deployed your first static site with firebase, and that too for free.