Organizing files for static websites

jeff/ September 8, 2020

One of the most common problems that I’ve seen among students is file management. Or, more precisely, the lack of any kind of file management. If you are a student who depends upon the search function for finding files on you computer, then you need to break that habit. Web development depends upon organized file structures.

When helping a student troubleshoot a problem, I often will ask the student to show me the directory where his files are located. On more than one occasion, the student showed me something like this:

No. Please, no. Don’t do that.

To make your life easier in web development: learn to organize your files.

Key point

A website, at its most basic, is simply a directory of files on a server.

Simple, right?

Consider the incredible simplicity of that concept. On a server, the web server software looks for a designated folder (often called public_html). The files in that folder are the website.

Developing on your machine

As you develop websites on your local machine (i.e., your laptop), you want to organize your files in the same way that you do on the server. Note: I use the terms directory/subdirectory/folder/subfolder interchangeably. They mean the same thing.

A method for organizing files in web projects

Here’s the method that I use for organizing all my web development projects.

main project directory

Identify the main directory in which I’m going to store my projects. Note that I say projects. In this class and throughout your web development career, you will be working on multiple projects (often at the same time). Each project should exist in its own directory. But it’s good to have a main project directory: a directory of directories.

One place to put the project directory is under your Documents directory. Personally, I don’t ever store much of anything on the hard drive of my computer. I’m always concerned about backups and losing data. I actually use a paid Dropbox account that appears as a networked drive on my computer. The major benefit is that I can access my projects from any computer I work on: my home computer, my office computer, my laptop.

But for the purposes of this video: I’m going to assume you are using the Documents directory of your laptop.

Create the main projects directory. You can name the directory anything you like. I use WebDev.

Important! In naming files and directories for web projects, do not use spaces in those names.

Project directories

You now have a single directory to place all your projects. Remember, put each project in a different directory of the main projects folder.

Let’s create a project folder called “termProject”. You can name the folder anything you like, as long as you do not use spaces or special characters in the name.

At this point, you should have something like the following in your Documents directory (or wherever you’re placing your projects). Uh, don’t use the Desktop:

In the termProject folder, you want to create some subfolders:

  • css
  • js
  • images

In the termProject folder, you should end up with something like the following:

The index.html file

By convention, the file representing the default home page of a website is called index.html. That file exists in the top-level of your website folder, i.e., in this case our website folder is termProject. Do not put index.html in a subfolder of termProject.

Create an index.html in your termProject folder. (It can be just a blank file with the name index.html.) You should have something like the following:

Don’t worry about the file size for index.html. The above image says ‘zero bytes’ because the file is empty. As you add contents to the index.html file, then the size will change.

There you go! You have the basic structure for organizing files on a website. As you create more html files, you simply add those to the directory. You also, if you want, can create more subdirectories in case you have a lot of html files. Actually, you can create any subdirectory you want to hold different types of files. You can probably guess what type of files go in the css, images, and js subdirectories?

Getting a good handle on organizing files for a website is very important for making your life easier.