GitHub pages only showing ReadMe file?

Github gives you multiple choices where it takes it sources from. By default its the root of the master branch, which will use the README.md in case there is no index.html.

But you can also switch to the docs/ folder in your repository settings. With that you can put the index.html under the docs/ folder.

See

In my case, I had to choose the branch gh-pages/root in Pages settings on GitHub.

I had a similar situation when deploying a static React app from create-react-app (so index.html was in /public instead of root) with gh-pages npm package.

I had to select a gh-pages as a branch and /docs as a folder at GitHub Project -> Settings -> Pages -> Folder/Branch dropdowns. It wasn't intuitive since I didn't have /docs anywhere in my project files, but I'm glad that it eventually worked!

if you want to access to index.html, try to write https://your-github-deploy-address/index.html

so just add '/index.html' at the end of the address! (this is how I solved my case)

Create an index.html in the root and insert the line

<meta http-equiv="Refresh" content="2; url=public/index.html">

Or so it worked for me with a Vue CLI project I had this trouble with.

For me, this solution solves the issue:https://github.com/gitname/react-gh-pages

Open the package.json file, add two properties as below:

• Add a homepage property in this format*: https://{username}.github.io/{repo-name}

• For a project site, that's the format. For a user site, the format is: https://{username}.github.io. You can read more about the homepage property in the "GitHub Pages" section of the create-react-app documentation.

    {
      "name": "my-app",
      "version": "0.1.0",
    + "homepage": "https://gitname.github.io/react-gh-pages",
      "private": true,
  

• Add a predeploy property and a deploy property to the scripts object in :

    "scripts": {
    +   "predeploy": "npm run build",
    +   "deploy": "gh-pages -d build",
        "start": "react-scripts start",
        "build": "react-scripts build",
  

The simplest solution to overcome this is put the index.html file in the outermost folder along with the readme.md

Please change the HTML file to index.html. This simple thing had me struggling for 6 hours to find this. My HTML name before was base.html; this shows the read me file only. After changing to index.html the file opened without any problems.

Try putting the following URL in your browser with the necessary changes:

https://<username>/github.io/<repo>/<filePathOnGithubToIndex.html>

For example, if you can find another repo that is using pages to do link to the demo you will see the path to the html file in the URL. This is mine:

https://calebkrauter.github.io/491-sprite-animation-tutorial/Empty--GameEngine-main/index.html

Hope that helps!

The steps to resolve this issue is from best practice is to go the your project folder. You should change what ever you named your root or initial page to index.html as mentioned above. Then open your project in git bash on your system, perform your normal git steps like,

• git add
• git commit -m " change to index.html"
• git push origin master {depending on what you named your root branch}

Then go to settings and there you go (wow wow) after one or two refresh, your site will be live

For me, the problem was the docs folder was moved to .gitignore automatically. You have to delete docs from .gitignore, commit and push.

Change the GitHub Pages source to gh-pages with folder as /(root)

Github is looking into root folder and displaying readme.md file .Append SiteUrl given by github with the path to index.html file . so github pages start rendering your index.html file.

Where to get site Url

In my case my complete Url will be https://userName.github.io/RepoName/src/index.html

I tried a lot of the steps above and was still seeing my README when I navigated to the deployed site, so I removed a forward slash from the end of the "homepage" in my package.json and that finally did the trick: "homepage": "https://{gitname}.github.io/{react-app}/" ---> "homepage": "https://{gitname}.github.io/{react-app}"

for reference/further context for debugging, my application is set to deploy from the /root directory of the gh-pages branch and my index.html is in my /public folder

If you're using react you need to build the app for production before being deployed.

1. npm run build

2. Add this to the top of your package.json: "homepage": "https://.github.io/"

3. npm run build

4. npm install --save gh-pages

5. Add these scripts to your json:

"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }

6. npm run deploy

7. Have a look at your deployed app 👌

To summer up, if your repository does not have an Index.html it will show the ReadMe file. Thus in order to correct it all you need to do is add an index.html or index.md file to your folder and use that as main. From there all the others will be access through a link on this page. Similarly to a webpage.