BILL\WECKEL

Hugo Post Reference

June 6, 2026

Every snippet below shows the exact code to copy, followed by a working example. Bookmark this page.

Frontmatter

Every post starts with a frontmatter block. Copy this to the top of every new index.md:

---
title: "Your Post Title"
date: 2026-06-06
draft: false
categories: ["photography"]
tags: ["wildlife", "florida"]
summary: "One or two sentences shown on the blog index."
---

Field notes:

  • draft: true hides a post from the live site — useful while writing
  • categories — pick one per post; shows in the sidebar
  • tags — add as many as you like; shows in the tag cloud
  • summary — if omitted, Hugo uses the first 70 words of your post

Paragraphs and Headings

Just type for a paragraph. Leave a blank line between paragraphs.

## Section heading

### Sub-heading

#### Smaller sub-heading

This is an H2 section heading

This is an H3 sub-heading

This is an H4

Text Formatting

**Bold text**
*Italic text*
~~Strikethrough~~
`Inline code`

Bold text — good for emphasis on key terms. Italic text — good for titles, foreign words, or gentle emphasis. Strikethrough — good for corrections or crossed-out items. Inline code — good for file names, commands, or technical terms.

[Link text](https://example.com)
[Opens in new tab](https://example.com){target="_blank" rel="noopener"}

Visit billweckel.com — opens in same tab. Visit billweckel.com{target="_blank" rel=“noopener”} — opens in new tab.

Images

Drop your image file into the same folder as your index.md, then reference it by filename only:

![Descriptive alt text](your-photo.jpg)
*Optional italic caption on the next line*

To use an image from the site-wide /images/ folder:

![Descriptive alt text](/images/your-image.jpg)

Tips:

  • Always write meaningful alt text — it helps with accessibility and SEO
  • Captions are optional; wrap in *asterisks* for italic styling
  • JPG for photos, PNG for graphics with transparency

Lists

- First item
- Second item
- Third item

1. First step
2. Second step
3. Third step

Unordered list:

  • Wildlife photography works best in the golden hour — the hour after sunrise and before sunset
  • Shoot in RAW format whenever possible for maximum editing flexibility
  • A monopod is often more practical than a tripod in the field

Numbered list:

  1. Import your RAW files into Lightroom
  2. Apply your base exposure corrections
  3. Export as TIFF before opening in Photoshop

Blockquote

> Your quoted text here. Good for pulling out a key idea or attributing a quote.

The best camera is the one you have with you. Keep your eye trained, your settings ready, and your battery charged.

Horizontal Rule

Use three dashes on their own line to add a visual divider between sections:

---

Pullquote Shortcode

Use for a visually styled pull quote with a left border. Good for breaking up long posts.

{{< pullquote >}}
Your pullquote text here.
{{< /pullquote >}}

Working example:

Post-processing is not cheating — it is the digital darkroom, and it has always been part of the photographic craft.

Button Shortcode

Use for calls to action — links to galleries, external resources, or related posts.

{{< button url="/portfolio/photography/wildlife/" text="View Wildlife Gallery" >}}
{{< button url="https://example.com" text="External Link" target="_blank" >}}

Working examples:

View Wildlife Gallery View Commercial Gallery

Displays a 3-column grid with lightbox. All images must be in the same folder as the post.

{{< postgallery images="photo1.jpg, photo2.jpg, photo3.jpg" >}}

Tips:

  • Separate filenames with commas
  • Add as many images as you like — the grid wraps automatically
  • Click any image to open the lightbox

Image Slider Shortcode

A before/after reveal slider. Drag the handle to reveal. Both images must be in the same folder as the post, or use absolute paths from the site root.

{{< imageslider before="before.jpg" after="after.jpg" >}}

{{< imageslider before="before.jpg" after="after.jpg" beforelabel="SOOC" afterlabel="Edited" >}}

Tips:

  • Labels are optional — omit for default “Before / After”
  • Images should be the same aspect ratio for best results
  • Works with touch on mobile

Working example:

Product Shot B Product Shot B
Product Shot A Product Shot A

Creating a New Post

  1. In VS Code, go to content/blog/
  2. Create a new folder using lowercase with hyphens e.g. my-post-title
  3. Inside that folder create index.md
  4. Start with the frontmatter block from the top of this page
  5. Drop any images for this post into the same folder
  6. When ready to publish: git add . && git commit -m "New post: title" && git push