Hugo is a framework to build websites, and lots of templates are provided for various purposes. This blog is also built on Hugo with the Basic theme by @siegerts, and based on my experience, I’m introducing how to build a blog with Hugo on mac. For a really quick start, you can visit the official site.
The Hugo website lists up a couple of ways to install Hugo on mac. Among them, using Homebrew is the simplest, and in my case, there was no problem.
brew install hugo
For verification, check
hugo version # My output: Hugo Static Site Generator v0.54.0/extended darwin/amd64 BuildDate: unknown
Make Root Directory of Your Blog
Let’s make a new directory
<ROOT> which becomes the root directory of your blog.
Move to any directory you want, and type
mkdir <ROOT> cd <ROOT>
You need two directories to initially deploy a blog: theme and content.
mkdir theme mkdir content
Setup Theme You Like
Move to the theme directory,
You can look at this site to find a Hugo theme you like. In this example, let’s take the basic theme which is the theme of this blog. Following the instruction in the page, download the theme:
git clone https://github.com/siegerts/hugo-theme-basic.git
To apply the theme appropriately to your blog, you need to copy the configuration file of the basic theme to your root.
cp config.toml ../
Now, the theme is set for your blog.
Create Your Contents
You can create
.md files inside two directories:
If you put a markdown file in
<ROOT>/content/, you can see its link in the main page.
As an example, let’s put
<ROOT>/content/ with the following texts:
+++ title = "Self-introduction" date = "2019-04-01" +++ ## About Me I am a cat lover.
Similarly, let’s put
<ROOT>/content/post/ with the following texts:
+++ date = "2019-04-01" author = "Cat Lover" title = "My First Kitty" +++ I became a cat mom today.
Now, your blog has two pages: about titled Self-introduction and one blog post titled My First Kitty. Let’s run a blog server in your local environment, and see how your blog looks like.
Run Hugo Server
Open a terminal, and move to
<ROOT>. Run the following command:
Open a browser, and enter the address of either
You will see the following page.
The about menu is linked to
If you click post, we can see the title of your first post: My First Kitty.
Clicking My First Kitty, you will see the page of
To add more pages, you need to insert or modify
<ROOT>/config.toml as described below.