Personal Blog Using Hugo and Blowfish

မြန်မာဘာသာဖြင့် ဖတ်ရှုရန်

What is Hugo?

#

Here’s an excerpt from the official Hugo documentation introduction.

Hugo is a static site generator written in Go, optimized for speed and designed for flexibility. With its advanced templating system and fast asset pipelines, Hugo renders a complete site in seconds, often less.

For a quick introduction, you can check out Hugo in 100 Seconds from Fireship.

Why Hugo?

#

Hugo offers a variety of powerful features, including support for multilingual, templates, rich content formats, easy-to-use shortcodes, and image processing.

I’ve written a few articles on Medium before, but this is my first time starting a blog. The main reason is that I tend to forget solutions to problems I’ve solved after some time.

When I decided to start a blog, I hadn’t used any SSGs before. After a bit of research, I chose Hugo. Here’s why: I’m more comfortable with Go, so working with Go’s text/template and html/template feels natural. Also, Hugo makes it easy to manage content in both Burmese and English.

What is Blowfish?

#

Blowfish is a theme designed for Hugo that includes support for Tailwind CSS v3, automatic image resizing, integrated site search, and more. You can explore additional features in the Blowfish documentation.

Setting Hugo on Local

#

Prerequisites

#

To run Hugo locally, you’ll optionally need Git, Go, and Dart Sass for specific use casese.

• Git is essential to use Hugo Modules, install a theme by using Git Submodule, and use GitHub Pages.
• Go is required to use the Hugo Modules.

Installation

#

For the sake of simplicity, I recommend using Homebrew for installing on Mac:

brew install hugo

If Homebrew is not installed yet, it can be set up using the following script:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Setting Up

#

1. Create a new site named personal-blog using these commands:

   hugo new site personal-blog
   cd personal-blog
   hugo mod init github.com/pyaethu-aung/personal-blog
   hugo mod tidy
   

2. Download configuration files to complete the setup for Blowfish. Access the files from this link and copy them into the /config/_default directory.
3. Add following content to config/_default/module.toml file:

   [[imports]]
   disable = false
   path = "github.com/nunocoracao/blowfish/v2"
   

4. Start Hugo by running the command below. You can view the homepage by navigating to http://localhost:8080/:

   hugo server --port 8080
   

   

Configuration

#

1. Update the following values in /config/_default/languages.en.toml:

   title = "My Personal Blog"
   
   [params.author]
     name = "My Name"
     email = "hello@myname.com"
     headline = "I'm writing blog by using Hugo and Blowfish"
     bio = "Freelance Developer"
     links = [
       { email = "mailto:hello@myname.com" },
       { github = "https://github.com/myname" }
     ]
   

   You’ll see the homepage update accordingly:

   

2. Update the following values in /config/_default/menus.en.toml:

   [[main]]
     name = "Blog"
     pageRef = "posts"
     weight = 10
   
   [[main]]
     name = "Tags"
     pageRef = "tags"
     weight = 30
   

   

3. Update the following values in /config/_default/params.toml:

   [homepage]
     layout = "hero"
     homepageImage = "images/hero_background.jpg" # hero_background.jpg should be in "/assets/images/"
     showRecent = true
     showMoreLink = true
     cardView = true
   

   

Add a New Post

#

1. Hugo also supports other formats like HTML and Pandoc. You can check out the details here. Add a new Markdown post by running the command below:

   hugo new content content/posts/my-first-post/index.md
   

2. Update the front matter in the generated index.md file as shown below, and use sample content from Lorem Markdownum:

   +++
   title = "My First Post"
   date = 2024-11-06T10:10:00+00:00
   draft = false
   tags = ["hugo", "blowfish"]
   slug = "my-first-post"
   +++
   

3. Update the following values in /config/_default/params.toml:

   [article]
     showAuthor = true
   

   

   

4. To add a hero section to the post and display the author information at the bottom of the page, update the following values in /config/_default/params.toml. Additionally, place a hero image in the same directory as index.md with the filename featured.jpeg.

   [article]
     showAuthor = true
     showAuthorBottom = true
     showHero = true
     heroStyle = "big"
   

   You will notice the post changes as shown below:

   

   The post list item on the home screen will appear as shown below:

   

You can download the final project resulting from the steps above via this link.

Later, I’ll write about hosting the blog on GitHub Pages and using Hugo’s multilingual mode to post in both English and Burmese.