Make your localhost look nice with stylized directory index pages. No more 1996 jank.
- SVG icons, sized pixel-perfect for 24x24 & multiples thereof
- View HTML files without extensions:
- Nice mobile view with big tap targets
Windex uses Apache.
Let's say your root folder used for
- Download or clone this project to the root folder:
.htaccessto the root folder:
.htaccess is a hidden file. You can copy it to its location in Terminal via the command line:
cd ~/projects cp windex/.htaccess .
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
localhost/masonry/sandbox allows me to see
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.
- jessfraz/directory-theme, which was based off of
- Apaxy, which owes its existence to
- Indices, which Windex was originally based off of
Windex is released under the MIT license. Have at it.
Made by David DeSandro