How can I use Giscus on a site published on gh-pages branch?

[askming]

Describe the bug A clear and concise description of what the bug is.

Hi,

After adding the Giscus component to my site, I was able to login and add comment when I experimented it locally.

My React-based site is deployed to the gh-pages branch rather than the master/main branch. It turns out that the interface of giscus shows up as expected, but I couldn't login to my github account to add comment. (screenshot below)

I'm pretty new to github pages and am guessing this may due to some configuration issue, where it couldn't find the site that resides on the gh-pages branch.

Could you help provide some guidance?

Thanks!

[laymonage]

It's because you're using Create React App and the app is deployed as a single-page application (there's only index.html). On fresh load of a subpath on your website, GitHub Pages doesn't have the corresponding .html file, so it throws 404. You can verify this by going directly to https://askming.github.io/blog. In short, your pages can only be accessed from the root (https://askming.github.io), and the routing can only be done from the client-side with JS.

There are a few workarounds:

• Using hash-based history instead of browser history in React Router, or
• Add a 404.html to your website that redirects to index.html, or
• Add some prerendering solution to your build step, or
• Use some other hosting (e.g. Netlify) and configure so that all paths fall back to index.html, or
• Use a framework that support built-in prerendering, e.g. Next.js or Gatsby.

See https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing for more details.

[askming]

Thank you so much for the detailed explanation! I now understand the issue much better. I will try to explore the suggested solutions to fix this.

Thanks again!