exampleSite of theme not rendering properly as a module

I’m trying to run my theme’s exampleSite as a demosite in github page using the parent theme as a module. Nevertheless, either testing on local or when published; I’m unable to properly import the PKB-theme/assets/js/ files or the PKB-theme/static/ files. Every other import seems to be working. To avoid shadow files my PKB-theme/exampleSite is mostly empty even from folders.

This is my PKB-theme/exampleSite/config/_default/hugo.toml:

baseURL      = "https://stradichenko.github.io/PKB-theme/"
languageCode = "en-us"
title        = "PKB-theme Demo"

[module]
  [[module.imports]]
    path = "github.com/stradichenko/PKB-theme"
    # version = "v1.0.0"  # optional pin once you have tags
    
    [[module.imports.mounts]]
      source = "layouts"
      target = "layouts"

    [[module.imports.mounts]]
      source = "static" # inside the theme repo
      target = "static" # inject it into my site’s

    [[module.imports.mounts]]
      source = "assets"
      target = "assets"

    [[module.imports.mounts]]
      source = "content"
      target = "content"

    [[module.imports.mounts]]
      source = "archetypes"
      target = "archetypes"

This is PKB-theme/exampleSite/go.mod:

module github.com/stradichenko/PKB-theme/exampleSite

go 1.23.8

require github.com/stradichenko/PKB-theme v0.0.1 // indirect

replace github.com/stradichenko/PKB-theme => ../

For clarity; when testing local I use the following command:

rm -rf ~/.cache/hugo/ &&
echo "Delete the resources directory (where processed assets are stored)" &&
rm -rf resources/ &&
echo  "Delete the public directory (not used with hugo server but good for clean slate)" &&
rm -rf public/ &&
echo "Delete any temporary files that might be created" &&
rm -rf .hugo_build.lock &&
rm -rf tmp/ &&
hugo server --source exampleSite --noHTTPCache --renderToMemory --disableFastRender --ignoreCache --gc --logLevel debug -D

Additional information:

pwd
/<PATH>/PKB-theme/exampleSite
ls -a
.  ..  go.mod  go.sum  hugo.toml
hugo mod graph
github.com/stradichenko/PKB-theme/exampleSite github.com/stradichenko/PKB-theme@v0.0.1 => /<PATH>/PKB-theme

Any help would be useful.

EDIT: I even placed the static files within PKB-theme/exampleSite, but still the issue persist:

tree
.
├── go.mod
├── go.sum
├── hugo.toml
├── resources
│   └── _gen
│       ├── assets
│       │   └── css
│       │       └── global
│       └── images
└── static
    ├── bibtex
    │   └── references.bib
    ├── images
    │   ├── logo-placeholder.svg
    │   └── profile.jpg
    ├── img
    │   └── logo.svg
    └── my-favicon
        ├── apple-touch-icon.png
        ├── favicon-96x96.png
        ├── favicon.ico
        ├── favicon.svg
        ├── site.webmanifest
        ├── web-app-manifest-192x192.png
        └── web-app-manifest-512x512.png

Just in case, also I erased PKB-theme/exampleSite/resources/_gen/images

This is a snippet of PKB-theme/layouts/partials/about-profile.html, where the profile picture is being used in:

<div class="about-profile-container">
  <div class="about-left-column">
    <div class="profile-image">
      <img src="{{ .Site.Params.profilePicture | default "/images/profile.jpg" }}" alt="Profile Picture" width="240" height="240">
    </div>

when i clone your theme and serve your exampleSite it is styled. so for the js issue if it’s there please provide a pointer.

you are serving from a subfolder, but use absolute pathes in the image src attr.

have look at this post and the referenced article

I have added:

the following to PKB-theme/config/_default/.hugo.toml:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderHooks]
      [markup.goldmark.renderHooks.image]
        enableDefault = true
      [markup.goldmark.renderHooks.link]
        enableDefault = true

And the following to PKB-theme/exampleSite/config/_default/.hugo.toml:

    [[module.imports.mounts]]
      source = "static" 
      target = "assets" # <--- NEW

    [[module.imports.mounts]]
      source = "assets"
      target = "assets"

I modified the section of PKB-theme/layouts/partials/about-profile.html to be more relative:

<!-- layouts/partials/header.html -->
<div class="header-container">
  <div class="header-left">
    <a href="{{ .Site.Home.RelPermalink }}" class="logo-link" aria-label="Home">
      <img src="{{ "img/logo.svg" | relURL }}" alt="Site Logo" class="site-logo" width="40" height="40">    <!-- ...NEW... -->
    </a>

Unfortunately, these edits don’t improve the rendering of static assets…


Regarding the JS issues; e.g. I have: PKB-theme/assets/components/knowledge-graph.js that fetches the links of notes and creates a graph like so:

This is the snippet from PKB-theme/asset/layouts/partials/knowledge-graph.html:

{{ $graphScript := resources.Get "js/components/knowledge-graph.js" | resources.ExecuteAsTemplate "js/knowledge-graph.js" . }}
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="{{ $graphScript.RelPermalink }}"></script>

But instead it just… doesn’t…

Can you try to add this line to your hugo.toml:

canonifyURLs=true

Please note that this is not recommended though.

I have tried before different combinations of:

# PKB-theme/exampleSite/config/_default/hugo.toml
canonifyURLs=true
relativeURLs = true

But it just beat the site to a pulp:

Should I be adding a layouts/_default/_markup/render-link.html file or with the aforementioned modifications is enough to work properly?

nope. sry…the link render hook is for the markdown links.

in your templates you will have do somethin like.

{{with resources.Get "img/logo.svg"}}
img src="{{.RelPermalink}}"

dunno if the order of the mounts is important its opposite for the assets mount in the article.

sry for brevity .. mobile only

favicon

head.html line 5 : works for me no need to mount to assets for that
<link rel="icon" type="image/png" href="{{ relURL "my-favicon/favicon-96x96.png" }}" sizes="96x96" />

webmanifest

can be loaded like above, but won’t work cause you have hardcoded names in the file - guess you will have to generate that using

  • resource.Get from “my-favicon/site.webmanifest”
  • parse the json and prepend the url to each src entry
  • use ExecuteAsTemplate to publish the resource and use it’s .RelPermalink in the attribute

there’s a graph but looks like some calculation is missing

maybe some calculation problems

I’ll make modifications to all hardcoded path to files, similar to what you have shown. I will start by achieving your favicon results.
Regarding to JS, I’m not entirely sure if it’s an importing issue or just skill-issues from my part.

I have added relURL to the places in the code it may be demanded but still no improvements on static files or JS files. To have an idea on how the page should look like, serving the theme in root will show the website as intended.

Also… is a webmanifest necessary in a HUGO theme? I don’t fully understand its usefulness.

UPDATE to repo:

  • PKB-theme/exampleSite/config/_default/hugo.toml
  • HTML files with static items have been updated to use relURL.

PS: for some reason, static files in PKB-theme/content/ do render.

What I would do is

  • handle build warnings
  • handle WEB console errors (hou have different on different pages (fe page-1 BibTex)
  • check the generated HTML to identify wanted and as-is
  • be specific with the one problem, ‘on JS files’ ’ ‘as intended’ ‘page not as expected’ won’t help
  • check track down to one issue and where it comes from

mmh, I just updated my clone with your latest changes and it looks like I have a logo, and a favicon

if I change the baseURL = "https://stradichenko.github.io/" viewing on localhost has no logo and no favicon.

mmh, It’s your theme right?Web-App-Manifeste - Progressive Web Apps | MDN

mmh, page-3 is markdown - and you activated the link and mount static to assets so that’s expected to work :wink:


what I see when I build is

  • warnings for omitted raw html whatever
  • console error about content type of some css files.

just for reference here is my setup

hugo v0.147.0-7d0039b86ddd6397816cc3383cb0cfa481b15f32+extended windows/amd64 BuildDate=2025-04-25T15:26:28Z VendorInfo=gohugoio
GOOS="windows"
GOARCH="amd64"
GOVERSION="go1.24.0"
github.com/sass/libsass="3.6.6"
github.com/webmproject/libwebp="v1.3.2"
github.com/sass/dart-sass/protocol="3.1.0"
github.com/sass/dart-sass/compiler="1.83.4"
github.com/sass/dart-sass/implementation="1.83.4"
git clone https://github.com/stradichenko/PKB-theme.git topic-54618-PKB-theme
cd topic-54618-PKB-theme
hugo server --source exampleSite --logLevel debug
Console output
Watching for changes in C:\_repos\github\clone\topic-54618-PKB-theme\{archetypes,assets,content,layouts,static}
Watching for config changes in C:\_repos\github\clone\topic-54618-PKB-theme\exampleSite\hugo.toml, C:\_repos\github\clone\topic-54618-PKB-theme\config\_default, C:\_repos\github\clone\topic-54618-PKB-theme\config\development, C:\_repos\github\clone\topic-54618-PKB-theme\exampleSite\go.mod
Start building sites …
hugo v0.147.0-7d0039b86ddd6397816cc3383cb0cfa481b15f32+extended windows/amd64 BuildDate=2025-04-25T15:26:28Z VendorInfo=gohugoio

INFO  build:  step process substep collect files 28 files_total 28 pages_total 27 resources_total 1 duration 10.2484ms
INFO  build:  step process duration 10.2484ms
INFO  build:  step assemble duration 4.0355ms
WARN  Raw HTML omitted while rendering "C:/_repos/github/clone/topic-54618-PKB-theme/content/posts/post-1.md"; see https://gohugo.io/getting-started/configuration-markup/#rendererunsafe
You can suppress this warning by adding the following to your site configuration:
ignoreLogs = ['warning-goldmark-raw-html']
WARN  Raw HTML omitted while rendering "C:/_repos/github/clone/topic-54618-PKB-theme/content/posts/markdown-boilerplate.md"; see https://gohugo.io/getting-started/configuration-markup/#rendererunsafe
You can suppress this warning by adding the following to your site configuration:
ignoreLogs = ['warning-goldmark-raw-html']
INFO  build:  step render substep pages site en outputFormat html duration 711.3006ms
INFO  build:  step render substep pages site en outputFormat rss duration 172.1338ms
INFO  build:  step render pages 233 content 131 duration 900.9043ms
INFO  build:  step render deferred count 0 duration 0s
INFO  build:  step postProcess duration 0s
INFO  build:  duration 915.7286ms

                   | EN
-------------------+------
  Pages            | 233
  Paginator pages  |   0
  Non-page files   |   1
  Static files     |   0
  Processed images |   0
  Aliases          |   0
  Cleaned          |   0

Built in 921 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/PKB-theme/ (bind address 127.0.0.1)

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.