Error building site: rendering failed using theme 'Pico'

Using Themes
1

Hello!

I’m very new to hugo and am having trouble getting started.

I am using the pico theme and have already tried incorporating the advice from this post into the config.toml (and copied the theme’s assets/ folder into the root directory) but to no avail.

When trying to run hugo server, I receive the following error:

*Start building sites … *
hugo v0.121.2-6d5b44305eaa9d0a157946492a6f319da38de154+extended darwin/amd64 BuildDate=2024-01-05T12:21:15Z VendorInfo=brew

ERROR render of “page” failed: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/_default/baseof.html:15:5”: execute of template failed: template: _default/single.html:15:5: executing “_default/single.html” at <partial “header.html” .>: error calling partial: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/partials/header.html:12:7”: execute of template failed: template: partials/header.html:12:7: executing “partials/header.html” at <partial “icon” .>: error calling partial: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/partials/icon.html:3:5”: execute of template failed: template: partials/icon.html:3:5: executing “partials/icon.html” at <slicestr .Site.Title 0 1>: error calling slicestr: slice bounds out of range
ERROR render of “page” failed: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/_default/baseof.html:15:5”: execute of template failed: template: blog/single.html:15:5: executing “blog/single.html” at <partial “header.html” .>: error calling partial: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/partials/header.html:12:7”: execute of template failed: template: partials/header.html:12:7: executing “partials/header.html” at <partial “icon” .>: error calling partial: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/partials/icon.html:3:5”: execute of template failed: template: partials/icon.html:3:5: executing “partials/icon.html” at <slicestr .Site.Title 0 1>: error calling slicestr: slice bounds out of range
ERROR render of “home” failed: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/_default/baseof.html:15:5”: execute of template failed: template: index.html:15:5: executing “index.html” at <partial “header.html” .>: error calling partial: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/partials/header.html:12:7”: execute of template failed: template: partials/header.html:12:7: executing “partials/header.html” at <partial “icon” .>: error calling partial: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/partials/icon.html:3:5”: execute of template failed: template: partials/icon.html:3:5: executing “partials/icon.html” at <slicestr .Site.Title 0 1>: error calling slicestr: slice bounds out of range
Total in 259 ms
Error: error building site: render: failed to render pages: render of “page” failed: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/_default/baseof.html:15:5”: execute of template failed: template: _default/single.html:15:5: executing “_default/single.html” at <partial “header.html” .>: error calling partial: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/partials/header.html:12:7”: execute of template failed: template: partials/header.html:12:7: executing “partials/header.html” at <partial “icon” .>: error calling partial: “/Users/kt/Documents/personal/kaitlynhobbs/layouts/partials/icon.html:3:5”: execute of template failed: template: partials/icon.html:3:5: executing “partials/icon.html” at <slicestr .Site.Title 0 1>: error calling slicestr: slice bounds out of range

my config.toml file looks like this:

# Use an empty string if you have multiple domain linking to your website
# This string is used to generate the absolute URL for your assets.
baseURL = 'https://kaitlynhobbs.github.io/'
defaultContentLanguage = 'en'

# Emoji in markdown files
enableEmoji = true
languageCode = 'en-us'

# Number of blog post per page
paginate = 10
theme = 'pico'

# Title of the website is used for the meta tag title
# and the square icon (not the favicon)
title = 'KT Portfolio'

[params]
customCSS = [] # Path relative to assets folder
customJS = [] # Path relative to assets folder
# Homepage description

# For blog page description you can overwrite it 
# in the front matter
description = "Boilerplate website"
email = "khobbs3@uwo.ca"
favicon = '/favicon.ico'
# Dark mode support
# Supported value are :
# - off
# - always
# If commented the theme will use the browser theme.
darkMode = 'always'

# Social parameters for contact_icons widget
[[params.social]]
alt = "email icon"
icon = "/icons/email.svg"
name = "email"
url = "mailto:mail@example.com"

[[params.social]]
alt = "github icon"
blank = true
icon = "/icons/github.svg"
name = "github"
url = "https://github.com/"

[[params.social]]
alt = "medium icon"
blank = true
icon = "/icons/medium.svg"
name = "medium"
url = "https://medium.com/"

[[params.social]]
alt = "stack-overflow icon"
blank = true
icon = "/icons/stack-overflow.svg"
name = "stack-overflow"
url = "https://stackoverflow.com/"

[[params.social]]
alt = "twitter icon"
blank = true
icon = "/icons/twitter.svg"
name = "twitter"
url = "https://twitter.com/"

[[params.social]]
alt = "facebook icon"
blank = true
icon = "/icons/facebook.svg"
name = "facebook"
url = "https://facebook.com/"

# Navigation bar
[menu]

[[menu.main]]
identifier = "home" # identifier is use for translations
pre = "" # pre is inserted before the translation (icons, image, etc)
url = "/" 
weight = 10 

[[menu.main]]
identifier = "blog" # identifier is use for translations
pre = "" # pre is inserted before the translation (icons, image, etc)
url = "/blog/" 
weight = 20 

[[menu.main]]
identifier = "contact" # identifier is use for translations
pre = "" # pre is inserted before the translation (icons, image, etc)
url = "/#contact" 
weight = 30 

# Syntax highlighting
[markup.highlight]
guessSyntax = true 
lineNumbersInTable = true 
noClasses = false # Set to false to use the Pico default theme.
tabWidth = 2 

[taxonomies]
category = "categories"
tag = "tags"

# Translation
# English, French and Italian are supported but you can contribute
# by adding translation to i18n/ folder.
[languages.en]
contentDir = 'content/en'
languageCode = 'en'
languageName = 'English'
weight = 0

[languages.fr]
contentDir = 'content/fr'
languageCode = 'fr'
languageName = 'Français'
weight = 2

# Uncomment the following lines to add an italian translation.
# [languages.it]
# contentDir = 'content/it'
# languageCode = 'it'
# languageName = 'Italiano'
# weight = 3

# Uncomment the following lines to add an spanish translation.
# [languages.es]
# contentDir = 'content/es'
# languageCode = 'es'
# languageName = 'Español'
# weight = 4

# Uncomment the following lines to add a German translation.
# [languages.de]
# contentDir = 'content/de'
# languageCode = 'de'
# languageName = 'Deutsch'
# weight = 5

Thank you in advance!

2

Did you modify any of theme layouts?

3

I haven’t modified any theme layouts but do somehow (I do not recall what I did to result in this) have two layout folders:

  1. in the root directory
  2. under themes/pico/

these have the same contents but could it be causing a conflict?

4

Hard to say. Can you share your project repository?

Also note that the theme you have chosen, pico, has been archived and is no longer actively maintained. I encourage you to use something different.

With a virgin copy of the theme I am unable to reproduce your problem, so I suspect that whatever is in the layouts directory in your project root is causing the problem, overriding one or more theme templates.

5

Here is the repo: GitHub - KHobbs3/kaitlynhobbs.github.io

Thank you for investigating!

I tried removing one layout folder (first in root, then under themes/pico after returning the root folder) and the same error persisted unfortunately.

6

This is a bit of a mess. If I were you I would start from scratch with a theme that is actively maintained.

Assuming you have not overridden any of the files in themes directory, if you want to keep what you have…

rm -r archetypes/ assets/ layouts/ public/ resources/
rm hugo.toml
mv config.toml hugo.toml
rm -r content/posts
cp themes/pico/package* .
npm ci

Then in your hugo.toml file, comment out or remove these lines:

customCSS = [
	"style/style.css",
	"style/theme.sass",
] # Path relative to assets folder
customJS = ["js/console.js"] # Path relative to assets folder

And create a .gitignore file in the root of your project, something like:

.hugo_build.lock
node_modules/
public/
resources/
7

thank you, I tried what you suggested and received a new error then ultimately went with a different theme and had no issues!

Thanks for your help :slight_smile: