Some content and media does not show up on live after deploy

[albafox]

Netlify site name: goofy-mclean-3dca53.netlify.app
GitHub repo: GitHub - albafox/sauna-fr-hugo-netlify: sauna-fr-hugo-netlify

Hello everyone! I have Hugo + Netlify CMS project. I’m new to netlify and hugo and wondering why some content and images does not apear on live after deploy, but everything works fine on my local server.

Btw i’ve got all content present in admin dashboard on live site too and it appears in repo files.

Here is build log:
8:06:53 PM: Waiting for other deploys from your team to complete
8:08:56 PM: Build ready to start
8:08:58 PM: build-image version: 53b83b6bede2920f236b25b6f5a95334320dc849
8:08:58 PM: build-image tag: v3.6.0
8:08:58 PM: buildbot version: 8ae026ef4905d9174e416775c6b64aa19950569b
8:08:58 PM: Fetching cached dependencies
8:08:58 PM: Starting to download cache of 148.3MB
8:08:59 PM: Finished downloading cache in 1.302380487s
8:08:59 PM: Starting to extract cache
8:09:02 PM: Finished extracting cache in 3.03467039s
8:09:02 PM: Finished fetching cache in 4.403453846s
8:09:02 PM: Starting to prepare the repo for build
8:09:03 PM: Preparing Git Reference refs/heads/master
8:09:06 PM: Starting build script
8:09:07 PM: Installing dependencies
8:09:07 PM: Python version set to 2.7
8:09:07 PM: Started restoring cached node version
8:09:10 PM: Finished restoring cached node version
8:09:11 PM: v12.18.0 is already installed.
8:09:11 PM: Now using node v12.18.0 (npm v6.14.4)
8:09:11 PM: Started restoring cached build plugins
8:09:11 PM: Finished restoring cached build plugins
8:09:12 PM: Attempting ruby version 2.7.1, read from environment
8:09:13 PM: Using ruby version 2.7.1
8:09:13 PM: Using PHP version 5.6
8:09:13 PM: Started restoring cached go cache
8:09:13 PM: Finished restoring cached go cache
8:09:13 PM: go version go1.14.4 linux/amd64
8:09:13 PM: go version go1.14.4 linux/amd64
8:09:13 PM: Installing missing commands
8:09:13 PM: Verify run directory
8:09:15 PM: ​
8:09:15 PM: ────────────────────────────────────────────────────────────────
8:09:15 PM: Netlify Build
8:09:15 PM: ────────────────────────────────────────────────────────────────
8:09:15 PM: ​
8:09:15 PM: ❯ Version
8:09:15 PM: @netlify/build 8.0.0
8:09:15 PM: ​
8:09:15 PM: ❯ Flags
8:09:15 PM: deployId: 5ff0b63d824a450008f724b7
8:09:15 PM: mode: buildbot
8:09:15 PM: ​
8:09:15 PM: ❯ Current directory
8:09:15 PM: /opt/build/repo
8:09:15 PM: ​
8:09:15 PM: ❯ Config file
8:09:15 PM: No config file was defined: using default values.
8:09:15 PM: ​
8:09:15 PM: ❯ Context
8:09:15 PM: production
8:09:15 PM: ​
8:09:15 PM: ────────────────────────────────────────────────────────────────
8:09:15 PM: 1. Build command from Netlify app
8:09:15 PM: ────────────────────────────────────────────────────────────────
8:09:15 PM: ​
8:09:15 PM: $ hugo
8:09:16 PM: Building sites …
8:09:16 PM: | EN
8:09:16 PM: ±-----------------±—+
8:09:16 PM: Pages | 4
8:09:16 PM: Paginator pages | 0
8:09:16 PM: Non-page files | 0
8:09:16 PM: Static files | 66
8:09:16 PM: Processed images | 0
8:09:16 PM: Aliases | 0
8:09:16 PM: Sitemaps | 1
8:09:16 PM: Cleaned | 0
8:09:16 PM: Total in 132 ms
8:09:16 PM: ​
8:09:16 PM: (build.command completed in 208ms)
8:09:16 PM: ​
8:09:16 PM: ────────────────────────────────────────────────────────────────
8:09:16 PM: Netlify Build Complete
8:09:16 PM: ────────────────────────────────────────────────────────────────
8:09:16 PM: ​
8:09:16 PM: (Netlify Build completed in 273ms)
8:09:16 PM: Caching artifacts
8:09:16 PM: Started saving build plugins
8:09:16 PM: Finished saving build plugins
8:09:16 PM: Started saving pip cache
8:09:16 PM: Finished saving pip cache
8:09:16 PM: Started saving emacs cask dependencies
8:09:16 PM: Finished saving emacs cask dependencies
8:09:16 PM: Started saving maven dependencies
8:09:16 PM: Finished saving maven dependencies
8:09:16 PM: Started saving boot dependencies
8:09:16 PM: Finished saving boot dependencies
8:09:16 PM: Started saving rust rustup cache
8:09:16 PM: Finished saving rust rustup cache
8:09:16 PM: Started saving rust cargo bin cache
8:09:16 PM: Finished saving rust cargo bin cache
8:09:16 PM: Started saving go dependencies
8:09:16 PM: Finished saving go dependencies
8:09:16 PM: Build script success
8:09:16 PM: Starting to deploy site from ‘public’
8:09:16 PM: Creating deploy tree
8:09:16 PM: Creating deploy upload records
8:09:16 PM: 0 new files to upload
8:09:16 PM: 0 new functions to upload
8:09:16 PM: Starting post processing
8:09:16 PM: Post processing - HTML
8:09:16 PM: Post processing - header rules
8:09:16 PM: Post processing - redirect rules
8:09:16 PM: Post processing done
8:09:16 PM: Site is live
8:09:36 PM: Finished processing build request in 37.872100678s

[hrishikesh]

Do you have an example of what stuff doesn’t load exactly? For example, if you’re referring to the image on the home page:

As you can see the HTML is malformed, the img src turns out to be undefined.

[kylesloper]

Can you just clarify what exactly is missing. You tagged “widgets-netlify-cms” so are you talking about content in the CMS or other pages.

As you can see from the screenshots below, the text doesn’t show because it has a class of “white-font” which makes it white. And as @hrishikesh said the image does not include an src.

[albafox]

Yeap, that’s exactly what I’m trying to find out. As on my localhost i see all the images, but for some reason on live site in some cases it shows (undefined) instead of an url to image. And I’ve checked if the image exists on server, so no problem on this side. But the problem is not connected only to images, some text content does not show too.

[albafox]

Actually there should be a background image which should work with white font, so no struggle with white font issue, instead of image url I’ve got empy url field, that’s the issue.

[kylesloper]

Sorry for the late reply.

It would be useful to have a list of elements that show in localhost but not after build.

You mention that the elements show in localhost, if you are using netlify-cli then it would be helpful to know if they appear in a live site.

This is done with this command.

ntl dev --live

[albafox]

This is what I see on localhost.

And after this command you’ve listed “ntl dev --live” i get the same result as I get always on localhost using “hugo server” command.

[hrishikesh]

This really seems strange and should not happen. I’ll check your repo in some time and post accordingly.

[albafox]

In first attempt I had some errors and after that I’ve updated simething and run this code again and got this link live: https://goofy-mclean-3dca53-5205bc.netlify.live/ and it work same as localhost

Could you explain what is the diference between this live site and one that I have in netlify dashboard?

[hrishikesh]

@albafox, I just checked your repo and your website is building fine locally but not on Netlify. I can confirm that the problem does exist. I’m checking the cause.

[hrishikesh]

I have possibly found a solution. Here’s what you need to do:

You can override the theme’s files by creating a file with the same name at the same path in your layouts folder. So, create the following files (or edit those files in your theme’s folder): layouts/index.html and layouts/advantages.html. Keep the rest of the index.html same, but make the following change:

From: {{ partial "advantages" .Params.advantages }}
To: {{ partial "advantages" . }}

And in your advantages.html file, keeping the rest of the content same, change all {{.*}} to {{.Params.advantages.*}}. For example, change {{.bgImage}} to {{.Params.advantages.bgImage}}. This should fix the Advantages section. I haven’t tried for other stuff, but I guess the same logic could apply there too. Let us know how it goes.

[albafox]

Thanks for advice, will definetly test this and repy here if that helped me! Thanks a lot for such quick answer and getting into my issue!

[albafox]

It works like you described. But why?

And thanks a lot btw!

[kylesloper]

This live site is actually live. It updates automatically when you save in the code editor.

My theory was that it might render differently and it would be interesting to see if the problem persisted in a live site compared to localhost and a deployed site.

[hrishikesh]

It’s how Hugo’s context works. Previously the code was calling the partial named advantages but was passing only the context of .Params.advantages. Thus, all the child fileds of this frontmatter variable were directly accessible with their name, like .bgImage.

However instead of just sending .Params.advantages as a context, now we send the entire page as a context by using .. Thus, the variables like .bgImage had to be replaced with .Params.advantages.bgImage.

That being said, I don’t really know why it was working locally and not on Netlify. But my guess would be due to a difference in version.

[albafox]

Yeap, I got how it works, but don’t know why it does not work as it described in docs))) Btw overall I’ve managed to get this fully working now. Thank you!

[MavDavis]

I’m having this same issue with two of my projects. One was with vite + vue and the other is just pure vue. link to the live sites are: https://mavs-store.netlify.app/

link to repo: GitHub - MavDavis/mavs-store: This is project built with Vue and firebase. A full e commerce website in progress.
link to live page 2:https://frontmentor-vue-restapi.netlify.app/
github repo:GitHub - MavDavis/vue-rest-countriesApi: A small vue project by frontmentor aimed at improving my vue skills.
local machine view:

[MavDavis]

The Mavs-store app warned about size minification, not sure if that’s the issue.

[coelmay]

Hey @MavDavis

I cloned the vue-rest-countriesApi repository, and see the same issue locally as the site you have deployed. This suggests it is not Netlify-specific.

[MavDavis]

But it works locally, Lemme check this.