Traversing Local Files

Traversing Local Files

Using Hugo’s function readDir, you can traverse your web site’s files on your server.

Using readDir

The readDir function returns an array of os.FileInfo. It takes a single, string argument: a path. This path can be to any directory of your web site (as found on your server’s filesystem).

Whether the path is absolute or relative makes no difference, because—at least for readDir—the root of your web site (typically ./public/) in effect becomes both:

1. The filesystem root; and
2. The current working directory.

New Shortcode

So, let’s create a new shortcode using readDir:

layouts/shortcodes/directoryindex.html

{{- $pathURL := .Get "pathURL" -}}
{{- $path := .Get "path" -}}
{{- $files := readDir $path -}}
<table>
    <th>Size in bytes</th>
    <th>Name</th>
{{- range $files }}
    <tr>
        <td>{{ .Size }}</td>
        <td><a href="{{ $pathURL }}{{ .Name | relURL }}"> {{ .Name }}</a></td>
    </tr>
{{- end }}
</table>

For the files in any given directory, this shortcode usefully lists their basenames and sizes, while providing links to them.

Already—actually—this shortcode has been included in this very web site. So, let’s list some of its CSS files. (If you click on their names, you can reveal the contents.)

{{< directoryindex path="/static/css" pathURL="/css" >}}

By the way, regarding the pathURL argument, the initial slash / is important. Otherwise, it becomes relative to the current web page.