We wanted to enable content creators to be able to accept micropayments using webmonetization on their Hugo static webpages. This dramatically lowers the barrier of entry for content creators to monetize their content and creates a more privacy preserving experience for the user, since the content creator does not have to rely on advertisement revenue.

What it does

The updated Hugo theme allows content creators to have public content and exclusive (paid for) content on the same page without charging a creator-specific subscription fee. Users can unlock and pay for specific articles without having to buy multiple subscriptions. They can use the open source browser extension Minute or a Coil subscription.

How we built it

We forked the Newsroom Hugo theme and added the webmonetization metatag as well as a script that listens for the webmonetization event and only unlocks exclusive content if it occurs. Otherwise, the content stays hidden.

For a content creator, enabling webmonetization using this theme is as easy as including 2 lines into the config.toml which include the payment pointer:

  monetization = "$"

In the markdown file including the website content, exclusive content can be created by including the line <div id='exclusive'></div>. Everything below will only be displayed if micropayments are being streamed.

Challenges we ran into

We are no front-end developers. HTML, CSS, templating, etc. does not come naturally.

Accomplishments that we are proud of

Exclusive content

What we learned

  • Hugo framework
  • deploying sites to netlify

What's next for Hugo + Web Monetization

  • Improve hiding of exclusive content
  • create pull request to Hugo internal themes to make webmonetization possible for every theme


Built With

  • hugo
  • interledger
  • webmonetization
Share this project: