Table of Contents

How Should I Organize My Site Files?

This is a topic that comes up a lot on the Melonland forums, and a lot of new webmasters have questions about how best to organize files. Since it's difficult to go back and re-organize after you've gotten started, it can be important to pick the correct organization scheme before you've gotten too far in to your project. That said, there's no real wrong way to do this as long as you pick something that works for you and then stick with it!

How you organize your site will depend on what you're planning to add and what type of site you have. It also needs to be flexible enough to meet your needs as your site grows. Because of that, it's often recommended to draw out a simple flowchart for your website before you get started. It doesn't have to be perfect or overly detailed, but you should have a general idea of how you want users to navigate your site when you look over it. Here's an example from a fictitious personal website dedicated to a family:

Here the creator has started with their index page, and drawn arrows to indicate links between each page. Based on this image, we can speculate about how best to start organizing this site: 

  | index.html
  | news.html
  | contact.html
  | vacation.html

Because each of the family pages have the same elements (Activities, favorites, photo page), and would create duplicate pages, it would probably be best to put them in subdirectories. Thus, the site would begin to look like this: 

  |bert/
  | |- activities.html
  | |- favorites.html
  | |- photos.html
  |barbara/
  | |- activities.html
  | |- favorites.html
  | |- photos.html
  |bettina/
  | |- activities.html
  | |- favorites.html
  | |- photos.html
  |baby/
  | |- activities.html
  | |- favorites.html
  | |- photos.html
  |bubbles/
  | |- activities.html
  | |- favorites.html
  | |- photos.html
  | index.html
  | news.html
  | contact.html
  | vacation.html

There are certain things that are found on all websites, like images, stylesheets, and the like, and it's best to put them in their own folders so that you can find them easily. If we did this with the Blue family site, it would look like this: 

  |images
  | |- photos
  | |- layout
  | |- gifs
  |styles
  | |- main.css
  |bert/
  | |- activities.html
  | |- favorites.html
  | |- photos.html
  |barbara/
  | |- activities.html
  | |- favorites.html
  | |- photos.html
  |bettina/
  | |- activities.html
  | |- favorites.html
  | |- photos.html
  |baby/
  | |- activities.html
  | |- favorites.html
  | |- photos.html
  |bubbles/
  | |- activities.html
  | |- favorites.html
  | |- photos.html
  | index.html
  | news.html
  | contact.html
  | vacation.html

You can see here that you might add a videos/ folder if you were adding family videos, or maybe spin off a section for your family's trip to Canada, etc. This general scheme is flexible enough to meet the site's current needs, but also simple enough to be expanded if the site ever changes significantly.

Most websites are set up similarly to this, though each varies depending on its needs. The thread below has several examples from users who have posted their personal organization schemes:

https://forum.melonland.net/index.php?topic=55.0 https://forum.melonland.net/index.php?topic=55.0

These are all examples of information clumping, which seems to be the most popular way of organizing personal websites, but there are other ways to organize things too. Blogs can be organized chronologically, since that is how they are published:

Example Blog site: 

  | Main
  | - styles
  | -- main.css
  | -- print.css
  | - archive
  | -- 2022
  | --- Jan
  | ---- 07-A-walk-in-the-park.html
  | ---- 15-My-trip-to-Spain.html
  | --- Feb
  | --- Mar
  | --- ...etc
  | -- 2021
  | -- 2020
  | index.html
  | links.html
  | about.html

Alphabetical organization schemes can also be useful for wiki and information-based sites:

Example Wiki site: 

  | Main
  | - styles
  | -- main.css
  | -- print.css
  | - A
  | -- arachnids
  | --- Black Widow
  | --- Huntsman Spider
  | --- Wolf Spider
  | - B
  | -- Butterflies
  | --- Monarch
  | --- ...etc
  | index.html
  | links.html
  | about.html

References