Netlify deploy render issues

[jollydodo]

Hey,

Sorry to bother again, but I'm running into some small issues on the final deployment. When I deploy the site to Netlify, my layout gets all messed up. I tried the steps from #1121 i.e. create a local build of Hugo_stats.json and upload this to gitlab. However, this does not seem to be the problem in my case. The website works fine in my local environment. I created a new public repo for testing purposes and when I clone this into a new directory and run 'npm install', it also works fine locally. However, on deployment some thing go wrong. I don't get any errors in the console. Any help is very much appreciated :)

deployment url:
deployment url

public repo:
repo

[h-enk]

Can't clone your repo (it contains staged changes).

I noticed the public directory in your repository. It's a build result that you should not add — see .gitignore. Uploading the resource folder is smart when you have a lot of images — see Image processing performance consideration.

Could you try again by leaving out public and resources, and fix the repo?

[h-enk]

And could you try with commenting out this line: https://gitlab.com/fablabarnhem/doks-debug-test/-/blob/main/config/postcss.config.js?ref_type=heads#L47

[jollydodo]

Thank you so much for all the help! I commented out that line, changed the .gitignore file and untracked the public and resources folder and committed everything. The working tree should be clean now (nothing staged). Unfortunately it didn't fix the issue, but I hope this makes debugging a little bit easier.

[h-enk]

There's still something off with your repo. When I do a git clone, I get an empty repo. I did a git restore --source=HEAD :/, but when I then do a git status, I get a lot of "Changes to be committed" and "Untracked files".

I tried a few things, but I got inconsistent/non-reproducable behavior — so, that does not help. Please first fix your repo.

[jollydodo]

Apologies, I tried to fix some things at my work, but I use windows there and I then got a bunch of errors relating to the cover.webp files, because ** is not supported on windows in file names, which means that you can't clone this repository through windows. I created those header files before the documentation was fixed to only now realise that ** is off course not needed in the filename and only part of the Go code (😂). However, I think I now fixed it on my Mac. I pushed a new commit and when I run 'git status', it says that my repo is up to date and working tree is clean. I could also clone it to another folder without any problems. I'm sorry for the confusion.

[h-enk]

OK. What I did, I suspected a PurgCSS issue, so I updated config/postcss.config.js to:

const autoprefixer = require('autoprefixer');
const purgecss = require('@fullhuman/postcss-purgecss');
const whitelister = require('purgecss-whitelister');

module.exports = {
  plugins: [
    autoprefixer(),
  ],
}

Next I ran (using WSL):

1. rm -rf hugo_stats.json
2. npm run clean:build && npm run build -- --baseURL=/ && npm run preview

Result: Better, but still wonky.

Next I dropped the --minify flag in the build script of package.json:

"build": "exec-bin node_modules/.bin/hugo/hugo --cleanDestinationDir",

And, ran again:

1. rm -rf hugo_stats.json
2. npm run clean:build && npm run build -- --baseURL=/ && npm run preview

Now, it's looking good — we're getting somewhere / to be continued

[jollydodo]

Wow thanks for all the effort! I wouldn't have figured that out so far. I hope it's something simple that can be fixed (since we're so close to deploying the site. All the templates are finished, so it's only the finishing touches. )

[jollydodo]

Thank you for the short term fix.I now managed to deploy the website on netlify. However, i'm trying to debug if it's something specific in my custom css that goes wrong since getting rid of purgecss is not great for performance. I'll keep you updated.

[jollydodo]

Finally found some time to debug this and with your help I managed to find out where the problem was. I created a custom header partial. However I used some bootstrap classes to align my svg and that seemed to mess up purgecss (flex). Fixed that with a more old school approach and everything is working now.