Files. Billions of computer files. The entire computer world is composed of files. So are my websites. And your websites. All those files need to be organized. I’m going to share some of what I do and why.

First I’ll disclose my motives. My motive to organize my web files is efficiency. If I structure my files similarly for every project I am more easily able to locate files for maintenance in the future. My motive to write this article is less obvious and certainly just as self centered. When I inherit an existing project I am forced to inherit the previous developers file structure. Sometimes those file structures are just plain messy. Helping my fellow webmasters may end up helping myself in the future.

• Simple

A perfect scenario is where the file structure follows the web page structure. A page about bees (www.bugsthatbite.org/flying/bees/index.php) is located in a folder named ‘bees’ which is a subfolder of the ‘flying’ folder. The website navigation would be similar with the navigation showing bees as a sub page of the flying page or category. All the javascript includes, script includes, images, etc that are used by the bees page is also located in the ‘bees’ folder. Many sites are organized this way. But as the web world has evolved, it no longer makes sense to have many copies of javascript includes and commonly used images. We have traded a simple file structure for more efficient maintenance.

• Slightly less Simple

Most of the non dynamic sites I build these days aren’t quite so simple to organize. Taking from the example above, I still keep as much of the bee specific information in the ‘bees’ folder that I can. This includes the textual content and any images that are specific to www.bugsthatbite.org/flying/bees/index.php. But I find that I am reusing more and more of the html, css, Javascript, and scripting code to ease maintenance. These files now need to be centralized. Here are some examples:

/css
Pretty obvious what’s in that folder. Any stylesheets that are used across the site would reside here. I may have multiple files as different parts of the site need completely different styles. The only .css files that might not live here are those that are used only in one small section of my site.

/templates
More and more I am moving toward using .html templates that contain most of the presentation code. My scripting language then assembles the page specific content into the shared template. This folder may contain it’s own set of subdirectories depending on the complexity and quantity of my templates.

/codeinc
I often find myself using certain code on nearly every page of a site. These includes reside in one place. The types of files are usually frequently used functions such as my templating code or DB connectivity code.

/img
Many of the templates that make a website attractive use a series of images. These are used on nearly every page so they get their own subfolder. I am careful to not mix content specific images into this folder.

• Less commonly used subfolders

At this point I have explained the general subfolders that I am likely to use on just about any code driven site. The next two are special cases that are used much less often.

/data
The name is not very helpful, but that reflects the possible types of files that may end up here. Some sites allow users or administrators to upload content files or images. Maintenance might get very messy if I allowed uploaded files to sit next to static files. To keep the uploaded data organized this folder almost always contains a folder structure that mimics the navigation structure.

../downloads
Often I want to have a file available for download to just certain users. Requiring a username/password to view a code based page is simple enough. Using .htaccess works to restrict access for a downloadable file but I don’t like requiring a second username/password. When the host allows me, I will create the ../downloads folder next to the browsable root folder. If my ‘bees’ full filepath is here: /wwwbase/shareduserx/websiteaboutbugs/flying/bees/index.php, then my downloads file would be here: /wwwbase/shareduserx/downloads. The webserver doesn’t allow access outside the ‘websiteaboutbugs’ folder. I can then use code to server the downloadable files if the user has previously supplied the appropriate credentials. Of course, my ../downloads folder will likely contain a series of subdirectories that mimic the navigation of the site.

For me to claim 100% victory with this article I guess I would need every reader to follow my guidelines. That is not realistic. Hopefully other webmasters and developers will take my ideas, combine them with their own, and end up with a superior method of organizing files. But if just one reader starts his or her next project with a least a little thought on filesystem structure, and if he or she ends up utilizing a better file structure, and if at some point I inherit that project, I have at least made my own life just a wee bit easier.

p.s. When this article was written, www.bugsthatbite.org was chosen as a cute, but nonexistent, example URL.

7 Deadly Sins of Blogging
Doing the Flash/HTML Limbo
Windows vs. Linux
The Pros and Cons of a CMS
Shared Hosting Support Showdown