Starting My Blog with Hugo and Markdown from Obsidian

Pavan Bagde

I’ve been wanting to create a personal blog for a while, a place to share what I’ve learned, what I’m building, and random notes that might help someone (or future me). Today, I finally took the first step and set it up!

I wanted something minimal and fast, mainly to publish text and a few images. My first thought was to build it using plain HTML and JavaScript, and host it on GitHub Pages to kickstart. But as I started digging in, I discovered some better tools that made the process smoother and more flexible and fun.

Choosing the Right Tool: From Jekyll to Hugo

Initially, I came across Jekyll, a popular static site generator that integrates well with GitHub Pages. It seemed like a solid option, but while researching, I stumbled upon Hugo, and it immediately clicked for a few reasons:

It’s a single binary.
It’s lightning-fast.
It works great with Markdown.
It aligns with my recent interest in learning and coding with Go.

Plus, I liked the idea of being able to self-host it down the road, if needed.

Bootstrapping the Blog from Obsidian Notes

I already had a collection of notes in Obsidian, written in Markdown, so Hugo seemed like a perfect fit for turning those into blog content.

Here’s a quick rundown of how I set it up on macOS:

Install Hugo

Hugo can be installed in many different ways provided neatly at its official Install page, I went with below for macOS.

$ brew install hugo

Create new site

Once Hugo was installed, I generated a new site, this sets up the directory structure and gives a friendly message.

$ hugo new site myblog

Initialize git repo

It is also a good time to initialize the git repo in the base directory of hugo blog site we just created.

$ cd myblog
$ git init

Add a theme

I went with Ananke, the go-to Hugo theme. It’s simple, clean, and has just the right balance of features and design for my taste.

$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
# Then, update the hugo.toml file to set the theme:
$ echo "theme = 'ananke'" >> hugo.toml

Configure the blog site

To get started, update the hugo.toml file located in the root of your project. This file contains basic site configuration such as the base URL, language, and title:

# Text in html.toml
baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'Pavan Bagde Blog'

Create first post

To create a new blog post in content/posts directory, used the hugo new content command. e.g. following will generate a Markdown file under the content/posts directory:

$ hugo new content content/posts/blogging-with-hugo-is-fun.md

Open the file in vscode or your choice of editor. It will have auto generated front matter, following that we can write (or in my case mostly copy) the markdown text.

Edit and live preview your blog site locally

For newly created pages Hugo set draft value to true, We can preview the draft version at the localhost url given with this command.

# -D option is to include draft version 
#   without it Hugo will ignore draft files.
$ hugo server -D
# Visit http://localhost:1313 to see your blog in action!

Once we are happy with post, we need to remove the draft line or set it to false in the front matter to make it ready for publishing.

Publish!

Finally well named command hugo creates the static site that can be deployed to a webserver.

$ hugo

Output of this command is the entire static site in the public directory.

What’s Next?

Now that the basic setup is done, I’ll start bringing in some of my Markdown notes from Obsidian and formatting them as blog posts, will also tweak the theme a bit to match the look I want.

This feels like a good start—and I’m excited to finally have a place to share what I’m learning and doing along the way.