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

ls

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.

Do

ls

again and you should now see the hugo executable:

archetypes  config.toml content layouts static data hugo.exe

Create some posts

hugo new post/post1.md

Open post1.md 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
for
draft = false

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

Create another post called post2.md following a similar process.


Create a couple of pages that are not posts

These would be pages like about or contact.

hugo new about.md

and

hugo new contact.md

Open your favorite text editor and create some content for about.md and contact.md


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" . }}

or

{{ 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:

hugo

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.


Update:

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 https://github.com/mariobox/MinimalHugoSite.git

Here is a live demo.


tech


How to Use Juxtapose Main A Guide to the Good Life


USA 2017Stack: Ubuntu > Metalsmith > Git > VPS