Deploy Hugo to Firebase

In this blog post, I’ll show you how to deploy the Hugo website to Firebase Hosting.

First you need install firebase-tools.

npm install -g firebase-tools

Than login to your Firebase Account.

firebase login

Choose the option Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys by pressing the space bar. Then, select Create a new project. Enter the project name and project ID.

Answer the questions as shown below. For the most part, use the default answers except for the single-page app question.

What do you want to use as your public directory? public
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) N
Set up automatic builds and deploys with GitHub? (y/N) y

Log in to your GitHub account.

Set up the workflow to run a build script before every deploy? Yes
What script should be run before every deploy? hugo && firebase deploy

Create a repository on GitHub and answer the question using it.

Next, add a remote to your Git repository

git remote add origin git@github.com:[your_repo_name]/blog.git

You can manually deploy the project to Firebase using this command.

hugo && firebase deploy

At that point, I realized I had made a mistake, so I ran firebase init and answered the questions again as follows:

But there’s no need to do this again. Simply overwrite the firebase.json file as shown below.

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Anyway, when you run firebase deploy, you will be able to see your website live at xxxxxxx.web.app.

Then, we will change the domain of the website to slmyldz.com.

Open the hosting tab on the Firebase console and click on Add custom domain.

Add the TXT DNS record as shown in the Firebase console. Firebase console will then display the follow-up steps.

Please be patient, as it takes some time for the new DNS records to be applied and propagated to the servers.

Yay! My blog is ready.