github - How to get file list under directory on github pages?

Question

Suppose a repo myname/myrepo with github pages enabled, then myname.github.io/myrepo will be available, hosting same content as original repo without any dedicated deployment.

repo
  |-- folder
        |-- file1
        |-- file2

I expect to send http request like myname.github.io/myrepo/folder to get something like ['file1', 'file2'] dynamically (even just a string I can parse through javascript), like nginx autoindex.

How can I achieve this?

Note: I know I can write a script, possibly in any language like bash, python, ruby, perl, to name endlessly, to generate the index file. I do not want any additional deployment, even with CI.

Unbelievable

Possible duplicate of How to Enable Directory Indexing on GitHub Pages – Hoax

@LuisMiguelSS. It uses a deploy script to generate index file, which is not what I want. – Unbelievable

Answer 1

Inspired by octotree (a chrome plugin for github), send API GET https://api.github.com/repos/{owner}/{repo}/git/trees/master to get root folder structure and recursively visit children of "type": "tree".

As github API has rate limit of 5000 requests / hour, this might not be good for deep and wide tree.

Unbelievable

Answer 2

I needed something like this for my project hosted on GitHub Pages, so obviously needed to use JavaScript.

If the directory is at the root of the repo. The code in JavaScript can look like this:

async function list_directory(user, repo, directory) {
  const url = `https://api.github.com/repos/${user}/${repo}/git/trees/master`;
  const list = await fetch(url).then(res => res.json());
  const dir = list.tree.find(node => node.path === directory);
  if (dir) {
     const list = await fetch(dir.url).then(res => res.json());
     return list.tree.map(node => node.path);
  }
}

if the directory is nested you need to split the directory with a slash (/) and use a loop to get all directories:

async function list_directory(user, repo, directory) {
  const url = `https://api.github.com/repos/${user}/${repo}/git/trees/master`;
  directory = directory.split('/').filter(Boolean);
  const dir = await directory.reduce(async (acc, dir) => {
      const { url } = await acc;
      const list = await fetch(url).then(res => res.json());
      return list.tree.find(node => node.path === dir);
  }, { url });
  if (dir) {
     const list = await fetch(dir.url).then(res => res.json());
     return list.tree.map(node => node.path);
  }
}

Clovis

good work, i like the await acc in directory.reduce , you learn something everyday – Krenn

Answer 3

Directory Listing - GitHub Pages

If using the script for generating an index file is not what you wanted, there's no other way to get that.

GitHub Pages used to allow .PHP files where you could do something similar in an easier way (see here), but this feature is not available, so the script mentioned above generates static files for it.

There's no other way i know to achieve this. Why don't you want to use the script? (special reasons?) Please give more information of what you could use so we can find other ways.

UPDATE 1:

I found something that could make it work, but needs to be installed, so you might not like it (see "*note" below). This is a bit outdated (last commit on Feb).

*Note: most people would agree that to achieve what you want, you'll need a server-side language, but php is not supported on GHP as explained before. See more here.

Hoax

Actually, I do not have any deployment as you can see. If there is one, that is git push. With script, every time I would like to add something, I have to remember to run the script. That is too trivial. I once thought there would be an API from github, only to find it just contains some metadata like stars and forks. One stupid solution from my imagination, might be that, I write a js script, in which I send an HTTP request to https://github.com/myname/myrepo and on and on. – Unbelievable