Docsy theme not rendering using GitHub Pages

Hello Hugo Community,

I’m switching from Jekyll to Hugo as my static site generator so that I can use the Docsy Hugo theme.

My config.toml build parameters are

theme = [“docsy”]
themesDir = “themes”
#publishDir builds hugo to the docs folder (instead of the default public) necessary to use Github Pages to serve the Project
publishDir = “docs”

After building using hugo and uploading the docs directory, when I look at the Github Page,
The Docsy theme does not render instead I get stripped down html - see image below.

Any ideas?
Thank you in advance,

The main CSS can’t be found, cuz it’s on https://[USERNAME].github.io/softwarehardening-hugo-docsy/scss/[CSS FILE], instead of the expected (by the HTML files) https://[USERNAME].github.io/scss/[CSS FILE].

Have you tried to change your baseURL?

Thank you @sephore - this was the insight I needed. I am capturing my solution for others -

After reading your post found the Hugo - Configuration Directory article that explained how to setup separate configurations for my local environment and for GithubProjectPage builds.

I created the config/_default and moved config.toml from root into config/_default. Then created config/GithubProjectPage/config.toml that contains only
baseuURL = "/softwarehardening-hugo-docsy".
softwarehardening-hugo-docsy is the name of the Github repo - so setting baseURL to the name of the Github repo fixed the problem.

Setting up the config directory enables hugo serve to continue working locally.
When I build for the GithubProjectPage environment using
hugo --environment GithubProjectPage, the Github page renders ok too.

config
├── GithubProjectPage
│   └── config.toml  #baseURL = "/your-github-repo-name-here"
└── _default
    └── config.toml  #baseURL = "/"
1 Like

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