Comments & Social

Beautiful Hugo supports five comment systems, social sharing buttons, GitHub repository buttons, and 42 social icon links in the footer, plus custom icons of your own.

Comment Systems

All comment systems are enabled per-page with comments: true in front matter. Only one comment system can be active at a time.

Disqus

The classic comment system, integrated via Hugo’s built-in Disqus support:

[Services]
  [Services.Disqus]
    Shortname = "your-disqus-shortname"

[Params]
  delayDisqus = true

delayDisqus = true defers loading until the user clicks a “Show comments” button, improving page load performance.

Giscus

Giscus uses GitHub Discussions as a comment backend. It’s privacy-friendly and requires no external service:

[Params.giscus]
  repo = "owner/repo"
  repoId = "R_kgDO..."
  category = "Announcements"
  categoryId = "DIC_kwDO..."
  mapping = "pathname"
  strict = "0"
  reactionsEnabled = "1"
  emitMetadata = "0"
  inputPosition = "top"
  theme = "preferred_color_scheme"
  lang = "en"
  lazyLoading = true

Get your configuration values from giscus.app.

Utterances

Utterances uses GitHub Issues as a comment backend — a lighter alternative to Giscus:

[Params.utterances]
  repo = "owner/repo"
  issueTerm = "pathname"
  theme = "preferred-color-scheme"
  label = "comment"

Get your configuration from utteranc.es.

Cusdis

Cusdis is a lightweight, privacy-friendly comment system:

[Params]
  cusdisID = "your-app-id"

Get your App ID from cusdis.com.

Staticman

Staticman adds comments as static data files via Git pull requests, with optional reCAPTCHA spam protection:

[Params.staticman]
  api = "https://your-staticman-instance.herokuapp.com/v3/entry/github/owner/repo/main/comments"

  [Params.staticman.recaptcha]
    sitekey = "your-site-key"
    secret = "your-secret"

Social Share Buttons

Enable social sharing buttons on posts with socialShare = true. The buttons appear at the bottom of each post:

[Params]
  socialShare = true

The following platforms are supported:

Override per page:

---
title: My Post
socialShare: false
---

GitHub Buttons

Show GitHub repository buttons (star, watch, fork, follow) on any page using front matter:

---
title: My Project
ghRepo: "halogenica/beautifulhugo"
ghBadge: ["star", "watch", "fork"]
ghCount: true
---

The buttons are loaded from ghbtns.com via lightweight iframes.

You can also set ghBadge and ghCount site-wide so they apply to every page that has a ghRepo:

[Params]
  ghBadge = ["star", "fork"]
  ghCount = true

Footer Social Icons

Add social links under [Params.author] and they appear as icons in the footer. Beautiful Hugo supports 42 platforms:

If a value starts with http:// or https://, it is used directly as the URL. Otherwise, it is interpolated into the default URL pattern.

For LinkedIn, the value should include the path prefix (e.g. in/username for a personal profile or company/username for a company page). If you provide a bare username with no /, the theme automatically prepends in/ for backward compatibility.

[Params.author]
  name = "Some Person"
  github = "username"
  linkedin = "in/username"
  mastodon = "https://mastodon.social/@username"

Custom Icons

Platforms that are not in the table go under [[Params.author.custom]]. Each entry carries its own link, label and icon class, and appears after the built-in icons:

[[Params.author.custom]]
  href = "https://social.example/@username"
  title = "GoToSocial"
  icon = "ds-gotosocial"
  rel = "me"          # optional; "me" enables Fediverse link verification

icon is a CSS class. Any Font Awesome free class works with no further setup. To use a different icon font, load its stylesheet from your own layouts/_partials/head_custom.html.

Example: Fediverse icons

Decentralized Social Icons covers about 90 Fediverse platforms and protocols that Font Awesome does not, such as GoToSocial, Friendica, Pixelfed, PeerTube and Lemmy. The theme does not ship the font, because most sites do not need it, but a site can add it in three steps.

1. Copy DSoci.css, DSoci.woff2 and DSoci.woff from the icon set into your site at static/dsoci/. Keep the LICENSES directory and the .license files with them: the set is REUSE compliant, and each logo has its own copyright holder.

2. Load the stylesheet from layouts/_partials/head_custom.html:

   <link rel="stylesheet" href="{{ "dsoci/DSoci.css" | relURL }}">
   

3. Add one entry per account. The class is ds- plus the project name:

   [[Params.author.custom]]
     href = "https://social.example/@username"
     title = "GoToSocial"
     icon = "ds-gotosocial"
     rel = "me"
   
   [[Params.author.custom]]
     href = "https://pixelfed.example/username"
     title = "Pixelfed"
     icon = "ds-pixelfed"
     rel = "me"
   

The icon font sets its own font-size. If a glyph looks too large or too small next to the built-in icons, correct it in your own CSS:

.footer-links [class^="ds-"] { font-size: 0.9em; }