CSS or JavaScript in Hugo not Rendering when Preview Deploy on Netlify
When you make changes in your Hugo website either that is template changes or create new content, of course, you want to see the preview before going to publish.
Netlify has feature to see your preview website before publishing, you can get the link of your preview website after you successfully deploy your website to Netlify, like this:
If you click the link preview deploy, you will be redirected to the preview site that automatically generated by Netlify. The link will be like: https://5eb160f537052400067fc948–budi.netlify.app/
See the example my preview site above, It looks like some CSS file not rendering correctly, but when I publish my deployed site, the CSS is rendering correctly. So, what’s the problem?
After I debug my codes and doing trying errors for a few times, I got the problem. The problem is about to generate a URL in Hugo template.
Here’s the code to get and genate resource some SCSS file in Hugo.
{{ $custom := resources.Get "scss/custom.scss" | resources.ExecuteAsTemplate "css/custom.css" . | toCSS | minify | fingerprint -}}
<link rel="stylesheet" href="{{ $custom.Permalink | absURL }}" {{ printf "integrity=%q" $custom.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous">The absURL(absolute URL) will generate url with format: baseURL+url, example like: https://budidev.com/css/custom.css.
That’s why the CSS not rendering correctly because the baseURL of preview site is not the same with baseURL that configure in config.toml file.
So, instead using absURL, change this to relURL(relative URL), it’s will generate url with format /+url, example like: /css/custom.css
Here’s the code after changed:
{{ $custom := resources.Get "scss/custom.scss" | resources.ExecuteAsTemplate "css/custom.css" . | toCSS | minify | fingerprint -}}
<link rel="stylesheet" href="{{ $custom.Permalink | relURL }}" {{ printf "integrity=%q" $custom.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous">Then if everything going well, the preview site should looks good now.
You can try the same thing when failed to generate some JavaScript file, for example:
Before edited:
{{ $myTypeit := resources.Get "js/my-typeit.js" | resources.ExecuteAsTemplate "js/my-typeit.js" . | minify | fingerprint -}}
<script src="{{ $myTypeit.Permalink }}" {{ printf "integrity=%q" $myTypeit.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>After edited:
{{ $myTypeit := resources.Get "js/my-typeit.js" | minify | fingerprint -}}
<script src="{{ $myTypeit.Permalink | relURL }}" {{ printf "integrity=%q" $myTypeit.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>