SIMAEC.NET WEB PUBLISHING

Publish a Web Page - Website Deployment with Firebase Step by Step

Follow the simple instructions to upload your web page to a webserver. There are many different platforms available. In our example we use Firebase as hosting platform.

Setup

Previously, we created a simple web page located in the sub-folder "public". Now, we want to deploy this file to a firebase web app.

If we haven't yet installed firebase tools, this is the moment where we have to complete this step. We also need a Google Account and a Firebase Account. Check Firebase Hosting for more information.

Opening a console/terminal, we change to the root folder of our project where the sub-folder "public" is located. This root folder will serve as firebase hosting base and has to be initialized as such with the command:

firebase init

It may be that your computer hasn't been yet authorized to connect with your firebase account. If so, you have to login first using the command line command:

firebase login

The firebase init command will start a setup wizard. On the first screen select "Hosting: Configure files for Firebase..." (scrolling down, select with space) then continue with "enter".

On the next screen select "Create a new project" and continue then provide a unique key for your project, then name your project

The unique key must be unique within the Firebase universe so you may have to be creative in choosing one.

The firebase init wizard will do some configurations and then will ask you to provide the name of the public directory. We named it "public". Enter it.

Next question answer, "Configure as a single-page app?", with no.

Next question answer, "Setup automatic builds and deploys with GitHub?", with no.

We are done.

Review and Deploy

Next, we review our web site (our single page) before we deploy it. Enter

firebase serve

This will launch a local web server. The url is provided. Copy + Paste the url into a web browser window. You can edit the page "index.html" until you are happy with the result.

Finally, we deploy our web page to the firebase hosting platform by entering the command:

firebase deploy

After this step you can see your web site using the url https://<<your-project-id>>.firebaseweb.com

Final Touch

Not much more to add. You can assign a own domain name to your project using the firebase console and you can continue updating the one page and adding more pages.

Note that the firebase init command created a file named "404.html". Customize this page. It will be served in case someone requests a page in your website which doesn't exist.

Next: Promote a Web Page

Code a Web Page - For Beginners

Why?

  1. Build a Web Page
  2. Publish a Web Page
  3. Promote a Web Page

Resources