Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again. Hugo is a general-purpose website framework.

Once we are ready to publish we can run the hugo command and it generates a static site that we can deploy. All the files needed for deployment will be located in the public directory and consists of various files such as HTML, CSS, JavaScript, and more. Let's take a look at how we can deploy these files on Firebase Hosting under our own custom domain.

Setup Firebase

  • Go to Firebase Console and create a new project.
  • If you haven't installed firebase-tools globally yet, open your terminal and type npm install -g firebase-tools.
  • Log in to Firebase by running the command firebase login at your project root. This will open a browser where you can select your account and log in.

Initialize a Firebase project

  • Go to the root directory of your Hugo project and run the command firebase init to initialize the Firebase project.
  • You'll see a list of options. Use the arrow keys to navigate to Hosting: Configure and deploy Firebase Hosting sites, and press the space bar to select it. Then press enter to confirm.
  • Select the option Use an existing project and choose your project.
  • When asked What do you want to use as your public directory? (public), just press enter to use the default directory named public.
  • For the question Configure as a single-page app (rewrite all urls to /index.html)? (y/N), answer N (No).
  • If asked to overwrite the files public/404.html or public/index.html, answer N (No).

After these steps, you should see the message: ✔ Firebase initialization complete!

Deploying your Hugo site to Firebase

To deploy your Hugo site to Firebase, follow these steps:

  • Before you deploy, make sure to publish your site with the hugo command (or hugo --gc --minify for optimized production builds) every time you make changes and want to deploy.
  • Call the firebase deploy command to deploy your site.
    Alternatively, you can run the publish and deploy commands together in a single line: hugo && firebase deploy or hugo --gc --minify && firebase deploy.

Once the deployment is complete, you should see a hosting URL to your site like this: https://project-id.web.app.

Setting up a custom domain

By default, your website is available on a standard domain provided by Firebase, such as https://project-id.web.app or https://project-id.firebaseapp.com. But if you prefer to use your own custom domain, you can set it up easily with Firebase Hosting.

Firebase Hosting provides an SSL certificate for your custom domain, ensuring your site is served over HTTPS and delivered quickly using a global Content Delivery Network (CDN).

Here's how you can set up your custom domain:

1. Add your custom domain to Firebase Hosting

  • Navigate to Build → Hosting on Firebase Console
  • Click the "Add custom domain" button
  • Enter your domain and click "Continue"

You will be provided with TXT records that you need to add to your domain's DNS records to verify your domain ownership.

2. Verify your domain ownership

  • Go to your domain provider's DNS management page
    In my case: Namecheap → Domain List → [example.com] Manage → Advanced DNS → Host Records
  • Add a new record with the following details (you may need to delete any existing records with Host value @):
    • Type: TXT Record
    • Host: @
    • Value: Verification value provided in Firebase Console
  • Click the "Verify" button in Firebase Console
    • If you closed the "Add custom domain" page, repeat step 1 and then click the "Verify" button at the end. You don't need to repeat step 2.
    • You may need to wait for up to 24 hours for the updated TXT records to propagate.

3. Go Live

After successful verification, you'll see the "Go live" page with new record data that needs to be added to your domain provider's DNS records.

  • Go to your domain provider's DNS management page
  • Add a new record with the following details:
    • Type: A Record
    • Host: @
    • Value: Value provided in Firebase Console
  • Click the "Finish" button

This will set up your apex (root) domain. If you want to set up your www subdomain as well, add another record with the same values, but with Host set to www. You also need to add the custom domain starting with www to Firebase Console.

Note that it may take some time for your SSL certificate to be provisioned. Until then, you may see a "Your connection is not private" message when you visit your website. Usually, the propagation of your DNS records and provisioning of your SSL certificate takes a few hours, depending on your domain provider.