Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Enable Directory Indexing on GitHub Pages

I need to display directory contents on GH Pages.

Would prefer

  1. Automatically, without index.html
  2. A tool or library for automatically generating the index.html
  3. Any other method

So, if I have a FS in my GH Pages repository:

http://github.com/[username]/[username].github.io/ :

script/
- app/
  - core/
    - init.js
- lib/
  - Element.animate.js
  - Object.overlay.js
- mod/
  - anim/
    - global/
      - carousel/
        - carousel.js
      - global.js
- ext/
  - cfgs.js
index.html

I would want each directory URL to index as usual, like so.

http://[username].github.io/script/ :

- app/
- lib/
- mod/
- ext/

http://[username].github.io/script/mod/anim/global/ :

- carousel/
- global.js

The only thing I can think of is preference #2, write or find a script to automatically generate the index.html from the GitHub Repo page or the local Repo on my FS.

like image 658
HTDE Avatar asked Aug 19 '16 22:08

HTDE


People also ask

Is index html necessary for GitHub Pages?

If it is a cache, it's gotta be something on github's end as even with a hard refresh that should clear caches ( Shift+ctrl+R ) the page without the index. html was still 404-ing for me. This is still a problem in 2021 in case anyone was wondering. It also happens if you push a commit that deletes your index.


1 Answers

If you want a dynamic index that doesn't require any updating the only method I've found is by generating it client side with the github contents api.

Here is a simple example that creates links to files in the top level directory of your project. If you want to support subdirectories using this method you would have to recursively request the contents of each folder.

<html>
  <body>
    <script>
      (async () => {
        const response = await fetch('https://api.github.com/repos/:user/:repo/contents/');
        const data = await response.json();
        let htmlString = '<ul>';
        for (let file of data) {
          htmlString += `<li><a href="${file.path}">${file.name}</a></li>`;
        }
        htmlString += '</ul>';
        document.getElementsByTagName('body')[0].innerHTML = htmlString;
      })()
    </script>
  <body>
</html>

Here's an example where I used this to create a simple directory for a flat repo I have.

like image 130
TimE Avatar answered Sep 21 '22 15:09

TimE