git - How to Enable Directory Indexing on GitHub Pages

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

git - How to Enable Directory Indexing on GitHub Pages

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I need to display directory contents on GH Pages.

Would prefer

Automatically, without index.html
A tool or library for automatically generating the index.html
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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1.1k views

1 Answer

深蓝 · Answer 1 · 2021-10-23T18:58:50+0000

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.

Categories

git - How to Enable Directory Indexing on GitHub Pages

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags