This repository contains a full migration of acousticobservatory.org from a hosted WordPress site to a Hugo static site, targeting deployment on Netlify.
The static site lives in the landing_site/ directory.
The original site was downloaded via a Jetpack backup (full WordPress export including media uploads). All page content, images, and structure were extracted and converted to Hugo-compatible markdown and templates.
A clean CSS-only design system was built from scratch in landing_site/static/css/design-system.css, replacing the original WordPress theme. Key principles:
- No preprocessors — plain CSS with custom properties
- Semantic over classed — element selectors and BEM-style component classes used sparingly
- Responsive — flexbox/grid layouts, fluid typography, mobile-first breakpoints
- All WordPress pages converted to Hugo markdown with YAML front matter
- 85 site/point pages converted from raw WordPress block HTML to clean markdown tables, with structured front matter:
site_id,point_ids,ecoregion,summary, andimagesfor search indexing and cross-linking - Image galleries use a reusable
{{< image-mosaic >}}shortcode
Hugo templates in landing_site/layouts/ cover:
| Layout | Purpose |
|---|---|
_default/baseof.html |
Base shell with header/footer |
index.html |
Homepage with hero carousel and section cards |
sites/list.html |
Filterable site directory with ecoregion facets |
ecoregions/single.html |
Ecoregion tile grid |
partials/tile-card.html |
Shared card partial (image + title + summary) |
partials/image-mosaic.html |
CSS-columns photo mosaic |
partials/header.html |
Responsive navigation header |
partials/footer.html |
Footer with logo grid and links |
The site directory (/sites/) uses lightweight client-side JS filtering:
- URL parameter
?q=pre-fills the search on load - Filters by site name, ecoregion, and region
- Ecoregion pages link directly to pre-filtered site lists
The contact page uses Netlify Forms — no server required. The form is marked with data-netlify="true".
All binary assets (images, PDFs, media) in landing_site/static/ are tracked with Git LFS via .gitattributes. WordPress-generated thumbnail variants (1412 files, filename-NNNxNNN.ext pattern) were removed; only original/highest-resolution files are kept.
Link integrity is verified with htmltest — see landing_site/.htmltest.yml.
- Hugo extended v0.110+
- Git LFS (for image assets)
- Node.js (optional — used for batch content scripts only)
cd landing_site
hugo server --renderToMemory --disableFastRenderThe site will be available at http://localhost:1313.
Note: If CSS changes aren't reflecting, restart the server — Hugo's fast-render mode can cache stale CSS in development.
cd landing_site
hugo buildOutput is written to landing_site/public/. This directory is ignored by git (Netlify builds from source).
- Connect the repository to Netlify
- Set Base directory to
landing_site - Set Build command to
hugo - Set Publish directory to
landing_site/public
Netlify will automatically handle form submissions from the contact page.
cd landing_site
hugo build
htmltest # reads .htmltest.yml config.
├── .gitattributes # Git LFS tracking rules for binary assets
├── .gitignore
├── README.md # This file
└── landing_site/
├── hugo.toml # Hugo site configuration
├── .htmltest.yml # htmltest link checker config
├── content/ # All site pages as markdown
│ ├── sites/ # 85 recording site pages
│ ├── ecoregions/ # Ecoregion listing
│ ├── data/ # Data access pages
│ └── ...
├── layouts/ # Hugo HTML templates
│ ├── _default/
│ ├── partials/
│ └── shortcodes/
└── static/
├── css/
│ └── design-system.css
└── wp-content/
└── uploads/ # Migrated media assets (tracked via LFS)