How do you prefer to keep your site organized (or not)

[Nightdrift]

Now here is a topic near and dear to me because I am quite bad at organization in general. I am curious to hear other people's thoughts/experiences on how they like to organize their website files, in part to get some ideas for organizing my own pages (or encouragement that the only method to madness is to fall even deeper into the madness).

For context, I have been building my first site on Neocities, and have been trying to keep things reasonably organized...but even with the conscious effort, it is kind of a hydra LOL. The more I build, the more pages I want to add, and the more I realize "this could get messy really fast ._.". While I think I am making the best of what I currently can with my limited knowledge, it is kind of intimidating to watch the pages rack up. I would be lying if I said I wasn't a little concerned about the longevity of my site and sanity if I begin to struggle with slogging through the many pages I have dreamed up in my head.

With all this said, how are folks' experiences with building sprawling sites? Do you like to keep folders for specific things? Do you prefer to name each page in a more logical manner with numbers or straightforward descriptors, or is it more amusing to give your pages esoteric file names? Do you ever struggle to keep things consistent, or do you have your own method to keeping track of things? Or maybe if you did struggle with site organization at one point, was there any turning point to helping you figure out a methodology that worked for you? Should I just embrace the madness? Any other thoughts to the other many questions I can't think of off the top of my head, but probably have anyhow? These ears are wide open to receive any opinions or ideas on the matter of site organization and maintenance.

[Melooon]

=== Moved to website discussion (I think it fits here more? Maybe not we can move it back later :grin:smile: ===

Firstly I just wanted to say thanks for this great topic, you've done a few good posts on the forum, and its really appreciated. Getting the momentum going on a new forum is never easy, so thank you!

So this is a good topic because I think its something every new site faces at some point. I used to be obsessed with super organized sites and keeping everything in a particular structure, but not so much these days

I think there are a few starter questions: How big is your site? (under 10, or dozens, or hundreds of pages?) How are pages connected? (Do you use frames, or JavaScript loading, or is each page stand alone?) Does your site have a universal style/layout or is it many different layouts?

I think once you answer all those questions you're in a better place to make a choice.

For me the answers are: dozens, pages are connected with frames, and I have no consistent layout or style. SO that leads me to my site organization.

I have a base directory that contains major html files, like my index, home, about page etc. It also has what I call universal folders for images, audio, styles etc. Universal assets are things that I might use anywhere on my site, on any page. So if I put an image in the universal images folder, I know I can always do "/images/myimage.gif".

After that I have sub folders that act as mini sites, for example /shop/, those folders have their own index.html and their own pages and some will have their own images and audio folders, the difference is that in theory, an image in the shop folder should only ever be used on pages in the shop folder, there should never be cross connection between folders and if there is I move the file to the universal folder.

Visual example:


Pros & Cons:
Iv used this system for about 5 years and it works pretty well for my kind of site, but it would not work for a site with a consistent layout.
Sometimes files do get cross connected and neocities does not make it easy to move files.
It gets confusing having multiple files called index.html

Tips:
All pages do refrence a universal "common.css", this means in the event I do need to restyle something across the entire site (like the font) or share css animations, its easy to do that.


Id love to hear back form people who have differently structured sites though, particularly ones like cinni.net that must fit into a very ridged structure, or ones that are loading in content over javascript (not something I recommend but i understand why people do it!). Are you planning to do a numbered blog type site? That might call for more numbered and file naming, but again it depends on the kind of content your thinking about.

[Obspogon]

I do something similar; keeping all my files in folders organized by type. A folder for pictures, a folder for gifs, a folder for buttons, and a folder for scripts, and so on. I keep most of my HTML pages in the website root unless I want to group related pages together, like my jQuery fragments and my curation lists. I also keep my RSS feed, CSS, and favicon in the root for easy access.

[cinni]

this is the kinda thing i think about too!! i definitely struggle with keeping my files organized, specially as my site grew over the years, my files are only somewhat maintained, hahaha.. for example, in the beginning i didnt really care if i had images in my "main" directory nor keeping my images organized in any way, but when my toybox/web graphics page grew, i tried to categorize them, but moving files in neocities is a pain and i end up with broken links because i have no way of keeping track, so sometimes i just leave the delinquent image where they are :-p

here's an example of my files.. plz excuse the mess, i wasn't expecting visitors :-)



this is my main directory, so pages that are immediately available on my site (like about me, art, links, etc) are usually in here, and if a part of the site grows where i need sub-pages, i tend to make a new folder for it, like for all my shrines, toybox pages, link directory, etc!

here's an example of my images folder, where i try to dump most of my images in there.. but again, they're just loosely categorized..haha. i don't always know the best place for an image and if i make too many folders i can't remember what's in what :-( (like right now.. eeek)



IF i could start from scratch and re-do all my files, i would, but oh to have that free time.. LOL

my main site/index page uses iframes, so for the styling i have one .css for the index page, and a separate css file for all the pages that are nested within the iframe.. i think one reason i did that is my index page uses media queries, which totally messes up whatever is in the iframe lol so i keep it separate b/c it's a pain to update all those pages one by one. NOT to mention i have a bunch of side pages that have their own layouts... if im lazy or if it's just one page i just keep the styling in some <style> tags in the html file and call it a day.. i have a lot of half-started pages haha.

[Nightdrift]

Thank you all for the incredibly thoughtful responses! This is a lot of solid food for thought. Also I have to say...it is reassuring to know that breaking links is kind of universal on Neocities LOL... The visual examples are also very helpful, it is encouraging to know that hey! Sometimes things are going to look complicated, even with a system in place.

Right now my pages are all standalones with a similar format/template -- mostly out of laziness, I have been copying the navbar onto every single page I build, but that is something I do want to change up ASAP. I am definitely torn between frames and javascript; I've seen a lot of really good arguments in favor for both. Currently very slightly leaning towards frames, but I think I would like to poke around at js at some point just for the heck of it. That said, I am sure the frames vs javascript debate is a whole topic of its own XD

Based on all of y'all's responses, it sounds like subfolders for additional pages sounds like something I will definitely have to try out! As far as personal web design philosophy (lol) goes, I've always been drawn towards the idea of "getting lost in cyberspace" for hours on end, so being able to tunnel further and further through a series of twisting and winding pages is very appealing and important to me. In that regard, while I am only currently at the (very few) dozens of pages count, I do think I want to try be more organized down the line if I keep designing in this manner.

If anyone else has thoughts I would love to hear them whenever! But for the time being, again, thanks all for the really great responses.

_{[EDIT: Also lol, so thrilled I was with these messsages I forgot I did want to respond to a small bit of what you mentioned, @Melooon: forums are very near and dear to me, especially as someone who isn't so savvy with keeping up with virtual chatrooms these days, so I'm rootin for this place to take off!}

[InvisibleUp]

There's a really good chapter from a book on web design I used to have.

, if you want to give it a read.

[Neonriser]

I use Visual Studio Code to make my website. I also use plugins such as Prettier to make my files' code more organized and human-readable. I put all of my dreams in the 'dreams' folder, and all of the 88x31 buttons on the 'buttons' folder.

[fLaMEd]

I love a tidily organised project folder

For most projects I have a basic structure like this:

Code

project/
/css/
/img/
/js/
index.html

Then add to it as the project needs...

My current structure for flamedfury.com looks like this, fairly standard structure for an 11ty project.

Code

flamedfury.com/
|-- _data
|-- _includes
| |--layouts
| |--partials
|-- _generate
|-- css
|-- guides
|-- img
| |--buttons
| |--badges
|-- fonts
|-- about
|-- updates
|-- js
|index.md

Interesting seeing how everyone else organises their projects

[m15o]

There's a saying that "There are only two hard things in Computer Science: cache invalidation and naming things.", and even though website structure isn't "naming", it can be really complicated too!

My approach would be to start as simple as possible. Have every files at the root. It might look ugly, but if your site is only a few pages, it's perfectly fine. As your site grows, section gets added, keep adding pages to root. At some point you will reach a problem: perhaps two pages would have the same name. Or maybe a few files are really only meant to be seen together. Or you realize that there's a logical section you want to add to your site, one that is materialized in the url... then that's the trigger that you need a new folder. Just refactor it and keep going. If you follow that, the structure will emerge naturally.

[brisray]

When your site is fairly small you can organize it how you want but as it grows you really do need to organize things. My site is split into sections which are all put in separate folders each with it's own index page. Each folder has a folder for images and another for the section menu files and I make new ones for documents and so on as I need them.

Site-wide files like CSS and JS all go into a common folder in the site root.

Honestly, the sooner you can decide on how you want the files organized the better. Your first redesign and rewrite are going to be a nightmare if you don't. I know!

The other headache I've had is making the site menus. How you organize all the links partly depends on the way your site is organized. Is it wide and flat (lots of sections, with just a few pages in each) or narrow and deep (not many sections but lots of pages in them)? Is it worth putting breadcrumbs (Home > Section > Page) on at least some pages. Is it worth putting Previous and Next links on them? You're trying to help visitors around your site and most are lazy!

The design is up to you. It's your site and if it looks good to you then it IS good.

[creaturefeature]

i have a file folder just for images, and then folder for site sections.

like for example I my journal has a folder with several page of each subsection.

but then there my library section where i have folder with all the page for each section, and then outside of that each section has folder.

All my biology articles would go on the biology folder and so forth.

the only ones who are not on folders are the main site navigation pages (about page, index, links etc..)

It helps me keep things rganized.

[debleb]

pages and styles are the only thing i keep in the root of my directories, everything else has its own folder. i have a folder for images with subfolders for art, link buttons, decorative buttons/blinkies/stamps, and a few for other decorative elements, a folder for fonts, and also one for music.

[Skykristal]

Organized but unorganized at the same time. (images are the thing that is kinda all over the place, everything else is pretty organized) I have everything in folders because I wanted to get rid of the .html at the end of an url. it was a thrown in my eye.

And I just have way too many pages to keep them all on the main board thing. I only edit my files on neocities, everything else is too much extra work and annoying to me.. and basically does the same thing so I don't see a reason to use software locally.
But I do code on codepen, because of live preview.

[RodFireProductions]

I usually stick with the same base folder structure and then add additional folders when needed. For example, I might had a folder to the root for a certain category of pages, or I'll add additional folders to the /img/ folder. I try to keep all assets in the /src/ folder, with the exception of sometimes having the favicon in the root.

Code

src/
-- img/
-- css/
-- js/
index.html

Of course, if I'm using some fort of static site generator then the folder structure will change to work with that but I still try to stay consistent.

[Memory]

All HTML files in one folder. My project didn't overscale yet. It is quite useful when linking to another HTML page, to have it all together.

Also full DOS stoneage compatibility with short filenames (up to 8 characters). Also .HTM instead of .HTML. Sometimes, iconic and funny names happen through this limitation, but it can get rather confusing.

If you look close in my folder, you'll see some links to some programs like Netscape Navigator, Opera and Notepad++. If I drag one HTML file onto the specific program, it opens the file with that program.