GitHub Buttons

Hugo Shortcode for GitHub Buttons #

Add buttons to star, watch, or fork Github repository or to follow/sponsor user.

The buttons are provided by Unofficial GitHub Buttons.

Minimal example #

By default it shows a small star button with a stars counter for the repository you specified:

Code:

{{< github-button owner="isqua" repo="bureau" >}}

Full example #

You can set different button types, large size, disable count and set the desired width:

Code of watch button:

{{< github-button
    type="watch"
    owner="isqua"
    repo="bureau"
    large=true width=170
>}}

Following and sponsorship buttons do not require repo:

Code of following button:

{{< github-button type="follow" owner="isqua" large=true >}}

Parameters #

ParameterDefaultDescription
type"star"One of: star, watch, fork, follow, sponsor
ownerUsername or organization name who owns the repository
repoThe repository name
largefalseIf true, the button is about 30px height. If false, about 20px.
counttrueWhether to show or not counter
widthevery button has its own default widthThe width of the button. Perhaps if you see too much empty space on the right of the button, you may set a lower value of width

Site Parameters #

You can set defaults in Site Parameters. For config.toml:

[params.HugoShortcodes.Github]
    Owner = 'your_github_login_or_org_name'
    Repository = 'your_repository_name'

For config.yaml:

params:
  HugoShortcodes:
    Github:
      Owner: your_github_login_or_org_name
      Repository: your_repository_name

Installation #

Don’t forget to install shortcode before usage.

Install all shortcodes at once

If you need dozens of them, it’s better to attach this repository as a theme to your website.

First, add the theme as a git submodule:

git submodule add -b theme https://github.com/isqua/hugo-shortcodes.git themes/hugo-shortcodes

Then add the theme to your config.toml. Most likely you have the following line in your config:

theme = 'ananke'

There may be another theme in place of “ananke”.

Then surround the theme with square brackets, and appends 'hugo-shortcodes' with a comma at the end:

theme = [ 'ananke', 'hugo-shortcodes' ]

That’s it! If your hugo server is running, it is better to restart it to avoid unexpected behavior.

Now you can use all the shortcodes on any content page of your site.


Install only current shortcode

If you need only one shortcode or installing a theme is too complicated, you may get it easier.

That’s it! If your hugo server is running, it is better to restart it to avoid unexpected behavior.

Now you can use the shortcode on any content page of your site.