Changed theme; works on localhost, not on production

support
1

Hi, I seem to be having a very common issue after changing the theme for my site - works fine on localhost; but doesn’t work when deployed by Netlify. My repo is here.

I am trying to use the hugo-coder theme. I added it using git submodule and copied the ./themes/hugo-coder/layouts directory to ./layouts (using . as the root of my repo.)

The site loads fine locally but doesn’t work when deployed by Netlify. I tried few things like:

  • setting relativeURLs to true
  • Moved config.toml to config.toml.bkp and copied the config.toml from the theme’s exampleSite directory.

I have been suggested to try deploying the site to GitHub pages and then use Netlify redirect to use the xyz.github.io page, but am not really inclined to add one more layer. I’d really like to get this sorted by building on top of Netlfiy.

I don’t see any obvious issues in the Netlify build logs either:

6:29:22 PM: Build ready to start
6:29:23 PM: build-image version: 8925038cf853b22d6397cdcb9904ac88b66bb383 (focal)
6:29:23 PM: build-image tag: v4.5.0
6:29:23 PM: buildbot version: 8b4b13a586b9f817ab478c0c44a476554bc16a2f
6:29:23 PM: Building without cache
6:29:23 PM: Starting to prepare the repo for build
6:29:24 PM: No cached dependencies found. Cloning fresh repo
6:29:24 PM: git clone git@github.com:dharmit/dharmitshah
6:29:25 PM: Preparing Git Reference refs/heads/master
6:29:27 PM: Parsing package.json dependencies
6:29:28 PM: Starting build script
6:29:28 PM: Installing dependencies
6:29:28 PM: Python version set to 2.7
6:29:29 PM: Downloading and installing node v8.17.0...
6:29:29 PM: Downloading https://nodejs.org/dist/v8.17.0/node-v8.17.0-linux-x64.tar.xz...
6:29:29 PM: Computing checksum with sha256sum
6:29:29 PM: Checksums matched!
6:29:31 PM: Now using node v8.17.0 (npm v6.13.4)
6:29:31 PM: Started restoring cached build plugins
6:29:31 PM: Finished restoring cached build plugins
6:29:31 PM: Attempting ruby version 2.7.2, read from environment
6:29:32 PM: Using ruby version 2.7.2
6:29:32 PM: Using PHP version 8.0
6:29:32 PM: Installing Hugo 0.80.0
6:29:34 PM: Hugo Static Site Generator v0.80.0-792EF0F4/extended linux/amd64 BuildDate: 2020-12-31T13:46:18Z
6:29:34 PM: Started restoring cached go cache
6:29:34 PM: Finished restoring cached go cache
6:29:34 PM: Installing Go version 1.12
6:29:38 PM: unset GOOS;
6:29:38 PM: unset GOARCH;
6:29:38 PM: export GOROOT='/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64';
6:29:38 PM: export PATH="/opt/buildhome/.gimme_cache/versions/go1.12.linux.amd64/bin:${PATH}";
6:29:38 PM: go version >&2;
6:29:38 PM: export GIMME_ENV="/opt/buildhome/.gimme_cache/env/go1.12.linux.amd64.env"
6:29:38 PM: go version go1.12 linux/amd64
6:29:38 PM: Installing missing commands
6:29:38 PM: Verify run directory
6:29:39 PM: ​
6:29:39 PM: ────────────────────────────────────────────────────────────────
6:29:39 PM:   Netlify Build                                                 
6:29:39 PM: ────────────────────────────────────────────────────────────────
6:29:39 PM: ​
6:29:39 PM: ❯ Version
6:29:39 PM:   @netlify/build 18.22.0
6:29:39 PM: ​
6:29:39 PM: ❯ Flags
6:29:39 PM:   baseRelDir: false
6:29:39 PM:   buildId: 619259aaac6c772fc3c14ffb
6:29:39 PM:   deployId: 619259aaac6c772fc3c14ffd
6:29:39 PM: ​
6:29:39 PM: ❯ Current directory
6:29:39 PM:   /opt/build/repo
6:29:39 PM: ​
6:29:39 PM: ❯ Config file
6:29:39 PM:   /opt/build/repo/netlify.toml
6:29:39 PM: ​
6:29:39 PM: ❯ Context
6:29:39 PM:   production
6:29:39 PM: ​
6:29:39 PM: ────────────────────────────────────────────────────────────────
6:29:39 PM:   1. Build command from Netlify app                             
6:29:39 PM: ────────────────────────────────────────────────────────────────
6:29:39 PM: ​
6:29:39 PM: $ hugo --log --verbose
6:29:39 PM: Start building sites …
6:29:40 PM:                    | EN
6:29:40 PM: -------------------+------
6:29:40 PM:   Pages            | 101
6:29:40 PM:   Paginator pages  |   1
6:29:40 PM:   Non-page files   |   0
6:29:40 PM:   Static files     |  15
6:29:40 PM:   Processed images |   0
6:29:40 PM:   Aliases          |  28
6:29:40 PM:   Sitemaps         |   1
6:29:40 PM:   Cleaned          |   0
6:29:40 PM: Total in 421 ms
6:29:40 PM: ​
6:29:40 PM: (build.command completed in 539ms)
6:29:40 PM: ​
6:29:40 PM: ────────────────────────────────────────────────────────────────
6:29:40 PM:   2. Deploy site                                                
6:29:40 PM: ────────────────────────────────────────────────────────────────
6:29:40 PM: ​
6:29:40 PM: Starting to deploy site from 'public'
6:29:40 PM: Creating deploy upload records
6:29:40 PM: Creating deploy tree 
6:29:40 PM: 0 new files to upload
6:29:40 PM: 0 new functions to upload
6:29:40 PM: Site deploy was successfully initiated
6:29:40 PM: ​
6:29:40 PM: (Deploy site completed in 145ms)
6:29:40 PM: ​
6:29:40 PM: ────────────────────────────────────────────────────────────────
6:29:40 PM:   Netlify Build Complete                                        
6:29:40 PM: ────────────────────────────────────────────────────────────────
6:29:40 PM: ​
6:29:40 PM: (Netlify Build completed in 717ms)
6:29:40 PM: Starting post processing
6:29:40 PM: Post processing - HTML
6:29:40 PM: Caching artifacts
6:29:40 PM: Started saving build plugins
6:29:40 PM: Finished saving build plugins
6:29:40 PM: Started saving pip cache
6:29:40 PM: Finished saving pip cache
6:29:40 PM: Started saving emacs cask dependencies
6:29:40 PM: Finished saving emacs cask dependencies
6:29:40 PM: Started saving maven dependencies
6:29:40 PM: Finished saving maven dependencies
6:29:40 PM: Started saving boot dependencies
6:29:40 PM: Finished saving boot dependencies
6:29:40 PM: Started saving rust rustup cache
6:29:40 PM: Finished saving rust rustup cache
6:29:41 PM: Started saving go dependencies
6:29:41 PM: Post processing - header rules
6:29:41 PM: Post processing - redirect rules
6:29:41 PM: Post processing done
6:29:41 PM: Site is live ✨
6:29:42 PM: Finished saving go dependencies
6:29:44 PM: Build script success
6:30:21 PM: Finished processing build request in 57.637084767s

What am I doing wrong?

2

“Doesn’t work” is not a description of a problem that will lead to anybody being able to help you. What is not working?

From my experience, most times someone uses that phrase the website on Netlify does not look like it looks on the local development server. Which is a problem in relation to your baseURL setup. With browser console and error messages in there you might see a “404 not found” for the stylesheet.

Your log file says that the site was compiled properly and 101 pages were created, so that is not “not working” but “working according to your setup”.

3

My bad. By “not working” I mean that the site doesn’t render properly when deployed by Netlify, whereas on localhost it renders just fine.

I didn’t make any changes to baseURL configuration, but that’s the number 1 thing I am reading across the Web for this problem. I think the baseURL setting is good at my side.

The developer tools is showing 404 while trying to load below two files:

  • images/apple-touch-icon.png
  • images/favicon-16x16.png

I see 404 for these on localhost as well (in Firefox Private Window), but that doesn’t stop it from rendering correctly locally.

4

If the developer tools don’t show any CSS files as 404 then you will have to show us some code to re-create the issue. You say it doesn’t render properly, so I am still thinking something CSS-wise is wrong. I wonder how the CSS is linked (absolute path, relative path). Best would probably be linking your repository or the netlify-website.

5

Are you sure your submodules in the theme directory are loaded properly on Netlify?

6

I don’t have a reason to doubt, but I’m not a hugo expert. What do you recommend I check to be sure that submodule is loaded correctly? I loaded it by following the instructions on the theme’s GitHub page. And then, as suggested in this guide, I checked out a tag (in this case, the v1.1 tag), but that didn’t help.

7

image
image1352×682 147 KB

1 Like
8

Thanks for sharing this image.

I don’t think I need to explicitly admit/mention that my understanding of frontend tools is awful.

But I searched the Web for the error and stumbled upon this Stack Overflow answer among other things. I did what the OP did there, and it did the trick for me.

I’m not sure if it’s a good or bad idea to set integrity="" and would like to know about it. But removing it helped render things just fine.

EDIT: The 404s for images/apple-touch-icon.png and images/favicon-16x16.png are still there, but it’s not blocking rendering. Please let me know if you have any suggestions on fixing that part.

9

You might want to read up on content security policy, often simply CSP. The role of integrity etc should be clearer after that.

1 Like
10

Although I managed to address the issue by doing integrity="", I revisited this recently since it wasn’t a good approach.

I undid the integrity="" change. Then on the Netlify side, I unchecked Bundle CSS in the “Asset Optimization” section. Now it looks like below:

image
image912×594 49.4 KB

Completely disabling asset optimization also worked, but then I enabled the rest till I saw the issue again when Bundle CSS was enabled.

Hopefully, I’m not diverging from any of the best practices anymore.