Fabled.day

contents

File Structuring and Planning

I was recently on Discord discussing neocities, and overheard someone emphatically insist that one ought never use subfolders when keeping a (static, I suppose?) site.

I’ve worked without subfolders extensively before, though, mostly back in the Before Times. Folders exist as part of a site’s infrastructure for a reason. They really do make things easier. Even more recently, it’s absolute chaos without an organizational system. I know that things have changed and we’ve more capable software, too.

Another thing that makes a site much easier? Planning it ahead of time. By that, I mean mapping a site out (roughly), turning that map into a vague approximation of what the system of folders will look like, and maybe even creating what files you can within them.

I get it. Not everyone wants to do this. If your site is extremely small, you might not have a reason for these elaborate organizational plans. If your site is meant to be spontaneous by design, that might be another good reason for not doing this. That’s great. Still, if you do think a little organizational sprinkle would help, I thought I’d share instructions for how I, personally do it, why this has worked for me, and some of the advantages to this method.

This all assumes you’re working within neocities. As of December, 2004, I know that most visitors to this site are neocitizens, though what I’m saying is adaptable to other hosts.

Within the directory where your files are kept, you’ll want to have an index.html file, of course, which will contain your site’s front page. If you’re using a template or something similar, and you’ve uploaded the entire thing, there will be some other random detritus - images, etc. I suggest moving anything that isn’t either the stylesheet (typically called style.css on neocities) or HTML files (mostly just index.html, a 404 page, and maybe a couple others) to a different folder. In most cases, you’ll want to have a designated folder for JavaScript as well as a folder for images.

Whatever folder you use for images might need subfolders depending on how image-heavy your site is. My site has several image subfolders, including one for site decorations, one for buttons linking to other sites, and one for illustrations within articles/essays.

For JavaScript, people will often use more than one file. I do, but I keep them all within the same folder with no subfolders. That’s sufficient for me. Some people indeed do pile all their JavaScript code into one single file, slap the URL (ie <script src="/js/scripts.js"></script> or something) right before the body tag in their template, and continually add to it as alterations must be made. This has advantages if you need to add a new sitewide JavaScript snippet later - you can just append it to the existing file. No fiddling to add it sitewide individually in the HTML.

CSS, though? I try to put it all in one file, with only small tweaks on individual pages as necessary. I guess my sites have never warranted more than one CSS file? I do hope to someday create “dark themes” for some of them, switchable themes, and more, with separate CSS files. For now, I try to stick to one. You might have ways of doing things more suited to your own site. If you do decide to use multiple CSS files, you’ll probably want a separate folder for just for CSS.

If you’ve changed the location of files such as images, scripts, and stylesheets, be sure to change the URLs referencing them within your HTML files and elsewhere.

I myself tend to use the absolute path to most things - this means a forward / prior to, for example /index.html or /images/background.jpg. This contrasts with the relative path, which navigates from the folder the document is in towards the one containing the material it references. You can read more about both methods here. When using an absolute path, my main caveat? If you’re only testing a site with lots of folders on your computer, you may have difficulty previewing.

A / at the beginning of each link signifies that you are searching for the folder/file beginning in your root directly. This works for the web. On your computer, though, the browser gets extremely flummoxed and starts thinking you’re trying to find a file in your computer’s root directory - where it likely isn’t located. This problem will vanish when you upload your site to your webhost, and if you’re tricky enough to use relative paths, shouldn’t be an issue. There are other workarounds I haven’t explored, but maybe you will?

Moving forward, though, you need to make sure those files (especially the HTML) stay organized. Keeping an orderly file structure requires pre-planning, but isn’t difficult. Simply begin, as you might expect, by organizing your content into categories. Most of our sites must be designed to grow given the nature of the internet. Still, you can come up with some broad categories even if your site is general and personal (say, categories like About Section and Hobbies, maybe Art, etc). If your site is focused on a specific subject, though, this is pretty easy.

Write down some of the pages you’d like to have on your site somewhere, like Notepad. Begin categorizing them. Break it down into four to eight topical (or other) categories. I guess more (or fewer) works, but I’ve found four to eight categories works well for me. You may be (as yet) unsure exactly what you’ll be posting in each area. The point is to create the site structure, not fill in all the content just yet.

For example, if your site is about badgers, your categories might look something like this, with the roughly-planned pages listed beneath each:

  • Introduction to Badgers
    • Behavior
    • Species
    • Importance
  • Badgers in the Ecosystem
    • Habitat
    • Diet
    • Conservation
  • History of Badgers
    • The Fur Trade
    • Badgers in Folklore
    • New Badger Discoveries
  • Badger Sightings and Photos
    • My Photos
    • Best Ways to See
    • Identifying Badgers
  • Website Matters
    • Links and Webrings
    • Site Updates
    • About the Webmaster

Create a folder for each category within the root directory. You’ll put all content for that category within the folder, of course. I wouldn’t plan to have more than ten HTML files per folder - the above example presumes much fewer. So, unless you plan for an extremely large site, I wouldn’t worry about creating folders within the folders.

With all of the above in mind, we end up with a (planned) folder structure something like the following, when we consider our Awesome Badger Site example…

  • /intro/
  • /ecosystem/
  • /history/
  • /sightings/
  • /site/
  • /images/
  • /js/

This allows you to make a rudimentary plan for where each file will fit within your site structure. For example, you’ll probably put a page called folklore.html (eventually) within the folder /history/. You do not need to have all of these files written, prepared, or uploaded to begin with, though. You just need a rough idea of what HTML pages you’ll eventually upload, and where they’ll go within the site’s folder structure. The “rough idea” part may change, but having it in mind helps immensely.

This should allow for expansion, too - so keep that in mind. A good site needs at least some regular updates. Make sure your file structure will grow with your site. I had a huge problem with this on an occult site I run, actually. I had initially planned it to be much smaller, and didn’t prepare a good file structure for it. Going back and fixing things was a bit of a headache. So, keep site expansions in mind. Make sure your categories (folders) aren’t too broad or too narrow, for example.

Now that you’ve got something like an idea of the folder structure, jot down what the file structure itself (HTML and such) might become.

  • /intro/behavior.html
  • /intro/species.html
  • /intro/importance
  • /ecosystem/habitat.html
  • /ecosystem/diet.html
  • /ecosystem/conservation.html
  • /history/furtrade.html
  • /history/folklore.html
  • /history/discoveries.html
  • /sightings/photos.html
  • /sightings/waystosee.html
  • /sightings/identifying.html
  • /site/updates.html
  • /site/about.html
  • /images/
  • /js/
  • /style.css
  • /not_found.html
  • /index.html

You might go about things differently. This might involve breaking things down even more - maybe instead of folklore.html, it’ll be /folklore/, with pages for each culture’s folklore about badgers all linked to the index. Either way, you need a rough approximation of where your files will eventually be; this allows you to write your content and plan for where your (inline and menu) links will point.

This allows you to create ghost links, essentially. You can insert links in your menu and content to pages that either haven’t been created yet, or to which you’ve only uploaded a small placeholder. People do this all the time anyways, but this will make it much easier while also keeping your files organized.

Let’s say you’re writing the page about how to find badgers (/sightings/waystosee.html) and want to link to your bio (to show that you’ve been spotting badgers for years). You can insert a link to a page whether or not that that page exists. Then when it’s uploaded later, the link is already in place and ready to go.

This method - creating a file structure and developing a basic content structure before beginning work - has helped me immensely with creating elaborate, large sites. It may be unnecessary for smaller sites, but it’s worth considering if you expect your site will have more than a few topical sections.

Once you’ve decided how, or if, you’ll organize the folders within your site, you’ll obviously turn your attention to content. If you haven’t done so, you could start turning your template - either one you made yourself or ethically snagged - into a template (lol) and creating a table of contents.

↑