There are a million ways to host a static website. One of my favorites is via firebase hosting, because the spark plan is free and lets you experiment a good amount before you have to pay stacks. I've hosted personal sites, my development agency landing page https://www.flexbone.dev, and my reading highlighter extension page https://www.readwme.app via this method.
The only accounts you need are a Firebase account, and a domain you purchased via Google domains.
Now that you have those two, create a new Firebase project with the + Add project widget.
To setup your static site, use any static html website you want to host and put it in a directory on your machine. cd into that directory and enter the following commands.
npm install -g firebase-tools
firebase login
Log into your firebase account in the web and your terminal should give you a success message.
firebase init
The firebase cli will have you select the project you created in the firebase console above. Choose the project you created before.
Now your directory should have a firebase.json as well as a public directory. Copy your index.html or your entire static site files into this directory.
Deploy your website.
firebase deploy
Your website should be live at something.firebaseapp.com
Redirect your website to your custom domain
This part always annoys me because it's poorly documented and different hosting domains call the records different names etc. So for firebase hosting and google domains, hopefully this explanation works.
Open up the console and look at the left side of the screen, you should see a drop down called Build, which has a link to the Hosting section.
You'll see a dashboard like this below that has the domains associated with your project. Before you add your custom domains, you won't have the two at the bottom here.
Add both www.yourgoogledomain.com and yourgoogledomain.com as custom domains in this section of the dashboard. The great part here is if the domain was purchased from google, it should skip through the verify ownership part of the domain and confirm it is yours.
When you add a custom domain, you'll see this above. You need to enter this data on the domains site. Go to domains.google.com and go to your domain you added to your firebase project.
- Click DNS
- Manage custom records
Create a first record where the values are as follows:
Host name - empty
Type of record - A
TTL - 3600 (default is fine)
Data - The IP address from firebase we saw above. Isn't it annoying that firebase called it "Value" and domains calls it "Data". Enter it here.
Create a second record that is the exact same as the above, except with the Host name filled in as www.
Host name - www
Type of record - A
TTL - 3600 (default is fine)
Data - Same IP address as above
Now, when you go back into the dashboard on firebase, your custom domain should have a pending status. You should be able to navigate to your custom domain and see your site right now, but until the pending goes away, you won't have https:// access, so you'll see an unsecure version of your site. Give it an hour and it should be fine. That's all
Top comments (0)