How to Write a Blog in Hugo

How to Write a Blog in Hugo

In hugo, the blogs/articles/posts all store in the content/posts/ folder.

Path of Posts folder

1
2
3
4

hugo new posts/xxxmd
# such as I create this post
hugo new posts/How-to-write-a-blog.md
# don't use space in filename!!!

Structure of Post page

Structure of Post/blog page

This page is like a jigsaw puzzle with several chapters combined, this is done so that the code can call on different structures on other pages, reducing code repetition.

Count how many words in your blog

This is built-in function countwords.

1
2

# allow md file shows HTML format
    <i class="fa fa-book"></i>&nbsp;<span>{{ .Content | countwords }} Words</span>

What’s the markdowm(MD) file?

In Hugo, Markdown (often abbreviated as MD) is a lightweight markup language used to create content for web pages. It allows you to write content using plain text and simple syntax that can be easily converted to HTML by Hugo. Markdown is a popular format for creating web content because it is easy to learn and write, and can be easily converted to HTML without the need for complex formatting tools.

In Hugo, you can create Markdown files to define the content of your website. Each Markdown file typically represents a single page or blog post on your site, and contains the content of that page in Markdown format. For example, if you wanted to create a blog post about a topic, you would create a Markdown file with the post’s content in it.

Markdown files in Hugo typically have a .md extension and are stored in the content directory of your Hugo project. When Hugo builds your website, it processes each Markdown file and converts it to HTML, which can then be served to visitors of your site.

Markdown files in Hugo can include additional metadata in the form of front matter, which is written in YAML, TOML or JSON format and placed at the beginning of the Markdown file. This metadata can be used to provide additional information about the content, such as the page’s title, author, and publication date.

Using HTML tags in MD file

In hugo, you also can write HTML in MD file. Yeah, super convenient, right? As I mentioned in my first post, to display HTML tags in the md file requires configuration in the configuration file(config.toml).

1
2
3
4
5
6
7

# allow md file shows HTML format
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe= true
      hardWraps = false
      xhtml = false

Output format of post

1
2
3
4
5
6
7
8

[permalinks]
  post = "/:year/:month/:title/"

[frontmatter]
  date = ["date", "publishDate", "lastmod"]
  lastmod = ["lastmod", ":git", "date", "publishDate"]
  publishDate = ["publishDate", "date"]
  expiryDate = ["expiryDate"]

Permalinks

In your site configuration, set a URL pattern for regular pages within a top-level section. This is recursive, affecting descendant regular pages.
The permalinks defined in your site configuration do not apply to section pages. To adjust the URL for section pages, set url in front matter.

Hugo offical doc

More Information you can visit to hugo offical website

Markdowm file editor recommended

Typora is a great md editor, you can write or organise blog using general format like microsoft word. After you finish the article, just copy paste to the md file.