Category: technology

I work in technology for a living, as a product manager in BCG’s IT Knowledge group. I’m pretty keen on technology generally. Below are posts about websites I’ve worked on, fonts I’ve designed, and JavaScript I’ve written.

Apache rewrite rules, headaches, and conundrums

How to prettify your website’s URLs

I wanted to remove a word from the path (“slides”). I also wanted all my paths to end as though they were a directory (“/directory/path/” rather than “/directory/path.html”). See Apache’s full documentation here and this handy guide here.

Apache rewrite rules regular expressions comic

It goes like this:

  • Create a plain-text file named “.htaccess”
  • Put it at the top level of your website (root, as they say)
  • Include the following code:
# Standard simple redirect
redirect 301 /ugly-old-file.html

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

# Prettify my URLs
RewriteRule ^photos/(.*)/(.*)/(.*)/$  /photos/$1/$2/slides/$3.html  [L]

# Domain consistency
RewriteCond %{http_host} ^ [NC]
RewriteRule ^(.*)$$1 [R=301,NC]
  • Standard simple redirects are not part of this discussion but I included it so you can see how they work.
  • Domain consistency is not part of this discussion but I included it so you can see how it works.
  • The line that starts “RewriteRule” is where the magic happens.
  • There are three parts:
    • the path on the left
    • the path on the right
    • the flag in brackets at the end.
  • The flag [L] tells it to stop processing rules after that line.
    • I’m not entirely sure how this works, because all my rules do all get processed. All I know is this is the flag I need.
    • I do not need [L,R=301], because I am not creating a redirect.
  • The path on the left is what I want my path to look like, prettified.
    • A sample pretty path as the user would see it:
    • /photos/travel/hullbeach/tree-in-sand/
    • Yes, I have webpages four levels deep. That’s a discussion for another day.
  • What the various symbols mean:
    • ^ means “the beginning of the string”.
    • . means “any character”.
    • .* means “any character any number of times”.
    • () groups characters into a single unit and captures a match for use in a back-reference.
    • There are three instances of (.*) in the pretty path; those can back-referenced in my ugly path as $1, $2, $3.
    • Slashes are the normal slashes in your path.
    • $ at the end means “the end of your string”.
  • The path on the right is what my real, ugly, file system path looks like.
    • In the ugly path, $1 represents the first instance of (.*), and so forth.
    • A sample ugly path as the user would see it:
    • /photos/travel/hullbeach/slides/tree-in-sand.html
  • I want to show the pretty path, but I need the ugly path to tell it where to find my files. You may have reasons for this:
    • Your gallery generator only outputs ugly paths.
    • You have 10,000 ugly paths and cannot be bothered to clean them up.
    • Some third-party plugin creates ugly paths.
    • You’re OCD and the paths drive you crazy.
    • It’s okay. We get it. Let’s make them pretty.
  • The net net of this is that you can link to your pretty path, and it will find and serve up the file at the ugly path, without the user being the wiser.
  • You must change all your links in HTML to be pretty otherwise your users will still be able to see the ugly paths.
    • The ugly paths didn’t die, I am simply not linking to them in my web pages anymore.
    • If you typed the ugly path in by hand, they will still be accessible.
    • There is supposedly a way to hide your ugly paths with a RewriteCond or one of the other confounding features of Apache.
    • I have not mastered that yet, so in the meantime I just make sure I only use the pretty paths in my pages.
    • Over time, Google stopped finding my ugly URLs.
  • I use JAlbum to generate photo galleries.
    • Originally my files were named 383_9912a.
    • I renamed all the image files; JAlbum names its HTML files based on the image name.
    • I highly recommend JAlbum for custom photo galleries.
    • It is written in Java so you can include BeanShell script or use Jalbum’s custom variables.
  • See photo galleries for the pretty URLs in action.

More posts in technology