Deploy on Netlify, it displays differently compared to the local environment and demo site

support
1

I am using the Lotusdocs theme, and for the time being, I have completely replicated the theme’s demo site and deployed it. When I execute hugo server locally and access the local site, everything works fine, and the appearance is identical to the theme’s demo site.

However, after deploying to Netlify, the menu item loading behaves differently from what is expected. On both the theme’s demo site and the local deployment, the menu item seems to load only once, and switching between menu items categories only updates the content on the right side.

On Netlify, it appears that every click results in the entire page being reloaded. Each time I click on the menu item to switch categories, the menu item reloads, causing the page layout to distort.

I am unsure what is causing the discrepancy between the display on Netlify and the local environment.

The theme I am using : colinwilson/lotusdocs

My site: haosend.com

My site: codes GitHub - haosend/haosend-web

demo site: Hugo Official Website – Themes – Category “docs” – Lotusdocs— Demo

For now, the site I have deployed is identical to demo site

Hugo process:

HUGO NEW SITE  ...
#Then copy/paste the relevant folders of the  demo site, including archetypes, assets, content, data, and hugo.toml
hugo mod ...
git init
git submodule themes

hugo.toml

#Partial code; the complete file is available at https://github.com/haosend/haosend-web/blob/master/hugo.toml.

baseURL = "https://haosend.com" # (or set via env variable HUGO_BASEURL)
languageCode = "en-GB"
title = "Lotus Docs | A Hugo Documentation Theme"
# theme = "lotusdocs"
contentDir = "content"
enableEmoji = true
enableGitInfo = true # N.B. .GitInfo does not currently function with submodule content directories

[build]
  noJSConfigInAssets = true

[module]
  # uncomment line below for temporary local development of module
  replacements = "github.com/haosend/lotusdocs -> lotusdocs"
  [module.hugoVersion]
    extended = true
    min = "0.140.0"
  [[module.imports]]
    path = "github.com/haosend/lotusdocs"
    disable = false
  [[module.imports]]
    path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
    disable = false

netlify.toml

[build]
publish = "public"
ignore = "false"
[build.environment]
HUGO_VERSION = "0.145.0"
GO_VERSION = "1.23.0"

As shown in the figure below:
Every time a menu item is clicked, the entire page including the menu reloads. What I expect is that clicking on the left-hand menu should only load the content on the right side. Currently, with each switch of a menu item, the left-hand items reload as well. Since the icons within the items are loading, this causes an instant distortion and layout jitter of the entire page.

Snipaste_2025-03-04_22-10-15
Snipaste_2025-03-04_22-10-15931×819 81 KB

Alternatively, could it be that everything is normal and it’s just that my site’s network speed is slow?

2

It’s caused by the delay of the icon font loading I think. You can fix by adding font-display: block; in the part of the CSS which loads the icon font… e.g.

@font-face {
  font-family: "material-icons";
  font-display: block;
  src: url(".....);
}

Update: I checked the CSS and that appears to be there already… but there’s other things you can do to improve performance such as preloading that icon font.