How to Create a Free Landing Page on Google Firebase
In this post, I’ll show you how to choose and launch a simple static landing page on Firebase to accept leads and send them to your sales team.
If you are sick and tired of so-called website building “constructors” like I am, or maybe, you’re over asking a programmer 300 times to install a Google Analytics code, this article could be extremely helpful for you.
When I opened up this easy-go method to build a landing page, I didn’t need to deal with website constructors anymore. You can’t control them, as they often bug for NO REASON (hi, Wix).
I was fed up with it and developed a method for launching a landing page on a pretty new technology, the Google Firebase Cloud. I call this the Firepage Method.
What’s the gain?
- Takes no longer than getting to know a “website builder” – one evening on average. (Super-duper quick!)
- Completely free – no tricks! (no stuff like “it’s free but to remove a logo, you need to pay…”).
- Every pixel remains under your control, and you can tweak everything.
- Requires a kindergartener’s code copy-pasting skills.
How I Applied Firepage Landing and Created a CV Website in One Evening
One day I got bored and decided to create my personal website using my FirePage Method, of course.
This whole website cost me:
- $1.3 for a 1-year domain
- 3 hours of work
YES, THAT’S ALL. I guess it’s pretty impressive.
If I decided to make my page on a website builder like Wix, Tilda, Ucraft, no difference, l would spend more than 20 hours playing with drag and drop boxes and still get a result that was very far from satisfying.
The Firepage Method = a Quick, Cool, Easy and Free Landing Page.
Okay, let’s dive in…
4 Steps for Launching a Landing Page With the Firepage Method
Here are 4 simple steps to walk through together to get what you want out of life, or actually — just a landing page 🙂
Your Firepage Journey:
- Pick your landing page template
- Host it on Firebase and connect your domain
- Setup a Real-Time Database to accept leads
- Send leads to your email and get notified
Step #1: Pick a Template You Like and Modify It
Pick a Template of Your Dreams
If you’re a pro web designer and or an expert in coding, you might skip this part and develop your own completely unique template (outsource it maybe?)
But why would you bother with that? Compared to “constructors” or page builders there are 100,000 + beautiful templates available for FREE or for the fair price of 5$..
Here is a link for the free template collection.
And here is a link for a paid one.
Just put these phrases into almighty Google: “html5 template” or “HTML free template”: there are an infinite amount of them, for any purpose.
Let’s take a look at how to change a readymade template …
Learn How to Change Your HTML5 Template
Everything is very simple here: open your template in Chrome or any other browser you prefer and take a look at it.
Shrink your browser window to see how it looks on mobile. (Because you know, in 2019 mobile traffic is growing … blah blah blah.)
Satisfied? Nice! Let’s alter it.
Open index.html file in a text editor (Notepad for Windows or TextEdit for Mac)
Sometimes it might look like a mess. Or your template may have direct readme.txt instructions. In the end, it doesn’t matter.
Just open that file in a browser at the same time, copy the text you want to change, and find it in your notepad. (Ctrl + F) Now, change it and don’t forget to save.
The same goes for pictures. Find them in the img folder.
Just copy and paste your pictures into that folder and change the file names inside the HTML file to yours. Watch out for dimensions! They have to be identical.
Tip: You can check previous image dimensions and cut your pictures according to them.
Got a landing page completed? Now everyone should see your masterpiece.
Step #2: Host Your Landing Page on Firebase and Connect Your Domain
Learn how to host a page on Firebase
Now we need you to get going on the internet, and here is where Google magic starts.
First, install Node.js — a secret ingredient to make everything work. https://nodejs.org/en/ Then do whatever it says. You need it to run Google’s code on your PC.
Next … Go to https://firebase.google.com and “Get Started”.
Start your project. Push some buttons — there is only one road to the screen below.
Under the development section, find [Hosting], click on it, and follow further instructions.
Then you have to open a Command Window in your website folder and execute the instructions Google gives you. Here is a link explaining how to open a command window in a website folder.
But if you don’t want to watch a youtube ad, Hold Shift + Right Mouse Click in a project folder, and select “Open command window here”.
That’s how it might look like on Mac or Windows, just make sure you are in the right folder. (outlined red).
Once you get it done, the new folder should appear in your project folder.
Just copy everything in your project folder to that “public” folder, but keep firebase.json. Go back to a command window and type “firebase deploy”.
We Are LIVE. Glad you made it this far, you are doing great.
Buy a Domain & Connect It to Firebase
From this point, everything is pretty simple, so I won’t dive deep into details. Just go to GoDaddy and choose a domain you like.
Once you get a desirable domain, or if you have one already, head back to Firebase and connect your domain to it.
Here is a little article I found on how to verify it, which is not really a hard task after all you’ve accomplished already today.
Once it’s verified, Google shows you an IP address which you have to enter as an A record for your domain on GoDaddy
That operation is an absolutely identical process with editing your txt record. Instead of TXT, just choose A record and you’re set.
Done? Great. Press Finish and your site should be available on your domain. Google provides you with HTTPS and CDN automatically and for FREE!
Sometimes certificate production might take a while — it took 1 hour for me.
Firepage Method Post Series
You’ve just completed Part #1 of the Firepage Method and now you have a working website on the internet. But that’s not a Firepage just yet, because a good landing page should accept leads and send them to you.
Jump to the second part and continue, or take a sweet break (you deserve it) and leave a comment.
Thank you for reading and see you in Part #2.