CSS not built for the domain url but worked for deployment address with version prefix

[zhouqiaohui]

Hi, I am new to the community and am trying to build my personal webpage by hosting it on the Cloudflare webserver. I am currently on the free version and my domine is https://personalwebpage-dfd.pages.dev/

The only possibly relevant question is but I think this person has its own paid domain while mine is still the free version. https://discourse.gohugo.io/t/semi-ot-hugo-site-theme-not-served-on-cloudflare-pages/31930

I am using hugo as my static site generator and want to host the page on Cloudflare. In the build configuration, I have configurated the setting following the guidance:

Build command : hugo -b $CF_PAGES_URL
Build output directory : /public
Root directory: /

The deployment is successful, and I am able to view the webpage with full CSS if I am using the URL with prefix

e.g. : https://3deb2073.personalwebpage-dfd.pages.dev/
This is the URL generated from the last deployment when the post is written.

Yet if I were opening the site using the domain all the CSS settings are gone.

To try to investigate the problem I have :

1. I used the build command hugo at first then none of addresses have CSS applied, that’s why I switched to hugo -b $CF_PAGES_URL at first place
2. I tried to investigate whether the browser was cached with the first deployment version when the CSS wasn’t applied but it’s not a browser cache problem
3. I tired to change the $CF_PAGES_URL to the address of the domain but then even the deployment with version prefix won’t have CSS

This is the first time I have tried to host my personal webpage online so I don’t know.