Hugo themes and customizations

Hugo installation

https://gohugo.io/installation/linux/

sudo pacman -S hugo

or

paru -S hugo

hugo version

Getting started

https://gohugo.io/getting-started/quick-start/

Making customizations to themes

1. Never copy an offline zip file to the themes directory in your website. Always clone it - either from the source - or make a fork and then clone the fork.
2. If you make customizations, commit them to source control.
3. And keep pulling latest updates from the source from time to time.

How to show backlinks to posts

https://seds.nl/notes/export_org_roam_backlinks_with_gohugo/

Since Org-roam export backlinks on Hugo no longer works, handle backlinks in Hugo itself.

The following Hugo partial template will add backlinks to a note if any.

1. project-root/themes/anatole/layouts/partials/backlinks.html
2. project-root/themes/mainroad/layouts/partials/backlinks.html
3. project-root/themes/ananke/layouts/partials/backlinks.html

{{ $re := $.File.BaseFileName }}
{{ $backlinks := slice }}
{{ range .Site.AllPages }}
   {{ if and (findRE $re .RawContent) (not (eq $re .File.BaseFileName)) }}
      {{ $backlinks = $backlinks | append . }}
   {{ end }}
{{ end }}

<hr>
{{ if gt (len $backlinks) 0 }}
  <div class="bl-section">
    <h4>Backlinks</h4>
    <div class="backlinks">
      <ul>
       {{ range $backlinks }}
          <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
       {{ end }}
     </ul>
    </div>
  </div>
{{ else  }}
  <div class="bl-section">
    <h4>No notes link to this note</h4>
  </div>
{{ end }}

Include the previous partial to your single.html

Then, include the previous partial to your single.html

This varies based on the theme.

{{ partial "backlinks.html" . }}

ananke theme

In the file, project-root/themes/ananke/layouts/_default/single.html, just add the line.

anatole theme

mainroad theme

With mainroad theme, it would look like this:

archie theme

How to customize the “posts” page?

This will not show additional content (description) in the Posts page - for each post. It will show just the headings.

ananke theme

In the file, project-root/themes/ananke/layouts/_default/summary.html, comment out this part.

anatole theme

Make changes similar to this:

mainroad theme

Increase page width

archie theme

Change format of posts page. This will not show additional content in the Posts page - for each post. It will show just the headings.

Customize footer

Dont show date on each page

Increase font size

Increase page width

How to make the content fit 100% of the page instead of fitting in a box in the middle of the page?

How to know what change to make?

By right clicking on the page in a browser and picking “Inspect Element” (firefox) or “Inspect” (chrome) which gives you information about which elements are present and how are they effected by existing CSS.

ananke theme

Go to the file: project-root/themes/themes/ananke/layouts/_default/single.html

It’s fixed (sort of…) if we remove “flex-l” from layouts/_default/single.html, from <div class="flex-l mt2 mw8 center">

Another issue is that on a widescreen monitor the actual content is only in the center of the page. So if I want to show photos in all the page, what should I do?

Where is flex-l defined? It’s a node_module that’s imported the CSS file is built. You can see the docs here: http://tachyons.io/docs/layout/flexbox/

“mw8” which puts a max-width on the body. You can remove that, too.

Remove this part too “w-two-thirds-l”

mainroad theme

Go to the file: assets/css/style.css

Interesting hugo themes

1. Anatole Hugo Theme
2. Mainroad Hugo Theme
   1. https://github.com/vimux/mainroad
   2. https://themes.gohugo.io/themes/mainroad/
   3. https://mainroad-demo.netlify.app/docs/customization/

TODO:

1. Try this: https://github.com/64bitpandas/amethyst
   1. Some interesting features
      1. Navigation sidebars on left and right of content
      2. Interactive graph view
      3. Search bar

Minimalistic designs

1. https://www.besthugothemes.com/
2. https://www.besthugothemes.com/theme/athul-archie/
3. https://www.besthugothemes.com/theme/adityatelange-hugo-papermod/

Menu on the right side

1. https://www.besthugothemes.com/theme/gethyas-doks/

2. https://www.besthugothemes.com/theme/alex-shpak-hugo-book/

3. Ananke (simple theme, recommended by the Hugo tutorial) https://github.com/theNewDynamic/gohugo-theme-ananke

4. Cayman (looks like the default GitHub Pages theme) https://github.com/zwbetz-gh/cayman-hugo-theme

5. Dream (https://github.com/g1eny0ung/hugo-theme-dream) (grid-based theme. A fork https://github.com/Darthagnon/hugo-theme-dream , developing faster and has more features.)

6. Diary (very elegant, Substack-like) https://github.com/AmazingRise/hugo-theme-diary/

7. Universal (good general purpose theme) https://github.com/devcows/hugo-universal-theme

8. Jane (another good general purpose theme, simpler) https://github.com/xianmin/hugo-theme-jane

9. Massively https://github.com/curtiscde/hugo-theme-massively

10. Stack (very actively developed, fully featured, looks good) https://github.com/CaiJimmy/hugo-theme-stack

11. Blist https://github.com/apvarun/blist-hugo-theme

12. Frances (2019, unlisted, but quite a nice Google Images-style grid) https://github.com/mcrwfrd/hugo-frances-theme

13. twentyfourteen (2019, unlisted, port of a Wordpress theme that is well-known from certain videogame repacking websites) https://github.com/jaden/twentyfourteen

14. Hugrid (2019, unlisted, another Google Images-style grid. Used by other themes) https://github.com/aerohub/hugrid

15. GitHub Style (looks like a Github profile page) https://github.com/MeiK2333/github-style

16. PaperModX (simple, actively developed, modern and lite theme) https://github.com/reorx/hugo-PaperModX

Configuration

A tip would be to do hugo config and see what the effective setting is. If on *nix you can do:

hugo config

hugo config | grep ignorelogs

Based on that, we can change settings in the toml file like this:

[markup]
  [markup.goldmark]
     [markup.goldmark.renderer]
        unsafe = true

Errors with hugo config

ERROR deprecated: site config key paginate was deprecated in Hugo v0.128.0 and subsequently removed. Use pagination.pagerSize instead.

In hugo.toml file, use this

# Used by mainroad theme
#paginate = "1000" # Number of posts per page
[pagination]
pagerSize = "1000"

Tags

1. PageFind