• content lives in /content/.
• Each .md file becomes a page. Example:

  content/
    about.md        → /about/
    artists.md      → /artists/
    how-it-works.md → /how-it-works/

• To add a new page, create a markdown file with front matter at the top:

  ---
  title: "My New Page"
  date: 2026-01-17
  draft: false
  ---
  Your markdown content here...

• Or use hugo new pagename.md

• Menu is in config.yaml under Menus.main. Example:

  Menus:
    main:
      - identifier: howitworks
        name: How It Works        # Display text
        title: How Open Studios Works
        url: /how-it-works        # Must match content filename
        weight: 1                 # Order (lower = first)

• To add a menu item, add a new entry with a unique identifier and matching URL to your content file.

hugo server -D    # Local preview (includes drafts)
hugo              # Build site to /public/

The homepage is typically special: it might pull from config.yaml params (hero section, etc.), not from a markdown file. To change homepage content, edit the params.hero section in config.yaml.

• Put images in the /static/ folder. Example:

  static/
    images/
      my-photo.jpg    → referenced as /images/my-photo.jpg
      hero.svg

• Reference images in markdown: ![Alt text](/images/my-photo.jpg)

Hugo uses standard markdown, so placement options are limited without HTML.

• Basic markdown (no positioning control): ![Artist at work](/images/artist.jpg)
• With HTML for more control (config must has unsafe: true for this to work):

  <!-- Centered -->
  <div style="text-align: center;">
    <img src="/images/artist.jpg" alt="Artist at work" width="500">
  </div>

  <!-- Floated left with text wrap -->
  <img src="/images/artist.jpg" alt="Artist" style="float: left; margin-right: 20px; width: 300px;">

  Text wraps around the image here...

  <div style="clear: both;"></div>

  <!-- Side by side -->
  <div style="display: flex; gap: 20px;">
    <img src="/images/photo1.jpg" style="width: 50%;">
    <img src="/images/photo2.jpg" style="width: 50%;">
  </div>

  Figure with caption:
  {{< figure src="/images/artist.jpg" caption="Local artist in their studio" >}}

• Keep images in /static/images/ for organization
• Use web-friendly formats (jpg, png, webp)
• Resize large images before adding (Hugo doesn't auto-resize)

• /public/ - Don't touch. Hugo regenerates this every time you build. Any manual edits get overwritten.
• /content/ - Your markdown pages. Edit these.
• /static/ - Images, files, etc. that get copied as-is to public.
• /config.yaml - Site settings, menus, homepage content.

1. Edit files in /content/ or /static/
2. Run hugo (or hugo server -D for live preview)
3. Hugo builds everything into /public/

• override defaults in the theme by putting overriding files with the same names in themes/<theme name>/layouts/partials
  • example: themes/hugo-profile/layouts/partials/footer.html
• override the favicon logo by putting the override in /static/fav.png