Configuration on example

Configure Discussion

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

The theme supports embedding comments from Bluesky or Mastodon or both social platforms. When you include links to your Bluesky or Mastodon posts in the front matter, the Giscus will be automatically replaced.

Linking discussions with Mastodon post

Link your Mastodon post URL to the front matter using either toot, mstd, or mastodon parameter.

---
toot: https://example.com/@example/12345678901234567890
---

Linking discussions with Bluesky post

Link your Bluesky post URL to the front matter using either skeet, bsky or bluesky parameter.

---
skeet: https://bsky.app/profile/example.com/post/12345678901234
---

Note: You may need to estimating the article’s permalink on your local preview before sharing on Fediverse platforms to obtain the post link, or you might need to run CI/CD operations twice.

Configure Logo and Accent Color

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

The Hugo Brewm theme allows you to easily configure your site’s logo and accent color taylored to your brand. Follow these steps to set up your logo:

Change Color Accent

To make the color accent align with your brand identity, you can add following code to your site configuration (hugo.toml):

 // Adjust color
 [params.style]
 // light mode
 [params.style.light]
 // accent color on default contrast 
 ac = '#800'
 // background color on default contrast
 bg = '#eee'
 // foreground color on default contrast
 fg = '#111'
 // midtone color
 // mid = 'gray'
 [params.style.light.more]
 // accent color on hight contrast 
 ac = 'red'
 [params.style.light.less]
 // dark mode
 [params.style.dark]
 ac = '#f80'
 bg = '#000'
 fg = '#fff'
 mid= 'gray'
 [params.style.light.less]
 [params.style.light.more]

Adding Logo Image / Logomark Icon

Prepare your logo image

Create or prepare your logo image file (recommended formats: PNG or SVG)

For best results, use an image with a transparent background

Recommended dimensions: height of 50px to 70px

You can also add dark mode version of your logo

Configure the logo in your site configuration:

[params]
 logoMark = 'https://example.com/logoMark.svg'
 logoMarkDark = 'https://example.com/logoMarkDark.svg' #optional

Using Logo Type Preset

If you prefer not to use an image logo, you can enable the built-in text-based logo by adding this setting:

[params]
 logoType = true

After making these changes, rebuild your site to see the updated logo. The logo will automatically appear in the site’s header and will be responsive across different device sizes.

Configure Menu

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

Learn how to configure menus in the Hugo Brewm theme using either config.toml or menus[.lang].toml files.

identifier: Unique identifier for each menu item
name: Text shown in the menu
url: External link destination
pageRef: Link to internal pages
weight: Menu item ordering (smaller numbers first)
pre: Icon placement
post: Description for the link
parent: Parent menu item reference
params.target: Set menu item link target

Adding Icons

Add icons to your menu items with the pre parameter.

[[menu.main]]
 identifier = "github"
 name = "GitHub"
 url = "https://github.com/"
 pre = "github"
 [[menu.main.params]]
 target = "_blank"

Here are all the supported list icons and their corresponding names that can be used when configuring your menu items:

email
rss
behance
bigcartel
bitbucket
blogger
bluesky
bukalapak
buymeacoffee
clubhouse
codepen
creativefabrica
dailymotion
dev
deviantart
digg
dribbble
ebay
etsy
facebook
figma
flickr
flipkart
github
githubsponsors
gitlab
gnusocial
goodreads
googlescholar
gumroad
hackernews
hashnode
icon–500px
instagram
jsfiddle
karyakarsa
keybase
keycdn
kickstarter
kofi
lazada
liberapay
linkedin
mastodon
medium
olx
opencollective
openid
orcid
patreon
paypal
peertube
pinterest
pixelfed
pleroma
publons
quora
reddit
researchgate
saweria
sellfy
shopee
shopify
signal
snapchat
soundcloud
stackexchange
stackoverflow
stripe
substack
tangled
telegram
threads
tiktok
tokopedia
tumblr
twitch
twitter
vimeo
vine
wattpad
weibo
whatsapp
wikipedia
wordpress
write-dot-as
x
xing
xmpp
youtube

Creating Nested Menus

Create dropdown menus by using the parent parameter:

[[menu.main]]
 identifier = "about"
 name = "About"
 pageRef = "/about"

 [[menu.main]]
 identifier = "about-author"
 name = "Author"
 pageRef = "/about/author"
 parent = "about"

Language Support

There are three ways to add multi-language support to your menus:

1. Using `menu.[lang].[menuID]`

In config.toml:

[[menu.en.main]]
 identifier = "about"
 name = "About"
 url = "/about/"

 [[menu.en.main]]
 identifier = "about-author"
 name = "Author"
 pageRef = "/about/author"
 parent = "about"

[[menu.id.main]]
 identifier = "about"
 name = "Tentang"
 url = "/tentang/"

 [[menu.id.main]]
 identifier = "about-author"
 name = "Tentang Penyusun"
 pageRef = "/tentang/penyusun"
 parent = "about"

In menus.en.toml:

[[main]]
 identifier = "about"
 name = "About"
 url = "/about/"

 [[main]]
 identifier = "about-author"
 name = "Author"
 pageRef = "/about/author"
 parent = "about"

In menus.id.toml:

[[main]]
 identifier = "about"
 name = "Tentang"
 url = "/tentang/"

 [[menu.id.main]]
 identifier = "about-author"
 name = "Tentang Penyusun"
 pageRef = "/tentang/penyusun"
 parent = "about"

3. Using Front Matter in Markdown Files

in index[.lang].md _index[.lang].md or filename[.lang].md

---
title: "About Author"
menus:
 main:
 indetifier: about-author
 parent: about
---

Configure Pagefind

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

Setting up search in Hugo configuration

To enable search functionality, you’ll need to modify your config.toml file. First, enable the search button using .params.search. Then activate .params.pagefind, if you skip this step, the theme will default to using DuckDuckGo instead.

[params]
 search = true
 pagefind = true

Creating search page

Unlike hugo-brewm theme, this theme use single page for search by configuring new page with search layout. Create search.en.md:

---
title: "Search"
type: "search"
menus:
 main:
 identifier : "Search"
---

Setting up your CI/CD pipeline

To create the search index, add this command to your CI/CD pipeline’s build step:

- name: Index pagefind
 run: npx pagefind --source "public"

Configuration on example

Configure Discussion

Linking discussions with Mastodon post

Linking discussions with Bluesky post

Configure Logo and Accent Color

Change Color Accent

Adding Logo Image / Logomark Icon

Using Logo Type Preset

Configure Menu

Menu Parameters

Adding Icons

Creating Nested Menus

Language Support

1. Using `menu.[lang].[menuID]`

2. Using Separate Menu Files

3. Using Front Matter in Markdown Files

Configure Pagefind

Setting up search in Hugo configuration

Creating search page

Setting up your CI/CD pipeline

Configuration on example

Configure Discussion

Configure Social Media Integration

Linking discussions with Mastodon post

Linking discussions with Bluesky post

Configure Logo and Accent Color

Change Color Accent

Adding Logo Image / Logomark Icon

Using Logo Type Preset

Configure Menu

Menu Parameters

Adding Icons

Creating Nested Menus

Language Support

1. Using menu.[lang].[menuID]

2. Using Separate Menu Files

3. Using Front Matter in Markdown Files

Configure Pagefind

Setting up search in Hugo configuration

Creating search page

Setting up your CI/CD pipeline

1. Using `menu.[lang].[menuID]`