You can just put a folder of files on the internet if you want to.

Here’s mine:

I mentioned it on Social Media.

It’s absolutely nothing compared to Ethan’s famous bukk.it, but it’s mine.

I chucked this directory online just a month or so ago after I was doing some digital file management. I had a couple of huge boxes of cases full of burnt (burned?) CDs and DVDs. There was a bunch of live music (a ton of Phish, which is now easy to find online), burned copies of random Netflix rentals (Stargate Season 2 Disc 3!), and just random files I’d burn so I could delete them off my main machine (probably).

Nowadays, storage is cheap, so I started pulling the data (that I actually wanted) back onto my main machine, organized it, and chucked it all in Dropbox.

During all that, I found a folder called “very important images ok” that had these files in there. So — what the heck — might as well FTP those suckers up to this website! I also remembered that the post Display Styled Directory Contents on CSS-Tricks was just super weirdly popular, and figured I’d give it a lick of CSS paint just for fun. Unfortunately, that post assumes an Apache web server, and this site now runs on Nginx, so I had to learn some new tricks.

First, directory listings need to be directly turned on:

location /important/ {
    autoindex on;
    autoindex_exact_size off;
    autoindex_format html;
    autoindex_localtime on;
}Code language: Nginx (nginx)

Then if you want to apply any style or other modifications, you can add “before” and “after” documents that will be appended:

location /important/ {
  ...

  add_before_body /files/nginx-before.txt;
  add_after_body /files/nginx-after.txt;
}Code language: Nginx (nginx)

I used those two files to add basic HTML scaffolding and inline styles:

I was tempted to use a <script> to wrangle the markup into something nicer than a friggin’ <pre> tag with anchor links (maybe a nice sortable table?), but I lost steam.


CodePen

I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

One response to “You can just put a folder of files on the internet if you want to.”

  1. Jean says:

    I’m using ngx-fancyindex [1] to get even more customization [2]. It’s not easy to install since you need to compile it.

    [1] https://github.com/aperezdc/ngx-fancyindex
    [2] https://github.com/Naereen/Nginx-Fancyindex-Theme

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️