shell script to create a static HTML directory listing

Question

So I'm creating a GitHub Pages site to list all of the Gifs in my jglovier/gifs repo. GH Pages runs only static HTML/CSS/JS or Jekyll, so I cannot use an apache directory listing or any other server generated variant.

So what I'd like to do is run a script on the command line and have it browse the root for directories, list all the files inside (which only go one level deep), and output that to an html ul > li > a structure, or something similar to this:

root/
|
├── accidents/
|   ├── accident2.gif
|   ├── accident3.gif
|   └── accident4.gif
├── bears/
|   ├── bears1.gif
|   ├── bears2.gif
|   └── bears3.gif
└── cats/
    ├── cat1.gif
    ├── cat2.gif
    └── cat3.gif

I'd like the href values to be site-root relative paths (i.e. href="/cats/cat.gif), and I need it to output into_includes/site-index.html, which will get pulled into a Jekyll layout file that wraps around myindex.mdfile and generatesindex.html` on build.

I found this other question which is very similar, and tried to implement it's answer for my purposes, but alas I'm too much of a shell n00b to accomplish it on my own.

Answer 1

#!/bin/bash

ROOT=/tmp/test
HTTP="/"
OUTPUT="_includes/site-index.html" 

i=0
echo "<UL>" > $OUTPUT
for filepath in `find "$ROOT" -maxdepth 1 -mindepth 1 -type d| sort`; do
  path=`basename "$filepath"`
  echo "  <LI>$path</LI>" >> $OUTPUT
  echo "  <UL>" >> $OUTPUT
  for i in `find "$filepath" -maxdepth 1 -mindepth 1 -type f| sort`; do
    file=`basename "$i"`
    echo "    <LI><a href=\"/$path/$file\">$file</a></LI>" >> $OUTPUT
  done
  echo "  </UL>" >> $OUTPUT
done
echo "</UL>" >> $OUTPUT

My /tmp/test

/tmp/test
├── accidents
│   ├── accident2.gif
│   ├── accident3.gif
│   └── accident4.gif
├── bears
│   ├── bears1.gif
│   ├── bears2.gif
│   ├── bears3.gif
│   └── bears4.gif
└── cats
    ├── cats1.gif
    └── cats2.gif

The resulting output

<UL>
  <LI>accidents</LI>
  <UL>
    <LI><a href="/accidents/accident2.gif">accident2.gif</a></LI>
    <LI><a href="/accidents/accident3.gif">accident3.gif</a></LI>
    <LI><a href="/accidents/accident4.gif">accident4.gif</a></LI>
  </UL>
  <LI>bears</LI>
  <UL>
    <LI><a href="/bears/bears1.gif">bears1.gif</a></LI>
    <LI><a href="/bears/bears2.gif">bears2.gif</a></LI>
    <LI><a href="/bears/bears3.gif">bears3.gif</a></LI>
    <LI><a href="/bears/bears4.gif">bears4.gif</a></LI>
  </UL>
  <LI>cats</LI>
  <UL>
    <LI><a href="/cats/cats1.gif">cats1.gif</a></LI>
    <LI><a href="/cats/cats2.gif">cats2.gif</a></LI>
  </UL>
</UL>

You could expand the UL with href too, but I wasn't sure if that's what you wanted.

echo "  <UL><a href=\"/$path\">$path</a>" >> $OUTPUT

You would have to run this in the parent folder of _includes

Answer 2

tree -H . -o _includes/site-index.html should do everything you asked for.