Create a Blog Like This

A blog like this can be generated with Hugo.io hosted for free using Github.com.

I assume that you are familiar with Hugo and Github as independent tools. So I’m not going to explain all the details of the process, just the key points. You can refer to Other links section to find useful documentation links.

Basic setup

The steps that you have to follow to deploy a Hugo generated webpage to Github are already perfectly explained in Hugo documentation, so I’m going to follow the DRY principle. Just go there and read it.

I’m following the steps defined here keeping the source repository private.

Setup even template

After going trough the template list, I’ve found the Event template the best suited for my purpose. In this section I explain the configuration details for the template.

The base config.toml can be obtained directly from the Even example site.

About section

To have a static page with about information I’ve created the file content/about.md and added the following section to the menus

1
2
3
4
5


[[menu.main]]
  name = "About"
  weight = 20
  identifier = "about"
  url = "/about/"

Utterances configuration

Utterances provides comments based on Github issues and it is really easy to setup, just fill the data in the config file.

1
2
3


  [params.utterances]                   # https://utteranc.es/
    owner = "MetalBlueberry"            # Your GitHub ID
    repo = "MetalBlueberry.github.io"   # The repo to store comments

You need to add utterances to the repository. This can be done easily following the instructions that appear when you try to comment for the first time.

Other utils

There are optional configuration variables to display post information.

1
2


  showArchiveCount = true
  moreMeta = true

Conclusion

The setup is very simple but yet very powerful. without any infrastructure you can have all the power from Hugo static page generation with dynamic content hosted in Github.