Hugo quick start

Hugo is a powerful tool, with some difficulties on start, but when your project is bigger than a blog I recommend you to go this way. You will find some useful hints when you look into vendor/Andygrond/hugonette/doc/hugo in your Hugonette project folder.

Install Hugo using one of methods described on Hugo doc. First steps after installation:

hugo new site myblog
cd myblog

Theme

You will need a theme to begin quickly. You can pick one from ready themes library now and copy to themes folder. It will be probably not what you want, but don't worry. It's only a starter for you. Add your theme to the config.toml file and play with it.

theme = "theme-name"

In a real project you will prefer to build your own themes. It's easy. Use any free html template, or buy one. Create a fresh theme structure, similar to the structure of the Hugo project:

hugo new theme my-theme

You can also go ahead without any theme. But it's better to place all your original partials in theme, and then adapt it to your project in the project folders.

Partials

Divide your page into partials and join them together in layouts/_default/baseof.html It will be your default page base. Enter blocks where variable parts will be.

{{ block "main" . }}
  Default main block content
{{ end }}

Create a layout in the layouts/_default/index.html file, and define all needed blocks.

{{ define "main" }}
  {{ .Content }}
{{ end }}

Page

Then create a home page file content/_index.md

---
title: Homepage
---
Hello world!

Start a Web Server: hugo server and watch your changes at http://localhost:1313/

At the end of the design process, issue hugo command, and after a while your static site will be ready to publish in the public folder. Place it inside the static folder and rename it to myblog. That's all.

Last updated