Crafting Developer Blog with Hugo and Firebase: Step-by-Step Guide

Creating a developer blog can be an exciting journey, and in this guide, we'll explore how to set up a robust and efficient blog using Hugo, Firebase hosting, and Giscus for comments. We'll also be using the blist-hugo-theme to give your blog a sleek and professional look.

Why Hugo?

Hugo is a static site generator that enables you to build fast and flexible websites. It's an excellent choice for a developer blog due to its simplicity, speed, and extensive theme support.

Step 1: Installing Hugo and Creating a New Site

Start by installing Hugo on your machine. You can follow the installation instructions on the official Hugo website.

Once Hugo is installed, create a new site using the following commands:

hugo new site mydeveloperblog
cd mydeveloperblog

Step 2: Installing the blist-hugo-theme

Now, let's add the blist-hugo-theme to your Hugo site. You can clone the theme repository into the themes directory:

git clone https://github.com/apvarun/blist-hugo-theme.git themes/blist

Next, update your config.toml file to set the theme:

# config.toml
theme = "blist"

Step 3: Creating Content

Create your first blog post by using the following command:

hugo new posts/my-first-post.md

Edit the markdown file in the content/posts directory with your blog content.

Step 4: Testing Locally

To preview your site locally, run the Hugo development server:

hugo server -D

Visit http://localhost:1313/ in your web browser to see your blog in action.

Step 5: Setting Up Firebase Hosting

Firebase hosting is an excellent choice for hosting static websites. If you don't have a Firebase account, sign up and create a new project on the Firebase Console.

Install the Firebase CLI:

npm install -g firebase-tools

Navigate to your Hugo project folder and run:

firebase init

Follow the prompts to set up Firebase hosting. When asked about the public directory, enter public, which is Hugo's default output directory.

Step 6: Building and Deploying

Build your Hugo site and deploy it to Firebase hosting:

hugo
firebase deploy

Your blog is now live on Firebase hosting. Visit the provided URL to see your blog in action.

Step 7: Adding Giscus for Comments

Giscus is a simple comment system powered by GitHub Discussions. To integrate Giscus into your blog, sign in to Giscus, create a new repository, and obtain the repository ID.

Edit your Hugo theme's configuration file (config.toml or config.yaml) and add the Giscus configuration:

# config.toml
[params.comments]
  enable = true
  repository = "your-username/your-repo"
  term = "pathname"
  theme = "light"

Replace "your-username/your-repo" with your GitHub username and the repository you created for Giscus.

Rebuild and redeploy your Hugo site to Firebase hosting.

Congratulations! You've successfully created a developer blog using Hugo, Firebase, and Giscus. Feel free to customize and expand your blog by adding more content and exploring additional Hugo features. Happy coding!

Creating developer blog with Hugo and Firebase