Hi, I'm Sabine, a software engineer at Coil. Lately, I have been working on some Web Monetization demos and I also participated in the DeFi Hackathon at San Francisco Blockchain Week last year, where my team's project won one of Xpring's prizes:
I thought I should share these little hacks with you to serve as inspiration for this epic hackathon. This will be a mini-series, so stay tuned for more!
Hugo + Web Monetization: The hackathon
Hugo is a static webpage generator that allows people with some coding skills to set up a beautiful webpage in just a few minutes by writing all of its content in markdown. If you want to do any changes apart from adding pages and post, though, it becomes complicated and you have to dig into the theme's code.
For the hackathon project, we tweaked an existing Hugo theme called Newsroom to allow for simple Web Monetization via the Hugo config.toml file and exclusive content using a div tag. Here is the devpost submission.
I must admit, it wasn't the greatest hack but it made me want to continue to work on it.
Hugo + Web Monetization: The Hugo theme component
A tweaked Hugo theme does not help anybody who wants to use a different theme, so I looked into avenues to get Web Monetization and exclusive content included into every webpage more easily. The fact that Web Monetization is proposed for incubation in the Web Platform Incubator Community Group (WICG) was not enough for the Hugo community to add it to their core - understandable. They pointed me towards theme components, which ended up being my solution:
sabineschaller
/
hugo-webmonetization-component
Hugo theme component that enables web monetization and exclusive content
Hugo Web Monetization Component
Note: This is not a standalone theme but a theme component that enables web monetization on your entire hugo website.
Web monetization is a standard. It is a JavaScript browser API which allows the creation of a payment stream from the reader to the content creator using the Interledger Protocol. The user needs a browser extension like Coil or Minute, or they are ahead of their time and use the Puma Browser. These will check the website for the existence of a meta tag called "monetization" which includes the payment pointer. You, the content and website creator, need such a a payment pointer.
This component adds a partial including the "monetization" meta tag and the payment pointer of the creator.
How to add the component to your site
Add the component as second theme to your hugo site:
git submodule add git@github.com:sabinebertram/hugo-webmonetization-component.gitA Hugo theme component is installed together with the actual theme, adding extra functionality but has no styling capabilities. It is not a stand-alone theme.
The Hugo - Web Monetization theme component allows for multiple payment pointers, one per page, such that collaborators do not have to worry about splitting payments later. Exclusive content is wrapped in {{% exclusive %}} and {{% /exclusive %}}. Additionally, the lock and unlock messages are freely customizable.
Let me know in the comments if you have ideas of what else I could add to it!
Top comments (4)
I have been wondering whether submitting patches to static site generators was worthwhile too. Jekyll has been on my mind, since it is the tool I use.
This is an interesting experience with Hugo, I wonder what other platforms have this sort of support that can allow for an easy integration if a developer chooses.
Hi Phil,
I have only interacted with the Hugo community which has been very responsive but also cautious to introduce Web Monetization support into their core. However, they definitely liked the premise of it seemed open to reconsider as soon it is more mainstream (see here).
Jekyll has the notion of plugins and I have not come across a Web Monetization plugin yet. It would be great to have that and I'm sure if the traction is high, the community is more likely to add it to their core.
Ah yes, good idea, I could totally look into a Jekyll plugin to guage interest to start with. I've written a couple before, so this seems do-able!
Hi! Thanks for amazing article. I was wondering how you would do it now, considering that Coil is down?