lwc:hugo [wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
==== Adding/Editing Pages ====
  * content lives in /content/.
  * Each .md file becomes a page. Example:
<code>
  content/
    about.md        → /about/
    artists.md      → /artists/
    how-it-works.md → /how-it-works/
</code>
  * To add a new page, create a markdown file with front matter at the top:
<code>
  ---
  title: "My New Page"
  date: 2026-01-17
  draft: false
  ---
  Your markdown content here...
</code>
   * Or use ''hugo new pagename.md''
==== Modifying the Menu ====
  * Menu is in ''config.yaml'' under ''Menus.main''. Example:
<code>
  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)
</code>
  * To add a menu item, add a new entry with a unique identifier and matching URL to your content file.

==== Common Commands ====
<code>
hugo server -D    # Local preview (includes drafts)
hugo              # Build site to /public/
</code>

==== Homepage ====

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.''

==== Adding Images ====

  * Put images in the ''/static/'' folder. Example:
<code>
  static/
    images/
      my-photo.jpg    → referenced as /images/my-photo.jpg
      hero.svg
</code>
  * Reference images in markdown:  ''![Alt text](/images/my-photo.jpg)''

=== Controlling Placement ===

  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):
<code>
  <!-- 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" >}}
</code>
  * Keep images in /static/images/ for organization
  * Use web-friendly formats (jpg, png, webp)
  * Resize large images before adding (Hugo doesn't auto-resize)

==== Organization ====
  * ''/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.

==== Workflow ====
  - Edit files in /content/ or /static/
  - Run hugo (or hugo server -D for live preview)
  - Hugo builds everything into /public/

==== Overriding defaults ====
  * 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''