Creating developer blog with Hugo and Firebase

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!