How to Create Content for Hugo Using Markdown

Hugo, a static site generator, uses Markdown (.md) files to generate content. In this guide, we will explain how you can create content for Hugo using Markdown.

1. Front Matter

Every Markdown file in Hugo requires front matter, which is metadata placed at the top of the file. It helps Hugo understand how to process the file.

Example:

---
title: "My First Hugo Post"
date: 2024-10-18
tags: ["Hugo", "Markdown"]
summary: "A brief summary of the post."
---

2. Headers

Headers are used to organize content. Use one # for an H1 header, two ## for H2, and so on.

Example:

# H1 Header
## H2 Header
### H3 Header

Output:

H3 Header

3. Text Formatting

Markdown supports several text formatting options:

Example:

**Bold Text**  
*Italic Text*  
~~Strikethrough~~

Output: Bold Text
Italic Text
Strikethrough

4. Spacing and Line Breaks

In Markdown, you can create paragraphs by leaving a blank line between lines of text.

Example:

This is the first paragraph.

This is the second paragraph.

Output: This is the first paragraph.

This is the second paragraph.

5. Horizontal Rules

You can create horizontal lines (dividers) using three or more dashes (---), asterisks (***), or underscores (___).

Example:

---

Output:

6. Lists

Create unordered lists with - or *, and ordered lists with numbers followed by periods.

Example:

- Item 1
- Item 2

1. First item
2. Second item

Output:

  • Item 1
  • Item 2
  1. First item
  2. Second item

Add links and images with square brackets [] and parentheses ().

Example:

[Hugo Documentation](https://gohugo.io)

![Hugo Logo](/images/hugo.webp)

Output: Hugo Documentation

Hugo Logo

8. Code Blocks

For inline code, use backticks. For block code, use triple backticks.

Example:

Inline code: `print("Hello World")`

Output: Inline code: print("Hello World")

Example:

Block Code:
def hello():
    print("Hello, Hugo!")

def hello():
    print("Hello, Hugo!")

9. Blockquotes

Use the greater than symbol (>) to create blockquotes.

Example:

> This is a blockquote in Hugo.

Output:

This is a blockquote in Hugo.

10. Tables

You can create tables using pipes | and dashes -.

Example:

| Column 1 | Column 2 |
|----------|----------|
| Row 1    | Data 1   |
| Row 2    | Data 2   |

Output:

Column 1Column 2
Row 1Data 1
Row 2Data 2

11. Task Lists

Create task lists by using square brackets []. An x in the brackets [x] marks a task as completed.

Example:

- [ ] Task 1
- [x] Task 2 (Completed)

Output:

  • Task 1
  • Task 2 (Completed)

12. Syntax Highlighting

Hugo supports syntax highlighting for various programming languages. You can specify the language after the triple backticks(```).

Example: Output:

def greet():
    print("Hello, Hugo!")

12. Task Lists

Create task lists by using square brackets []. An x in the brackets [x] marks a task as completed.

Example:

- [ ] Task 1
    - [ ] Sub-task 1
    - [x] Sub-task 2 (Completed)
- [x] Task 2 (Completed)

Output:

  • Task 1
    • Sub-task 1
    • Sub-task 2 (Completed)
  • Task 2 (Completed)

13. Escaping Special Characters

To use special characters like #, escape them using a backslash \.

Example:

\# This is not a header

Output: # This is not a header

14. Backtick

To display backtick use four space before it as

    ```

15. Consistency

It’s important to maintain consistent formatting throughout your Markdown files to ensure a clean and readable structure.

By following these steps, you can effectively create well-formatted content for your Hugo site using Markdown.