Hugo not generating the same styling as in development mode

Question

This is my first time I'm trying to generate a static website.

Everything works fine in development mode with hugo server command. The styling is great, but when I'm trying to generate the final static files with hugo command the theme seems not to be applied properly and I don't understand why.

I've tried two themes (what's in the quickstart and another one) but I get similar results with both.

These are the commands what I've entered into console in the later case:

hugo new site testsite
cd testsite
cd themes
git clone https://github.com/cowboysmall-tools/hugo-devresume-theme.git
cd ..
cp themes/hugo-devresume-theme/exampleSite/config.toml .

hugo server
# styling seems to work

hugo
# the opened public/index.html is broken

Can anyone tell me what am I doing wrong?

I've followed these tutorials:

quick-start

hugo-devresume-theme

UPDATE

after checking the errors in chrome console I can see values like this:

<link href="/dist/css/app.1cb140d8ba31d5b2f1114537dd04802a.css" rel="stylesheet">

if I delete the / from the beginning of /dist/css/app.1cb140d8ba31d5b2f1114537dd04802a.css the style seems to be applied correctly.

Obviously I don't want to do this every time manually. Is there any solution for this in configuration?

score 7 · Answer 1 · answered Jun 01 '20 at 05:55

7

Meanwhile I've figured out that the problem originates from this setting in config.toml:

baseURL = "mywebsite.com"
#...

Instead of the above setting I've tried this one and it seems to work now properly:

baseURL = ""
relativeURLs = "True"
#...

answered Jun 01 '20 at 05:55

elaspog

1,635
3
21
51

Setting `relativeURLs = "True"` is key. Especially if you added your own javascript/css files to the theme. – Antoine Dahan Jul 03 '21 at 17:35
This works. Thanks man. You saved hours of my life. – Said Çankıran Mar 13 '23 at 20:35
Worked great. Thankyou so much. – Raghu Aug 05 '23 at 03:51

score 1 · Answer 2 · answered Jun 06 '20 at 12:48

Once you set the baseurl in your theme config.toml there is no need to change it.

You probably figured out that hugo and hugo server are two different commands

hugo server is for when you are developing your site and viewing it locally
hugo you only run this when you are ready to deploy your finished site ... then copy all the files from the public/ folder to your website.

It's not intended for you to browse public/ folder from your local machine. Just use hugo server.

score 0 · Answer 3 · edited Sep 03 '21 at 15:09

Running hugo may not rewrite your css directory. If you want to ensure that it does, instead of running hugo in the command line, make a quick bash script that first deletes the css directory, and subsequently calls hugo to rewrite the files in that directory. Here is something I wrote which should work. I store this file in my /scripts directory.

#!/usr/bin/env bash
SCRIPTPATH="$( cd "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
cd "$SCRIPTPATH"/../docs/css/
rm home.min.css
rm page.min.css
cd "$SCRIPTPATH"/../
hugo

Then when I want to rebuild my hugo site, I run this script. I just call it hugo.sh.

Hugo not generating the same styling as in development mode

UPDATE

3 Answers3