Welcome to our comprehensive Hugo blog post example! This post demonstrates all the available features and formatting options you can use in your blog posts. Whether you’re new to Hugo or need a quick reference, you’ll find examples of headings, emphasis, links, lists, code blocks, and much more.

Use this post as a template or reference when creating your own content. Each section includes examples and explanations of how to use different markdown and Hugo shortcode features.

Table of contents

Headings

Hugo uses Markdown for content formatting. Here’s how to create headings of different levels using the # symbol. The number of # symbols corresponds to the heading level (1-6).

Heading 1 (use sparingly, usually for page titles)

Heading 2 (main sections)

Heading 3 (subsections)

Heading 4 (smaller sections)

Heading 5 (detailed points)
Heading 6 (finest detail level)

Text Formatting

Here are the various ways you can format your text:

Emphasis and Bold

  • Italics using single asterisks or underscores
  • Bold using double asterisks or underscores
  • Bold and italic using triple asterisks or underscores
  • Strikethrough using double tildes

Paragraphs

Separate paragraphs with a blank line. Here’s an example paragraph:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam nihil enim maxime corporis cumque totam aliquid nam sint inventore optio modi neque laborum officiis necessitatibus, facilis placeat pariatur!

Hugo supports various types of links:

  1. Basic link to external site
  2. Link with hover title
  3. Automatic URL linking: https://example.com
  4. https://example.com (enclosed in angle brackets)

Lists

Ordered Lists

  1. First item
  2. Second item
  3. Third item
    1. Sub-item 3.1
    2. Sub-item 3.2
  4. Fourth item

Unordered Lists

  • Main point
  • Another point
    • Sub-point
    • Another sub-point
  • Final point

Code Formatting

Inline Code

Use backticks for inline code or technical terms.

Code Blocks

Use triple backticks with an optional language name for syntax highlighting:

def hello_world():
    print("Hello, Hugo bloggers!")
    return True

function sayHello() {
    console.log("Hello from JavaScript!");
}

Blockquotes

Use the > symbol for blockquotes:

“This is a blockquote. It’s great for highlighting important quotes or drawing attention to specific text passages.”

You can have multiple paragraphs in a blockquote by adding a > on blank lines between them.

Notice Shortcodes

Hugo supports various notice types for highlighting information:

Note

This is a note notice - use it for general information

Tip

This is a tip notice - perfect for sharing helpful tips

Info

This is an info notice - ideal for important information

Warning

This is a warning notice - use it to highlight crucial warnings

Tables

Tables can be created using pipes and hyphens. Add the table-responsive class for better mobile display:

FeatureDescriptionUsage
HeadingsSection titlesStructure content
ListsBullet pointsOrganize items
Code blocksShow codeTechnical examples
TablesTabular dataData presentation

Images

Use the image shortcode for better control over image display:

Blog post example image
Example image with caption

Videos

Embed YouTube videos easily with the youtube shortcode:

HTML in Markdown

You can mix HTML with Markdown when needed:

This is a paragraph with HTML formatting.

  • HTML list item 1
  • HTML list item 2

Final Tips

  1. Keep your content well-structured with clear headings
  2. Use appropriate formatting for different content types
  3. Include relevant images and media to engage readers
  4. Test your posts in preview mode before publishing
  5. Remember to set the appropriate frontmatter variables

For more information about Hugo content formatting, visit the Hugo documentation.