I’ve seen a lot of Roblox developers fall into the trap of paying money to host their portfolio websites (not including domains, only hosting). I think I have found what is, in my opinion, the best free (and paid) solution for hosting static websites. My hope with this tutorial is that you will walk away knowing how to host your portfolios (any any other small static websites) without paying a dime.
What is it?
Firebase is a cloud provider that’s owned by Google. It is very cheap for what it is, especially when you compare it to competitors like AWS and Azure. Not only that, but it’s perfect for hosting small, single-page apps like portfolios.
Specifically, this tutorial will be utilizing Firebase Hosting (but please check out their other services here). I will be refering to Firebase Hosting as Hosting from this point forward.
Here’s what sets hosting apart from other services like GitHub Pages or Glitch:
- It’s fast
All files for your website are deployed to edge CDNs across the globe. No matter where someone is, they can access your site quickly. - Free & 100% automatic SSL certificates
- Easy custom domains
- Deploy to hosting with one CLI command
firebase deploy
Getting Started
Before you can do anything else, you need a portfolio! For this tutorial I will make a simple single-page site. Not only that, but we’ll also add analytics and performance monitoring (still free)!
Let’s just use some simple boilerplate for the site:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Brooke's Awesome Portfolio</title>
</head>
<body>
<h1>Hey there!</h1>
<h3>I make websites and stuff</h3>
<p>nice.</p>
</body>
</html>
Now, let’s setup the Firebase project. Before you do this, you need Node.js and NPM installed. Run the following in your command-line:
npm install -g firebase-tools
If you need more help installing the CLI then please visit here.
Next, you need to authenticate with the CLI tool. Run the following command and follow the steps:
firebase login
You should only need to run this once!
Now, run the following command in your project directory:
firebase init hosting
This will initialize a Firebase project in your current project. You will then be prompted for your projects options:
- Are you ready to proceed? Yes
- Select a default Firebase project for this directory: You should create a new project if you don’t already have one setup
- What do you want to use as your public directory? Leave this as default (public)
- Configure as a single-page app (rewrite all urls to /index.html)? You should probably say yes to this if your portfolio is a single page, otherwise say no
That’s the project setup! Let’s walk through your project directory now:
-
public (this actually holds your website, I’ll go into more detail on this next)
- index.html
- 404.html (if you didn’t enable single-page app)
- .firebaserc (don’t worry about this)
- .gitignore (only worry about this if you’re going to be using some sort of version control)
- firebase.json (this is the options for your project, you shouldn’t need to mess about with it for this tutorial)
- index.html (our original website, I’ll get to this next as well)
Putting everything in place
Once you have your project generated by the Firebase CLI you need to remove index.html from the public directory. Once you’ve done that, move your original index.html into the public directory. That’s it!
Now you can test your site locally. Run the following command:
firebase serve
You should now visit localhost:5000 in your browser.
Cool!
Optional: Setting up CSS and JavaScript
Most websites are going to want to store their CSS and JavaScript in separate files to the HTML. Doing that with Hosting is just like you normally would.
In the public directory, simply create css or js folders (call it what you want) and then reference it in your HTML like you would any other site.
Deploying to Firebase
Like I said at the start, deploying is done with a single command! Just run the following:
firebase deploy
A few seconds later your site should be live! Just visit the following in your browser:
https://PROJECT_ID.firebaseapp.com
Example:
Optional: Custom Domain
If you already own a domain then you can quickly and easily link it to your Firebase site.
First, visit the hosting page on the Firebase Console:
Next, select the button to add a custom domain:
You should now follow the prompts on screen. Once you are done it can take a few hours for your SSL certificate to be setup and provisioned.
Optional: Performance Monitoring and Analytics
If you want to monitor the performance of your website and get analytics then you should follow these steps (it’s still free!).
First, go back to your projects overview page and add an app:
Now name your app. You shouldn’t tick the Also setup Firebase Hosting button because we already have it setup.
On the next section (Add Firebase SDK), copy the code snippet and add it to the bottom of your index.html body tag:
<body>
<h1>Hey there!</h1>
<h3>I make websites and stuff</h3>
<p>nice.</p>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js"></script>
<script>
// Your web apps Firebase configuration
var firebaseConfig = {
YOUR CONFIG GOES HERE
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</body>
Next, you need to include the analytics and performance monitoring libraries in your project. Put the following below <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-performance.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-analytics.js"></script>
Now you just need to add the following under firebase.initializeApp(firebaseConfig):
firebase.analytics();
firebase.performance();
You should then be able to view performance and analytics for your site on the console within the next day:
You’re done!
I hope some people found this tutorial useful. It was pretty fun to write.
If you have any questions or found an issue with the tutorial then please reply with them or DM me!
(I accidentally posted this half-finished so sorry for the two posts, the other one should delete itself in 24 hours)
