Monetize your blog with Ko-fi shortcodes for Hugo sites

Introduction

Being the owner of this blog, I often find joy in revisiting past endeavors that may no longer be part of my daily work. From fine-tuning website performance to delving into the intricacies of SEO, I relish the opportunity to explore various aspects of digital craftsmanship.

One aspect that particularly piques my interest is finding creative ways to monetize my blog without resorting to intrusive advertisements. As a steadfast supporter of Open Source principles, I value the ability for people to express their appreciation through voluntary contributions or tips, on their own terms. This is where platforms like Ko-fi come into play.

In this blog post, I’d like to share a collection of custom shortcodes tailored for Hugo static site generator, designed to seamlessly integrate Ko-fi buttons and widgets into any blog post. With easy configuration and a range of options to choose from, these shortcodes offer a hassle-free solution for bloggers seeking alternative monetization avenues.

Let’s dive into how you can leverage these shortcodes to enhance your blog and cultivate support from your audience.

Of course if you enjoy it, ☕ me!

Installation and configuration

First, add shortcode theme to your site:

Add kofi shortcodes to Hugo site

cd your-site-location
git submodule add --depth=1 \
    https://github.com/tgagor/hugo-shortcode-kofi.git \
    themes/hugo-shortcode-kofi

All shortcodes rely on one global parameter, which should be set up in your config.yaml or hugo.yaml:

Update hugo.yaml

theme:
  - YourThemeOfChoice
  - hugo-shortcode-kofi

params:
  kofi:
    username: your-name

Thanks to that, you can just use shortcodes without the need to each time provide the user parameter. For more details, check repo .

Generic parameters

Parameter name	Default value	Description
user		your Ko-fi user name, tries to use `params.kofi.username` first
text	`"Support Me on Ko-fi"`	text shown on the button
alt_text	`"Buy Me a Coffee at ko-fi.com"`	text shown if image can’t be loaded
color	`"#29abe0"`	hex color of the button (if applicable)
style	`"blue"`	style of the button (if applicable)
height	`36`	height in pixels (if applicable)

Demos

Animated buttons

Those look nice and have animated mugs, but I saw them being blocked by uBlock Origin.

Animated button	Shortcode
	`{{< kofi/button >}}` or `{{< kofi/button color="#13C3FF" >}}`
	`{{< kofi/button color="#FF5E5B" >}}`
	`{{< kofi/button color="#434b57" >}}`

Static images

Image style 1	Shortcode
	`{{< kofi/image1 >}}` or `{{< kofi/image1 style="blue" >}}`
	`{{< kofi/image1 style="grey" >}}`
	`{{< kofi/image1 style="red" >}}`
	`{{< kofi/image1 style="green" >}}`
	`{{< kofi/image1 style="dark" >}}`

Image style 2	Shortcode
	`{{< kofi/image2 >}}` or `{{< kofi/image2 style="blue" >}}`
	`{{< kofi/image2 style="red" >}}`
	`{{< kofi/image2 style="stroke" >}}`
	`{{< kofi/image2 style="dark" >}}`

Logotypes

Logos	Shortcode
	`{{< kofi/logo >}}` or `{{< kofi/logo style="logo" >}}`
	`{{< kofi/logo style="mug" >}}`
	`{{< kofi/logo style="pixel" >}}`

Badges

Badges	Shortcode
	`{{< kofi/badge >}}` or `{{< kofi/badge style=white >}}`
	`{{< kofi/badge style=dark >}}`
	`{{< kofi/badge style=bg-white >}}`
	`{{< kofi/badge style=bg-dark >}}`

Dynamic widgets

Widgets	Shortcode
check left-bottom corner	`{{< kofi/floating-button >}}`
	`{{< kofi/donation-panel >}}`

Custom images

You can also use your custom images:

{{< kofi/custom height=200 url="https://media.giphy.com/media/kgKFcQk6oa1WIdHNSl/giphy.gif" >}}

For inspiration check here:

Introduction#

Installation and configuration#

Generic parameters#

Demos#

Animated buttons#

Static images#

Logotypes#

Badges#

Dynamic widgets#

Custom images#