Website not working with Custom Domain (Namecheap)

[rjachuthan]

Select Topic Area

Bug

Body

I am writing to seek assistance regarding an issue I am facing with my recently launched blogging site, which utilizes Hugo and GitHub Pages. To provide a more professional user experience, I have purchased a domain name from Namecheap ("riturajwrites.xyz.") and followed the necessary steps outlined in the documentation to properly configure the routing of my blog to the domain name. However, despite successfully implementing the steps, I am encountering difficulties with the loading of other essential components such as CSS and images.

To give you a clearer picture of the steps I have taken thus far, kindly find below a detailed overview:

• I have hosted the Hugo website on GitHub Pages using GitHub Actions.
• When I visit the site without the custom domain on GitHub, the website can be accessed at "rjachuthan.github.io/riturajwrites" and all components load correctly.
• However, upon adding the domain name "riturajwrites.xyz" to the Custom Domain section of GitHub's Settings > Pages, only the text renders while other crucial elements such as CSS, SVG, and images fail to load.

This is how the website looks right now:

And this is how it is supposed to look (this is how it was looking when the url was rjachuthan.github.io/riturajwrites):

Within the Namecheap Dashboard, I have duly entered the four IP addresses mentioned in GitHub documentation, along with the CNAME entry "rjachuthan.github.io."

This is the response by running dig command:

I would greatly appreciate your assistance in resolving this matter. I have already allowed sufficient time (over 24 hours) for the domain name changes to propagate, but the issue persists.

I have already reached out to Namecheap Support team and this is their response:

Thank you very much for your attention to this matter. I look forward to hearing from you soon.

[50bvd]

There are several things that can cause this problem. Here are some steps you can take to try and solve it.

Incorrect path to CSS files: Make sure your CSS file paths are correct. Sometimes, relative paths don't work as expected, especially if you're using Jekyll or another site generator. For example, if your stylesheet is located in a /css folder at the root of your repository, you should use the path /css/style.css instead of css/style.css.

Base URL configuration: If you're using Jekyll, make sure that the base URL in your _config.yml configuration file is correct. For example, if your GitHub repository is username.github.io/repo, then your base URL should be /repo.

Browser cache: Your browser may keep a cached version of your site. Try clearing your browser's cache and reloading the page.

HTTPS and mixed content: If your site is served over HTTPS (which is the default with GitHub Pages), but your stylesheets are loaded via HTTP, modern browsers will block the loading of these resources. Make sure all your resources are loaded via HTTPS.

Code inspection and browser console: Use your browser's code inspection tool to check for errors related to the loading of your stylesheets. You can usually access this tool by right-clicking on your page and choosing "Inspect" or "Inspect element". Go to the "Console" tab to view the errors.

[rjachuthan]

Thank you for a quick response @50bvd.

I am using Hugo to build my site and all the CSS and images are handled by that. But I did notice there was this error in the console

I see an error in the Console window. I didn't know how to fix that. So, I had delete the /public folder and reuploaded to github. This seems to have fixed the issue.

Thank you for helping me out.

[50bvd]

No problem, you're welcome! :)