DEV Community


Posted on

How to generate a static site by Hugo for GitHub Pages


I wanted to use a static site generator instead of hand-writing html pages. I need a static site generator because I'm hosting my web page by GitHub Pages.
I decided to use Hugo because of terminal theme.
For your reference, this is steps of transfer from hand-writing to the Hugo.

Install Hugo

I'm using the linux mint and the linux brew. it works!

$ brew install hugo
$ hugo version
Hugo Static Site Generator v0.55.4/extended linux/amd64 BuildDate: unknown

Create a new site & Install a theme

I selected terminal theme

$ hugo new site hugo_webpage
$ cd hugo_webpage
$ git init
$ git submodule add themes/terminal

using submodule is not mandatory.


vim config.toml

by reading

Copy from old site

I had several hand-writing html pages. Some pages were able to be transferred to Hugo markdown documents under the content/ directory, but the rest pages were not able to be done.
So that I had to use the static/ directory in order keeping the rest pages.

$ cp -R ${old_pages} static/


The Hugo has a serving future.
We can use this for confirmation.

$ hugo server

see also: hugo serve command

you can confirm your site with localhost:1313

trouble shooting#1

If you cannot confirm your hugo pages.
Please check again with below command

$ hugo server -D

If you can confirm the pages.
you should change your meta data of hugo markdown.

- draft: true
+ draft: false

Build it

The hugo command generates your static html pages into public directory.

$ hugo

see also: hugo command

Confirm static html server

$ cd public
$ python -m http.server 8000


I copied everything inside the public/ directory to the repository of GitHub Pages then pushed it.

That's all.

trouble shooting#2

At Firs I attempted to create a index page for my top page beside a about page like below.


Also my expectation of generated pages structure was like below.

├── about
│   └── index.html
└── index.html

However the about directory was gone.
The cause is At Hugo, and have special meaning.(

Eventually I gave up creating a top page. So I created below structure.

├── posts
│   └──

That's true all.

Top comments (0)