How to host a free website on Firebase, step by step
Quick Summary:
- Create a Firebase project through the Google Firebase Console
- Install Node.js and the Firebase CLI on your computer
- Build your static website with HTML, CSS, and JavaScript
- Initialize Firebase Hosting in your project directory
- Deploy your website using a single command
- Access your live site on a free Firebase subdomain
- Optional: Connect a custom domain for a professional touch
Hosting a website doesn't have to cost money or require complicated server configurations. Firebase Hosting, Google's web hosting platform, offers a generous free tier that's perfect for personal projects, portfolios, and small websites. With global CDN distribution, automatic SSL certificates, and lightning-fast performance, Firebase provides enterprise-level features at no cost. Here's how to get your website live in less than an hour.
Getting Started with Firebase
First, you'll need a Google account to access the Firebase Console. Head to firebase.google.com and click "Get Started." Once you're in the console, create a new project by clicking "Add Project." Give your project a meaningful name—this will be part of your default URL, so choose wisely. You can disable Google Analytics if you don't need usage tracking for a simple website.
Installing the Required Tools
Before deploying your site, you'll need Node.js installed on your computer. Download the LTS version from nodejs.org and follow the installation wizard for your operating system. Node.js includes npm, the package manager you'll use to install Firebase tools.
Once Node.js is ready, open your terminal or command prompt and install the Firebase CLI globally by running npm install -g firebase-tools. This command-line interface will handle all your deployment tasks. Verify the installation by typing firebase --version to see the version number.
Preparing Your Website Files
Your website needs to be a collection of static files—HTML, CSS, JavaScript, images, and other assets. If you're starting from scratch, create a project folder and add an index.html file as your homepage. You can build anything from a simple landing page to a complex single-page application. Just ensure all your files are organized in a single directory.
For those using frameworks like React, Vue, or Angular, you'll need to build your project first. These frameworks typically create a build or dist folder containing the production-ready files. That's the folder you'll deploy to Firebase.
Initializing Firebase Hosting
Navigate to your project directory in the terminal and log into Firebase by running firebase login. This opens a browser window where you'll authenticate with your Google account. Grant Firebase the necessary permissions to manage your projects.
Next, initialize Firebase in your directory with firebase init. You'll be asked several questions. Use your arrow keys to select "Hosting" and press spacebar to confirm. Choose "Use an existing project" and select the Firebase project you created earlier from the list.
When asked about your public directory, enter the folder name containing your website files (often public, build, or dist). If your files are in the root directory, just type a period. For the next question about configuring as a single-page app, answer "yes" if you're using a framework with client-side routing, or "no" for traditional multi-page sites. Finally, choose not to overwrite your index.html if you already have one.
Deploying Your Website
With initialization complete, deploying is remarkably simple. Type firebase deploy and press enter. Firebase will upload your files, configure the hosting environment, and provide you with a live URL—typically in the format your-project-name.web.app and your-project-name.firebaseapp.com.
The entire deployment process usually takes less than a minute. Once complete, you'll see your hosting URLs in the terminal. Click or copy one of these links to view your live website. Your site is now accessible to anyone worldwide, complete with HTTPS encryption and distributed across Google's global CDN.
Making Updates
Whenever you need to update your website, simply make changes to your local files and run firebase deploy again. Firebase will upload only the changed files, making updates quick and efficient. There's no limit to how many times you can deploy.
Custom Domains and Next Steps
While the free Firebase subdomain works perfectly, you can connect a custom domain you own. In the Firebase Console, navigate to Hosting and click "Add custom domain." Follow the verification steps and update your domain's DNS records. Firebase will automatically provision an SSL certificate for your custom domain.
Firebase's free tier includes 10 GB of storage and 360 MB of daily data transfer, which is plenty for most personal websites. If you outgrow these limits, you can upgrade to a paid plan, but most small sites will never need to.
With your website now live on Firebase, you've joined millions of developers who trust Google's infrastructure for reliable, fast, and free web hosting.
Tagged:
