Works with Hugo

A store for your Hugo site that stays out of the build

Hugo builds a few thousand pages in about the time other tools need to start up. Putting a database behind it in order to sell something would throw that away. This does not. The commerce runs as a service, and hugo keeps doing exactly what it does now.

Create your store See the integration

Product data in front matter

Hugo sites usually want content to be the source of truth, so put each product in content/shop/ and let front matter carry the three fields the cart needs. A file under data/ works just as well if you would rather keep the whole catalogue in one place.

content/shop/yirgacheffe.md

---
title: Ethiopian Yirgacheffe
itemId: "a1b2c3d4-..."
price: 22.50
---

Washed, floral, and rather better than it needs to be.

A partial you can call from anywhere

One partial renders the button, so a list page and a single page emit identical markup and there is exactly one file to edit if that ever needs to change.

layouts/partials/buy.html

<button class="commerce-add"
        data-item-id="{{ .Params.itemId }}"
        data-item-name="{{ .Title }}"
        data-item-price="{{ .Params.price }}">
  Add to Cart
</button>

layouts/_default/baseof.html

<div id="suitestatic-cart"
     data-public-key="pk_live_..."></div>
<script src="https://suitestatic.com/widget.js"></script>

Call it with {{ partial "buy.html" . }} from layouts/shop/single.html. The three tags in full.

Your build time does not move

Nothing here runs during a build. No API is called while Hugo works, no product fetch can fail in CI, and no slow third party can break a deploy. The cart is fetched by the shopper's browser, and only once they open it.

Still one binary. No node_modules appears in your repository.
Still deployable to Netlify, Cloudflare Pages, or a bucket behind a CDN.
Preview builds keep working, because there is nothing environment-specific to wire up per branch.

What you are actually paying for

The button is trivial. The rest is not: inventory that decrements when an order arrives, live USPS, UPS and FedEx rates for a parcel sized from the real weight and dimensions of the cart, postage bought at cost, tracking email, refunds, receipts. How shipping is calculated, or what it costs.

Add a store to your Hugo site

Two tags in baseof.html and a partial. The Starter plan is free, so you can watch it work before you decide anything.

Create your store