Windex: pretty-up your localhost
3 Apr 2018
As 90% of my job is making static websites, I am often looking at directory index pages. You know, those ancient pages with titles like Index of /projects/. Long ago, I swore off the ugly unstyled 90's default and chose a higher path.
Windex is a little library that creates styled directory index pages with Apache. Simply put, it allows you to use CSS on your
localhost. Features include:
- SVG icons, sized pixel-perfect for 24x24 & multiples thereof
- View HTML files without extensions:
- Nice mobile view with big tap targets
Setting up a practical localhost on macOS
I like to use
localhost so I can view my projects in
~/projects. This allows me to create static sites that I can easily view in the browser, without having to start up a server. For example, going to
http://localhost/masonry/sandbox allows me to view
Below are instructions to set that up on macOS. Sorry Windows users, you're on your own here. This will make a single user's folder viewable for all users. For separate users folders like
localhost/~username, view these instructions.
/etc/apache2/httpd.conf in your text editor. Making changes to this file will require administrator access. Change the following lines (line numbers may vary in your file):
Line 169: Enable
mod_rewrite. This enables
.htaccess files to rewrite URLs.
LoadModule rewrite_module libexec/apache2/mod_rewrite.so
Lines 238-239: Change
DocumentRoot and subsequent
Directory to your desired directory. This sets
localhost to point to the directory.
DocumentRoot "/Users/username/projects" <Directory "/Users/username/projects">
Line 252: Within this
<Directory> block, add
Options. This enables file index view.
Options FollowSymLinks Multiviews Indexes
Line 260: Change
AllowOverride value to
All. This enables
That block should look like:
DocumentRoot "/Users/username/projects" <Directory "/Users/username/projects"> # Possible values for the Options directive... Options FollowSymLinks Multiviews Indexes MultiviewsMatch Any # AllowOverride controls what directives... AllowOverride All # Controls who can get stuff from this server. Require all granted </Directory>
In Terminal, start or restart
sudo apachectl restart
View http://localhost in a browser. You'll should see the index page for
~/projects. Without Windex, it's ugly, but it works. With Windex, it's pretty.
If you messed up
httpd.conf, you can replace it with its original at
Viewing on other devices on macOS
You can view this
localhost on another device like a phone.
- Open System Preferences. Select Sharing.
- Change Computer name to something rad, like thunderclaw, if you haven't already.
- Enable File sharing.
Now, you can view
http://thunderclaw.local on another device if you are on the same Wi-Fi.
Windex is the one tool I use every day. Originally created in 2010, it is one of my first open-source projects. Before this recent overhaul, I had been using that first version for years, which had iPhone v1 glossy buttons. Let's see if this version lasts me until 2026.