How to Enable Directory Indexing on GitHub Pages

Question

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.

Leave a Comment Cancel reply

Not Found