/ Yongsub Lim

Build Your Own Blog with Hugo - Local Hosting

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.

Install Hugo

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,

cd theme

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

Move to <ROOT>.

cd ..

You can create .md files inside two directories: <ROOT>/content/ and <ROOT>/content/post. If you put a markdown file in <ROOT>/content/, you can see its link in the main page. As an example, let’s put about.md at <ROOT>/content/ with the following texts:

+++
title = "Self-introduction"
date = "2019-04-01"
+++

## About Me
I am a cat lover.

Similarly, let’s put first-post.md at <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:

hugo server

Open a browser, and enter the address of either localhost:1313 or 127.0.0.1:1313. You will see the following page. The about menu is linked to about.md.

About: Self-introduction

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 first-post.md.

The firsr post: My First Kitty

To add more pages, you need to insert or modify [[params.menu]] in <ROOT>/config.toml as described below.