You are reading this because you want to host your HTML website on Firebase (for that fast global CDN) and make changes via Github. If your website only requires HTML, you can host your HTML code on Github and have any changes you make to the HTML on Github automatically push through CircleCI to Firebase.
https://nextjs.org/docs/advanced-features/static-html-export
The following tutorial assumes that you have already created accounts at Github, Firebase, and CircleCI
Follow the CLI installation instructions [here]. (https://firebase.google.com/docs/cli#install_the_firebase_cli) For now there is no way to avoid this, but if I figure it out, I will update this blog.
Go through the process of creating a new firebase project and make sure to WRITE DOWN the project name for later.
Create a new firebase project Note the name of the project. It should be the name of the project plus a couple of random digits.
Run the following command in a terminal window to generate the token necessary for CircleCI to connect to Firebase.
firebase init
firebase login:ci
Clone https://github.com/wndsrfr21/templatepage.git into your own github directory
Change the URL "https://github.com/wndsrfr21/templatepage.git" to your github repository URL that you created above.
change FIREBASE_TOKEN_TEMPLATEPAGE to whatever you want to name the variable that holds the firebase token. I named the variable after the project name so that the variable would be unique to this project.
You can change the name of the work flow "deploy_templatepage_website" to anything that you want. Maybe wait to change this later when you've successfully run this tutorial once so that you don't stack up too many changes at once.
Change "templatepage-b9a02" to the project name that was generated by Firebase in the first step.
Create the token that CircleCI needs to log into Firebase.
- In the left hand nav bar, click on PROJECTS.
- In the new page, click on the name of your Github repository.
- In the upper right of new window, click on PROJECT SETTINGS.
- In the left hand nav bar of the new page, click on ENVIRONMENTAL VARIABLES
- In the updated main page, click on the blue ADD VARIABLE button
Name your variable firebase_token_<project name> as the same name that you picked when modify the /.circleci/config.yml file above.
To exit out of the Environmental Variable page, click on the "X" in the upper right.
This will bring you back to the PIPELINES page. The first line should contain the last CircleCI attempt and there should be an ACTIONS column to the far right. Click on the "Rerun Workflow From Start" action. This will have CircleCI restart the process now that you have updated the Firebase token with the necessary information and your page should deploy!