Yet Another Technical Blog: World's smallest hugo site

Monday, November 6, 2017

World's smallest hugo site

I have been playing with Hugo for a while and it is

easy to set up
fast
flexible
well-documented

Here's how to create a tiny single-page website using Hugo.

Generate the source code to the site

Create a directory for the source code, and give this command

hugo new site <directory-name>

Add some basic customization

Go to the source code directory and open up config.toml and edit any field you want to. If you don't it is fine. Generally I disable unnecessary stuff like RSS feeds etc, so I add

disableKinds = ["RSS"]

I also want to control where the generated website goes, so I add

publishDir = <directory-path-within-quotes>

Create the html page

Here is a simple html page for starters


<html>
  <head>
    <title>
      Home page of XYZ

    </title>
  </head>
  <body>
    Nothing of importance at the moment
  </body>
</html>

Save it to layouts/index.html

Generate the site

The command is, simply

hugo

That's it. Your website is generated in the output directory 'public' or the value of the variable publishDir if you changed it.

Notes

I know that this is probably not the prescribed way of using a static site generator. Most people are talking about a separation of concerns, where your theme and layout are not connected with your content. I feel that that should not be the only way to create websites. It is possible for content and layout to be mixed for very small sites. Or when you start building the site. Later on you can gradually move the content out and create a stand-alone layout.

Yet Another Technical Blog