hugo 0.24

Let's Start from the Basics: Part 3

Adding Content

If you followed the previous articles, now you’ll have something like this as your folder structure:

screenshot folder structure

Folders

Archetypes: allows users to define default front matter variables for new pieces of content when generated from the terminal.

You can have one file called post.md with this content:


+++
title = “{{ replace .TranslationBaseName “-” “ ” | title }}”
date = {{ .Date }}
draft = true
tags = []
categories = []
description = “”
thumbnail = “”

+++

Title and date will be generated. With these lines, title will be the well formatted name of the file. Date will be the current date.

On the file generated by $ hugo new post/one-more-post.md:


+++
title = "one more post"
date = 2017-07-10T16:59:58+02:00
draft = true
tags = []
categories = []
description = ""
thumbnail = ""

+++

Content: This is the folder where you put and organize your content.

Data: The data folder is where you can store additional data for Hugo to use when generating your site.

Layouts: Files to control the display of the pages.

Static: Everything in the static directory will be copied directly into the final site when rendered.

Themes: Here are the themes you download or create.

Themes can have these folders too, but those included on your main site folder will overwrite them.

Site and content

When you run hugo serve you get this good looking website on localhost:1313

screenshot website

If you click on the link to our first post you won’t see much until you add some content. So go ahead, add some content and see how it looks like.

We can also create new articles:


$ hugo new post/one-more-post.md

Notice that in Hugo v0.24 we need to add the title, date and draft variables directly to the archetype. These are no longer auto-generated. It wasn’t like this on previous versions. So, if your theme doesn’t have this yet, you’ll need to add them manually. No worries, it’s easy.

Right now, on our Beautiful Hugo theme, we have the following:

my-new-site/themes/beautifulhugo/archetypes/default.md


    ---
    subtitle: ""
    tags: []
    ---

Notice: This theme uses YAML instead of TOML on the front matter.

What we need to have is:


    ---
    title: "{{ replace .TranslationBaseName "-" " " | title }}"
    date: {{ .Date }}
    draft: true
    subtitle: ""
    tags: []
    ---

And after that, start writing!

Notes

  • With Hugo you can use TOML, YAML and JSON, but it would be better if you pick one and stick with it. Don’t use them indiferently thorugh out the site.

  • Don’t forget to change draft: true to draft: false to see the new post on the site.

Post types

Sometimes we need more than just posts on our site. For example, we could want to create a different post type called “news”, where we write about what is going on on the world, but we don’t want them to be in the same section as our regular posts, where we talk about code.

We can create another post type for “news”. Create a folder called news under “content”. At the same level of “post”.

Now, you can create a new “archetypes” for news, with different variables, but not always is needed, only if you want different variables. If you don’t create a new archetype, the default will be used.

my-new-site/themes/beautifulhugo/archetypes/news.md


    ---
    title: "{{ replace .TranslationBaseName "-" " " | title }}"
    date: {{ .Date }}
    draft: true
    topics: ""
    tags: []
    ---

And create your first article under “news” with:


$ hugo new news/my-first-news-article.md

Right now your folder structure is a little different:

screenshot folder structure

Your current theme, Beautiful Hugo, won’t know about this new post type, so you’ll need to adapt the layout if you want these to be displayed on the home page.

For now, you’ll be able to see your new content from localhost:1313/news

Avatar author

Web developer. Always learning.

Let's share this!