Situation:
I've successfully published a custom domain site using Github pages. The URL is: https://stigmastories.com/
The site was working fine, until 2 days ago, I found out that people were being redirected to the Readme.md. I did not push any changes, so this was extremely odd. It just stopped working.
Setup details:
- It's a simple create-react-app
- My
index.htmlis not in the root. It's in thepublicfolder.
This is my directory structure:
- build
- node_modules
- public
- index.html
- 404.html
- manifest.json
- src
- package.json
- CNAME
- README.md
This is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Fighting Stigma Through Art"
/>
<!-- Start Single Page Apps for GitHub Pages -->
<script type="text/javascript">
(function(l) {
if (l.search[1] === '/' ) {
var decoded = l.search.slice(1).split('&').map(function(s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="//embed.typeform.com/next/embed.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=FOO"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('FOO');
</script>
<title>Stigma Stories</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
</div>
</body>
</html>
This is my manifest.json:
{
"short_name": "Stigma Stories",
"name": "Stigma Stories",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
This is my 404.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Page Apps for GitHub Pages</title>
<script type="text/javascript">
var pathSegmentsToKeep = 0;
var l = window.location;
var textFrag = performance.getEntriesByType("navigation")[0].name.split('stories')[2] || '';
l.replace(
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
l.hash + textFrag
);
</script>
</head>
<body>
</body>
</html>
And in my package.json , I have a:
"homepage": "https://coreyarch4321.github.io",
I am deploying from my main branch from the root folder. My deploy script looks like:
"deploy": "gh-pages -d build",
Other important notes:
I've done my fair share of research on what could be wrong. I see people talk about how you should:
- move
index.htmland all other files up to the root. I shouldn't need to do this. It was working fine before. I'd like to fix this without having to resort to that.
Any type of help would be appreciated. Let me know if you need any other info!