Junior Web Developer

How To Create a Minimal Hugo Site

A barebones but funcional Hugo blog

May 29, 2016

These are the instructions to create a minimal, functional Hugo site. For more information read the Hugo Documentation.

Download Hugo

You can download Hugo for many different platforms from the Hugo site.

Copy hugo.exe on a working folder

Create a folder (you can name it /projects/) under your root, and then navigate to that folder by typing

cd projects

Create a new Hugo site in a subfolder of /projects called /projecthugo

hugo new site ~/projects/projecthugo/

Go to your Hugo site folder

cd projecthugo

List the contents of the /projecthugo folder


You should now see a skeleton with the basic structure of a Hugo site but no content or any of the folders or files:

archetypes  config.toml content layouts static data

Install Hugo in your path.

Copy the hugo.exe into your /projecthugo folder.



again and you should now see the hugo executable:

archetypes  config.toml content layouts static data hugo.exe

Create some posts

hugo new post/

Open with your favorite text editor and you will see three fields already pre-written in the top section of the file, called "front matter" (between the +++ marks). By default, Hugo includes:

You can add more parameters later (like Categories or Tags).

Hugo will match the title of your post with your post file name, so if you want to call it something different just replace the text between quotes in the Title field in the front matter.

Now you can write some content below the second +++ line (leave one or two lines blank at the beginning).

If you want your post to go live remember to change

draft = true
draft = false

If you keep it as draft your post will not show on your site.

Create another post called following a similar process.

Create a couple of pages that are not posts

These would be pages like about or contact.

hugo new


hugo new

Open your favorite text editor and create some content for and

Create _default templates

You will create four templates and place them in a folder called /layouts/_default:

The Hugo documentation provides instructions on what code to use in each of them.

You can create section specific templates if your site is larger but for now _default templates are all we need.

Create partial templates

These are good for the common areas of your site. Go ahead and create:

Place these templates in a folder called /layouts/partials/. These partial templates can be called from any other template (for example from single.hmtl or list.html) by simply using the following code within those templates:

{{ partial "header.html" . }}


{{ partial "footer.html" . }}

Create an index.html template

This template is only used for the home page. Create it however you want your home page to look and place it in the root of the /layouts folder. You can also choose to use a list of posts as your index page. In that case just save the list template as index.html

Create a /static/css folder and upload a style sheet.

Don't forget to link to the style sheet from the header.html partial template:

link rel="stylesheet" type="text/css" href="/css/style.css"

You need to include the above code between <>.

Create a /static/images folder and upload some images.

Self explanatory.

Update your config.toml file

Just add the URL of your site and your site's description. That's all you're going to need to start. You can add more parameters later.

Try out your site

Once you have created content and templates it's time to view your site. Type the following command:

hugo server -w

If everything went well Hugo will generate your website and you will be able to see it at http://localhost:1313 .

Get your site ready to upload

Once you're satisfied with the way your site looks, run the hugo command by itself:


You are now ready to upload or git push your site to your web hosting service. Your site files will be in a folder called /public.


If you don't want to start from scratch, I have created a Minimal Hugo Site and git pushed the source code to Github.

You can simply clone the repository by running:

git clone

Here is a live demo.

tech go hugo

© 2019 Crafted with Metalsmith and deployed to a DigitalOcean VPS.