chapter three

3 Using Markup for content

 

This chapter covers

  • Creating content using Markdown
  • Using Hugo’s extensions to Markdown.
  • Understanding the various markup languages supported by Hugo
  • Using YAML to provide metadata in a Hugo-based website.
  • Playing with the various elements of a page’s front matter

Most documents in the content folder of a Hugo website consist of textual content in a markup language and its associated metadata in a metadata language. Markdown is the most popular amongst them and most widely used. YAML is amongst the most popular languages for writing key-value configuration, where human readability is essential. In Sections 3.1-3.3, we will focus on the Markdown language to provide content, and from 3.4 onwards, we will study the YAML language that adds metadata. We will also look at the typical metadata entries in the front matter of a website. In this chapter, we will be formatting the pages we created for the website we built for Acme Corporation in chapter 2.

In the Jamstack the content of the webpage which normally is saved in a single database cell is given prime importance while the other database columns are moved into the header (called front matter). Each web page is given a file.

3.1 Writing content in Markdown

3.1.1 Paragraphs in Markdown

3.1.2 Headings, lists, and other block elements

3.1.3 Formatting, inline links, code, and images

3.1.4 HTML

3.1.5 Tables, task lists, code blocks

3.1.6 Emojis, ids, and other Hugo extensions

3.2 Markdown in Action

3.2.1 Block elements

3.2.2 Inline elements

3.2.3 Inline HTML and character codes

3.2.4 Tables

3.2.5 Emojis and definition lists

3.3 Other markup languages

3.4 Metadata

3.4.1 Comments

3.4.2 Basic data types

3.4.3 Multiline strings

3.4.4 Lists

3.4.5 Dictionaries

3.4.6 Revisit config.yaml