Theme working on local, but not hosted

My theme is applied fine on local server, but the Netlify hosted version doesn’t style properly.
Same codebase. Theme was installed as a submodule.

Left: Hosted - Right: Local

I think this may have something to do with the “baseurl” setting on my config.tom.
It’s currently set to baseurl="/" and works on local.
I tried changing it to my site’s url “https://linguist-weld-60884.netlify.com/” but still didn’t apply them on deploy.

Using:
Victor Hugo Boilerplate

Thanks

is your theme cloned or submoduled into your local repo? of it’s cloned, it won’t work on Netlify, if it’s submoduled, or hardwired into your folder structure (basically cloned but remove all the .git files/folders from the theme directories), then it ought to work.

I installed the theme as a submodule.

$ git submodule add https://github.com/halogenica/beautifulhugo.git
$ git submodule init
$ git submodule update

thanks.

To clarify, should it work on Netlify with baseurl as “/” or should I set it to my URL?

you only use “/” when you are working locally and you have no references to permalinks anywhere in you theme or site. otherwise, you need to reference the full address with the trailing slash. Also, make sure your build command is correct, since you are using victor hugo, there is more complexity there than there needs to be for a basic site build and deploy. Victor Hugo is good for a more complex asset (images, etc.) pipeline (processing, resizing, compressing, etc.). I use Netlify but I use the basic Hugo build command (with the environmental variable in the netlify site settings set to HUGO_VERSION = 0.25.1 or whatever your version is. But either way, it really should still work, but because of the extra build process, I wouldn’t know where to begin to troubleshoot.

1 Like

Give this a shot. Go to your site settings in Netlify and under the Post Processing Settings, check the “Disable Asset Optimization” checkbox as shown below, and then redeploy.

If this fixes it, try to disable them one by one and see which is causing the issues. It’s likely it could be from CSS or JS optimization.

Once you figure out which one it is, I would go ahead and try to fix the issue so that you can enable the asset optimization again.

This is all based upon checking the box actually solving your issue. If checking the box and redeploying does not solve the issue, the instructions after the image won’t be of any use to you, however I think this could likely be the issue.

Let me know!

1 Like

New finding.
I noticed that even locally, my theme doesn’t apply… until I hit ctrl+s on any site file in my ext editor.
At which point the page reloads itself, and correct css is applied.

Starting my server
site [master] :> npm start

victor-hugo@1.0.0 start /Users/aakash/Documents/workspace/victor-hugo
gulp server
[00:22:28] Requiring external module babel-register
[00:22:32] Using gulpfile ~/Documents/workspace/victor-hugo/gulpfile.babel.js
[00:22:32] Starting ‘hugo’…
[00:22:32] Starting ‘css’…
INFO 2017/07/23 00:22:33 Using config file:
INFO 2017/07/23 00:22:33 using a UnionFS for static directory comprised of:
INFO 2017/07/23 00:22:33 Base: /Users/aakash/Documents/workspace/victor-hugo/site/themes/beautifulhugo/static
INFO 2017/07/23 00:22:33 Overlay: /Users/aakash/Documents/workspace/victor-hugo/site/static/
INFO 2017/07/23 00:22:33 syncing static files to /Users/aakash/Documents/workspace/victor-hugo/dist/
Started building sites …
INFO 2017/07/23 00:22:33 found taxonomies: map[string]string{“tag”:“tags”, “category”:“categories”}
INFO 2017/07/23 00:22:33 Alias “/tags/hugo/page/1/index.html” translated to "tags/hugo/page/1/index.html"
INFO 2017/07/23 00:22:33 Alias “/page/1/index.html” translated to "page/1/index.html"
INFO 2017/07/23 00:22:33 Alias “/tags/netlify/page/1/index.html” translated to "tags/netlify/page/1/index.html"
INFO 2017/07/23 00:22:33 Alias “/post/page/1/index.html” translated to "post/page/1/index.html"
Built site for language en:
0 draft content
0 future content
0 expired content
1 regular pages created
12 other pages created
0 non-page files copied
4 paginator pages created
2 tags created
0 categories created
total in 59 ms
[00:22:34] Starting ‘js’…
[00:22:34] Finished ‘hugo’ after 1.94 s
[00:22:35] Finished ‘css’ after 2.27 s
[00:22:35] [webpack] Hash: 9ed7bfd9bde7e1bdbf38
Version: webpack 2.7.0
Time: 464ms
Asset Size Chunks Chunk Names
app.js 2.82 kB 0 [emitted] app
chunk {0} app.js (app) 73 bytes [entry] [rendered]
[0] ./src/js/app.js 45 bytes {0} [built]
[1] multi ./js/app 28 bytes {0} [built]
[00:22:35] Finished ‘js’ after 743 ms
[00:22:35] Starting ‘server’…
[00:22:35] Finished ‘server’ after 97 ms
[Browsersync] Access URLs:
Local: http://localhost:3000
External: http://192.168.0.105:3000
UI: http://localhost:3001
UI External: http://192.168.0.105:3001
[Browsersync] Serving files from: ./dist

At this point theme css is not applied.
I notice that my main.css file doesn’t contain the theme’s css, until…
I hit save on my text editor, no changes made.

[00:22:44] Starting ‘hugo’…
INFO 2017/07/23 00:22:44 Using config file:
INFO 2017/07/23 00:22:44 using a UnionFS for static directory comprised of:
INFO 2017/07/23 00:22:44 Base: /Users/aakash/Documents/workspace/victor-hugo/site/themes/beautifulhugo/static
INFO 2017/07/23 00:22:44 Overlay: /Users/aakash/Documents/workspace/victor-hugo/site/static/
INFO 2017/07/23 00:22:44 syncing static files to /Users/aakash/Documents/workspace/victor-hugo/dist/
Started building sites …
INFO 2017/07/23 00:22:45 found taxonomies: map[string]string{“tag”:“tags”, “category”:“categories”}
INFO 2017/07/23 00:22:45 Alias “/tags/hugo/page/1/index.html” translated to "tags/hugo/page/1/index.html"
INFO 2017/07/23 00:22:45 Alias “/page/1/index.html” translated to "page/1/index.html"
INFO 2017/07/23 00:22:45 Alias “/post/page/1/index.html” translated to "post/page/1/index.html"
INFO 2017/07/23 00:22:45 Alias “/tags/netlify/page/1/index.html” translated to "tags/netlify/page/1/index.html"
Built site for language en:
0 draft content
0 future content
0 expired content
1 regular pages created
12 other pages created
0 non-page files copied
4 paginator pages created
2 tags created
0 categories created
total in 22 ms
[Browsersync] Reloading Browsers…
[00:22:45] Finished ‘hugo’ after 365 ms

And now my main.css has the theme’s css.

Any clue why this would be happening?
Any other info/debug I could provide?

Thanks @gaetawoo & @RHEV

I’m seeing the same as above!

Do you have to be using Victor Hugo?? it seems like this is your first site… I highly suggest starting with basic Hugo, not Victor Hugo. I say wipe the directory clean, and start fresh using tutorials on the docs site (quick start) or on the digital ocean site (search digital ocean hugo) or forestry hugo getting started

2 Likes

Or be sure to post an issue in the Victor Hugo repo on Netlify’s GitHub. From what I know of the project, it’s set up with Webpack to allow for a simple NPM start to get everything up and running. If you’re having trouble with livereload or themes being applied, I am sure they would love to know.

Thanks @gaetawoo & @rdwatters
Everything’s working now.
Same setup, without the Victor-Hugo boilerplate

2 Likes

That’s great news! Glad it worked out!