deployed page loads but does not show - built with gatsby

Question

I deployed a gatsby blog I made to github pages. The first page links to a blog article. Nothing shows up when the link is clicked. But if I type the url in manually (Same url that is linked) I see the page for half a second before it dissapears to a blank page.

Helpful information

• Everything in the network tab is status code 200
• The HTML is returned in the get request, it is visible in the response
• head tag is on the page correctly, body tag is missing the html
• No console errors
• Works perfectly on development server (localhost)
• Domain is hosted with domain.com
• Using createpage gatsby plugin to generate article page
• It works when I deploy on netlify to a random url so maybe something to do with my domain or the gh-pages deployment

Answer 1

After looking at your GitHub code, I think you have a problem here: (Wrong URL: /blog/blog/why-gatsby), also your master code does not match code with the gh-pages (I know it's generated files from gatsby build but other stuff). Also, why are you creating a static query in the index.js component? You can do that with a regular page query.

Your gatsby site starts from https://www.ragith.com/blog/ and that's why you have that kind of a problem. When gatsby look into pages, there's only blog.js inside of it.

I.E:

pages/blog.js

Link problem

<a class="article-card-link" href="/blog/blog/why-gatsby"><section><article><h2 class="article-title">Why Gatsby js ?</h2><p class="article-date">May 09, 2020</p><p class="article-excerpt">In a world with so many JavaScript frameworks such as React, Vue, heck even Next, why Gatsby? The short answer is, none of those frameworks are the target market of Gatsby. Gatsby is a static website generator. Great! Wait, who cares? Well a lot of my clients and so will yours…</p>READ MORE</article></section></a>