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:
[params] monetization = "$twitter.xrptipbot.com/sabinebertram_"
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
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