Improper rendering of Hugo website in GitHub Pages with custom domain

Hi,

I created my own personal website in Hugo by following the official documentation and some YouTube videos. After multiple trial and error cycles, I was able to host the website on GitHub pages. You can find the link to the website here.

I have purchased my domain at GoDaddy. However I am facing issues whenever I try to add the custom domain to my repository using the CNAME file. I am confident that I have correctly configured the DNS records.

The website works flawlessly whenever it uses the domain provided by GitHub Pages. But whenever I try to add the custom domain by following the method mentioned in the Hugo documentation, nothing happens for a few minutes. However, after 15-30 minutes, I get this bad version of the website. This happens every time.

I have tried all solutions, but I am still unable to add the custom domain successfully.

This is my GitHub repository link to the source files: Link

This is my GitHub repository link to the generated content: Link

Your help is greatly appreciated.

Regards
Mithun K

P.S.: I am new to Git and I know only the basics.

looking through the history of your repo with the generated content, when you added the CNAME to the root of the repo, index.html was still referencing the old *.github.io urls for your stylesheets. i.e you didn’t rebuild the site using Hugo so it could regenerate the html for you.

see here: https://github.com/tech-mithun/tech-mithun.github.io/blob/ca269be4a1f40bd386ec29c2cb46bed9b831298c/index.html

<link rel="stylesheet" href="https://tech-mithun.github.io/css/coder.min.fce3d3684e836ce340cdd591dad1749c310472d5ed4049fab99845c9aec4d4bf.css" integrity="sha256-/OPTaE6DbONAzdWR2tF0nDEEctXtQEn6uZhFya7E1L8=" crossorigin="anonymous" media="screen" />
<link rel="stylesheet" href="https://tech-mithun.github.io/css/coder-dark.min.717236c74e0a5208ef73964a9f44c6b443b689a95b270d8b2a40d0c012460dac.css" integrity="sha256-cXI2x04KUgjvc5ZKn0TGtEO2ialbJw2LKkDQwBJGDaw=" crossorigin="anonymous" media="screen" />

These urls would stop working at this point, because there is now a CNAME in the root of the repo.

So, to get this right you have to do everything in sequence:

  • add your CNAME file back into the source repo.
  • change baseurl in config.toml from baseurl="https://tech-mithun.github.io" to baseurl = "https://mithun.tech"
  • And then rebuild the site. $ hugo -e prod
  • and then push the rebuilt ./public directory to your tech-mithun.github.io repo

I think you didn’t rebuild & push the rebuilt files to the tech-mithun.github.io repo when you tried it last time.

Hi!

Thank you for your reply. But I have a question.

What does prod mean here? What does hugo -e prod do?

Regards
Mithun K

That entirely depends on your theme and your code. It just sets the environment, so if you happened to have code that does things like only include google analytics tags on production builds this is a way of signalling to your code which environment you’re building for:

{{ if eq hugo.Environment "prod" }}
 ... do things you'd only do when building for prod, and not for dev
{{ end }}

Whether you include it or not should not break anything.

But, no need to worry about, just do $ hugo, it will build the site to ./public for you

Hi,

I have not included the public directory in the build process as mentioned in the documentation. In fact, I have included public in my .gitignore file.

Am I supposed to remove public in my .gitignore file? I am asking this because I have done all my commits and pushes in this configuration. Plus, I tried following the steps that you mentioned, but it didn’t work. As a result, I had to revert my changes.

Regards
Mithun K

okay, so looks like you’re using ./deploy.sh in your tech-mithun/mithun.tech repo to deploy?

if so, you’re using the hugo -d ../tech-mithun.github.io to build to a custom output directory. The default is ./public, which is what I was talking about. This is all good.

So no, since you’re using this custom build script, don’t remove public from .gitignore. Sorry, I didn’t notice the script before, I was just trying to convey the general principle of publishing the output dir (whether ./public or ../tech-mithun.github.io) to the tech-mithun.github.io repo.

You had it right in this commit: https://github.com/tech-mithun/tech-mithun.github.io/tree/e93a9c17adc0a64adf2cb99476c17d6d4b463ff1

Remember GitHub Pages can take 10-15 minutes to update sometimes. When you say it “didn’t work”, what exactly did you see?

I’m sure you’re aware, but right now https://mithun.tech is pointing to a Jekyll dummy site, not to GitHub Pages?

So in summary, you’re going to have to do, in order:

  1. Make sure your domain provider for mithun.tech is pointing to GitHub Pages. Follow the GitHub Pages documentation for this. Wait for the DNS records to replicate before proceeding.
  2. Ensure static/CNAME exists in tech-mithun/mithun.tech
  3. Change baseurl in config.toml from baseurl="https://tech-mithun.github.io" to baseurl = "https://mithun.tech"
  4. Run ./deploy.sh
  5. Wait 10-15 minutes for GitHub Pages to update and replicate its CDN.

Hi!

When I said that the site “didn’t work”, I meant that the website had a bad build, just like I mentioned at the beginning of this thread.

Next, I am fully aware that https://mithun.tech WAS pointing to a dummy website. This is intentional and it was done with the sole purpose of preventing a domain takeover.

Last, but not the least, the website finally works with the custom domain! There is an error in deploy.sh. As a result, I did all the steps manually and it worked! Thank you for your help!

Please do check my website at https://mithun.tech. Suggestions are welcome!

Regards
Mithun K

Excellent! :smile:

| Mithun_K
September 14 |

  • | - |

Hi!

When I said that the site “didn’t work”, I meant that the website had a bad build, just like I mentioned at the beginning of this thread.

Next, I am fully aware that https://mithun.tech WAS pointing to a dummy website. This is intentional and it was done with the sole purpose of preventing a domain takeover.

Last, but not the least, the website finally works with the custom domain! There is an error in deploy.sh. As a result, I did all the steps manually and it worked! Thank you for your help!

Please do check my website at https://mithun.tech. Suggestions are welcome!

Regards
Mithun K

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.