How I Created My Own Hosted Blog Using Hugo and Firebase

I’ve always wanted to create a blog of my own curated, personal, and hosted under my own domain, all without spending a dime. Recently, I discovered Hugo, a static site generator, and it lit a fire in me. I realized I didn’t need to write much code to publish my thoughts, and nothing could stop my scribbles from finding a home on the internet. Creating a blog with Hugo is surprisingly simple even someone with basic coding knowledge can do it. Best of all, it’s free, as long as you already have a domain name.

Pairing Hugo with Firebase Hosting turned out to be the perfect combo for me. Hugo takes care of generating a fast, static site, and Firebase delivers it globally super quick and totally free. The best part? With GitHub Actions in the mix, the whole thing gets deployed automatically whenever I make changes. Just push and forget it’s live!

In this guide, I’ll walk you through everything I did to bring my blog to life from setting up Hugo to getting it online with Firebase and automating the whole process. Here’s what we’ll cover:

• Spinning up a Hugo blog from scratch
• Installing a theme (I went with hugo-narrow, but you can pick your vibe)
• Setting up Firebase Hosting with multi-site support
• Automating deployments using GitHub Actions so it all just works

1. Setting Up Hugo

First things first, I had to set up Hugo, the static site generator that makes blogging super fast and code light. Installing it was quick and painless, and once it was on my machine, I was ready to roll.

Installing Hugo

brew install hugo           # macOS
sudo apt install hugo       # Linux
choco install hugo-extended # Windows

Once installed, check if it’s working:

hugo version

You should see the version number show up. If you do great! Hugo is ready.

Creating Blog Project

With Hugo installed, it was time to kick things off by actually creating the blog project. This part was surprisingly easy just a single command, and Hugo sets everything up for you.

hugo new site my-blog
cd my-blog

This gives you a fresh project folder with all the basic structure you’ll need layouts, content folders, config files, the works.

At this point, the blog is still a blank canvas. Next step: adding some style with a theme.

Adding the Theme to Your Blog

A blog with no theme is just… sad markdown. I wanted something simple, clean, and minimal after a bit of browsing, I went with hugo-narrow. It’s lightweight and just works.

Theme Link: https://hugo-narrow-docs.vercel.app/

git init
git submodule add https://github.com/tom2almighty/hugo-narrow.git themes/hugo-narrow
# Update submodules
git submodule update --init --recursive --remote

Update hugo.yaml:

baseURL: 'https://example.com'  # Change to your website URL
title: 'My Blog'  # Change to your website title

Adding a Post

Time to write! Hugo makes it super simple to create new blog posts. Just one command, and you’ve got a ready to edit Markdown file waiting for your words.

hugo new posts/my-first-post.md

Edit the front matter:

title: "My First Post"
date: 2025-06-13
draft: false
categories: ["Blog"]
tags: ["Hugo", "Tutorial"]

Change the title, write whatever you want below it, and when you’re ready to publish, set draft: false.

Building the Site

To preview your site locally:

hugo server -D

This generates the static files in the public/ folder. You can now visit http://localhost:1313 in your browser to view your website.

2. Going Live with Firebase Hosting

Writing’s fun, but getting your blog on the internet? That’s where the magic happens. I decided to go with Firebase Hosting-it’s fast, free, and plays nicely with Hugo. Let’s set it up.

Install Firebase CLI

You’ll need the Firebase CLI to deploy stuff:

npm install -g firebase-tools

Then log in to your Firebase account:

firebase login

Initialize Firebase Hosting (Multi-site)

I chose to go with Firebase’s multi-site hosting because I host both my personal portfolio and my blog under the same Firebase project. Of course, you can choose to keep them separate if that works better for you.

Now, inside your Hugo project folder:

firebase init hosting

When prompted:

• Select Use an existing project
• Choose Configure as a multi-site deployment
• For the public directory, enter: public

Hugo builds your site into the public folder—so that’s what Firebase needs to serve.

After init, you’ll get:

.firebaserc

{
  "projects": {
    "default": "Your-Blog-Name"
  },
  "targets": {
    "Your-Blog-Name": {
      "hosting": {
        "blog": ["Your-Blog-Name"]
      }
    }
  }
}

firebase.json

{
  "hosting": [
    {
      "target": "blog",
      "public": "public",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
    }
  ]
}

Make sure the target name matches what you’ll use in GitHub Actions later (like hosting:blog).

Test a Local Deploy (Optional)

Want to test it before going full CI/CD? If you see your blog live at the Firebase URL—nice job!

hugo --minify
firebase deploy --only hosting:blog

3. Push Your Blog to GitHub

Initialize a Git repository if not already done:

git init
git add .
git commit -m "Initial Hugo blog setup"
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

Make sure your code lives in the main branch, our GitHub Actions workflow will watch that.

4. Automate It with GitHub Actions

Manual deploys are fine… once. Let’s automate it so your blog goes live every time you push.

Generate a Firebase Token

One-time thing—this gives GitHub permission to deploy:

firebase login:ci

Copy the token it gives you.

Add the Token to GitHub Secrets

Go to your GitHub repository:

• Settings → Secrets and Variables → Actions
• Click New repository secret
  • Name: FIREBASE_TOKEN
  • Value: (paste the token you copied)

Create the Workflow File

Now let’s create the GitHub Actions config:

.github/workflows/deploy.yml

name: Deploy Hugo blog to Firebase

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'

      - name: Build Hugo site
        run: hugo --minify

      - name: Install Firebase CLI
        run: npm install -g firebase-tools

      - name: Deploy to Firebase Hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
        run: |
          firebase deploy --only hosting:blog

5. Final Push & Deploy

All done? Time to push and watch the magic happen.

Trigger a deploy:

git add .
git commit -m "New blog post"
git push origin main

That will trigger your GitHub Actions workflow, build your Hugo blog, and deploy it to Firebase automatically!

Optional: Clean Up Extra Workflows

If you experimented with multiple .yml files under .github/workflows/ (like I did), make sure to remove or rename any that you’re not using to avoid duplicate workflow runs.

rm .github/workflows/preview.yml
git commit -am "Remove unused workflow"
git push origin main

Summary

And we are done!

You now have:

• A working Hugo-based blog
• Firebase Hosting with target-based deployment
• CI/CD using GitHub Actions from the main branch

Want to add features like analytics, comments, or a newsletter? Drop a comment below or ping me and I’ll write a follow up!