My Blog Setup - Hugo How to Create New Post

In previous post, I have explained some important setting and configuration on Hugo site so you can personalize it to your own like.

Create New Post and Page

Now comes the important part of the blog itself, the content, writing the content and publish it.

Basically there are 2 categories of content: Post and Page as explained in content directory section of my previous post:

• page
  This is a placeholder where you can put all independent page that doesn't show like the post entry. For example: About Us, Contact Us, and Portfolio Page.
• post
  All content in this folder will appear descendingly by post's published date. This will be your main folder where you put the site's posts.

Create new post and page is similar.

To create a new post, put it under post folder:

hugo new content/post/<title>.md

And to create a new page, put it under page folder:

hugo new content/page/<title>.md

To test add new post:

hugo new content/post/this-is-my-first-post.md

The new file is created and hugo will bootstrapped the content with this:

---
title: "This Is My First Post"
author: ""
type: ""
date: 2019-03-06T17:56:22+07:00
subtitle: ""
image: ""
tags: []
---

Now the part between 2 --- (e.g: title to tags) is called frontmatter. TL;DR: it's the metadata about the post/page. I will explain about that later.

To add the content, just write it under the second --- part. Example:

---
title: "This Is My First Post"
author: ""
type: ""
date: 2019-03-06T17:56:22+07:00
subtitle: ""
image: ""
tags: []
---

Hi all, 

This is my first post.

Try to save that and invoke hugo serve to access it locally. You should see the post right?

You can continue to write the post, git commit and push to remote (gitlab). The gitlab CI will take care the deployment of your latest blog writing 😄.

Frontmatter, what is it?

At the top of the post, it has what it's called frontmatter. It is basically a post/page metadata and Hugo (and the theme) can show that to the audience. Some themes even introduces their exclusive metadata. Beautifulhugo theme for example, it has bigimg field and process that information to show the big image on top of the post.

There is also some magic on hugo new command, it automatically infer the metadata field (e.g: title and date in this case), right?. hugo new can fill them because it uses the current theme's archetypes/default.md content.

themes/beautifulhugo/archetypes
└── default.md

The themes/beautifulhugo/archetypes/default.md:

---
title: "{{ replace .Name "-" " " | title }}"
author: ""
type: ""
date: {{ .Date }}
subtitle: ""
image: ""
tags: []
---

As you can see, it has {{ and }} syntax. It's basically the template syntax and evaluated by hugo command. You can read more about it here.

• title: "{{ replace .Name "-" " " | title }}", means it is filled by .Name variable. That surely comes from the filename without .md extension, when you create the post `hugo new content/post/this-is-my-first-post.md
• date: {{ .Date }}, it is filled with current date.

What's Next

Next post I will tell you my opinion and some reflections after using the Hugo, Gitlab Page and Gitlab CI for my blog.