Results are different: Local Render v.s. Generated

[jcguu95]

I am completely new to Hugo and decided to give it a shot. I followed the following procedures to set-up a webpage with Hugo, minimal-theme, and GitPage. However, the final result is not right: some format becomes funny and the color is not right ..etc. Oddly enough, the local rendering hugo server -w does give the right result. I wonder if I have missed something or not. Please let me know if I could be clearer. Anyway, here it goes:

Results

Procedures I followed

cd ~
mkdir website-local
cd website-local
hugo new site .

echo "# website-global" >> README.md
echo "public/" >> .gitignore
git init
git add .
git commit -m "first commit"

# Get a theme from https://themes.gohugo.io/
git submodule add https://github.com/calintat/minimal.git themes/minimal
git submodule init
git submodule update

# Then manually replace `config.toml` by that in the theme package.

# We can now host it locally by running `$ hugo server -w` Read the
# message and go to the indicated local url. It should be rendered
# fine.

hugo new post/hello.md
cd content/post/
vim hello.md

# Manually change "draft: true" to "draft: false" for publishing and
# add content.

cd ../..
hugo -d . # this will generate the site
git add .
git commit -m "generated!"

# Then manually create a repo "website-global" in github and get its url.
git remote add origin https://github.com/jcguu95/website-global.git
git push origin master # Enter username and password

# Go to setting of the repo and change to master-branch for github page.

Note that this does not seem to be a problem with GithubPage. When I open the generated index.html, I got funny format and colors too.

[alexandregv]

Just had the same problem, investigated a bit. I found that the problem occurs since commit https://github.com/calintat/minimal/commit/c151a10dcf2f09c36580c250c814b59d99a66aaa. I then saw that someone commented on this commit about the same problem we are having (https://github.com/calintat/minimal/commit/c151a10dcf2f09c36580c250c814b59d99a66aaa#commitcomment-26113785).

In my case, the css was broken because of the wrong baseURL beeing used in the <link rel="stylesheet"> tag (localhost:1313 instead of http://domain.com). I had to add the --baseURL "http://domain.com" flag to hugo server command. Note that hugo server doesn't handle SSL, using hugo server and an https baseURL would also results in this problem.

Maybe your baseURL is wrong in config.toml ?

If you really can't fix it, you still have the solution of editing layouts/partials/css.html to reverse https://github.com/calintat/minimal/commit/c151a10dcf2f09c36580c250c814b59d99a66aaa.

Hope this can help you or anyone having the same issue.

[skoblenick]

If you have an existing ./static/css/main.css it will also cause this issue. By this file existing it overrides the theme's main.css.

If you need custom styles add another file, something like ./static/css/custom.css. Then you can override the partial head-close.html to add the custom stylesheet.

[meerasndr]

I had this same problem on Netlify. Changing the base url in config.toml to point to my deployed site url fixed it.