How do yall organize your site files?

Webweaving
1

Basically what the title says. How do you organize your site files? Is there a standard way to do it? My site is the only experience I have with coding and web development (and actually organizing my files…) so I’d love to have some other input. Let me know! :nerd:

2

this is a great question! i don’t want to discourage anyone else from answering since folks might be different/more specific, but @fLaMEd wrote an awesome guide about file structure that you might like!

as for me, i put all of my main site files in the / folder (including my style.css), and separate subdirectories off the root folder based on topic/need rather than having a catch-all imgs folder. my brain might be weird, but it seems organized to me! x) there’s definitely better ways than mine, though, that look tidier!

3

Mine looks about as follows:

  • /
    • images
      • shared image.png
    • styles
      • shared style.css
    • scripts
      • shared script.js
    • page category
      • page
        • index.html
        • page specific image.png
        • page specifc script that was too big to embed on the page itself.js
4

I do something similar! I don’t serate by file type, but by group of pages. It just doesn’t make sense to me to separate the images all together, away from their context. If I know a page will have a number of images I’ll make a folder for that page and put all the files for that page in that folder (html, js, css, images, etc) if I know a page is just going to be a basic HTML file with text and CSS I’ll honestly just leave it in the root folder (I often just put the css in the style element rather than make a stylesheet for every page)

2 Likes
5

I wrote a bit about this on my website

2 Likes
6

Wow that is a very helpful resource!! Gonna save this for my own reference ^^ you laid everything out clear enough that I feel like I can approach redoing how I build my website

1 Like
7

I’ve been thinking about this a lot since I’ve been redoing my website’s file structure lately :eyes:

I have all the pages seen in my navbar in the root, branching off from there in the way Xandra and Solaria described. “index_images”, “aboutme_images”, etc. Any extra code snippets like javascript for that specific page go in there, too.

Most of my shrine pages are in a Shrines folder, with subfolders for the images/stylesheets/etc for each one. I’m trying really hard to be tidy about it now because the way I did it the first time around has caused nothing but issues lmao.

All my non-navbar pages were in a folder called “/click/”, with like… SOME of them having subfolders, but only if there were a nondescript ‘too many’ images to keep in the folder itself. all my pokemon pics were in one folder, all my DOWNSCALED pokemon pics were in another folder, the page links to each pokemon page was in a folder completely disconnected, with names that made no sense and kept confusing me.

It is taking a very long time to redo all of this ^^"

1 Like
8

My structure is imposed by the file based nature of the CMS i’m using but I find that a big plus. Everything has a tight correlation, file names have to be consistent for the whole system to work.

a post.txt will load a post.php template, will also look for a post.css stylesheet and a post.js script and so on.

I find that to be incredibly useful to keep everything organised.

9

And somewhat related, this is a neat way to keep a file system organised https://johnnydecimal.com

1 Like
10

I have a catch-all assets folder for every static file for my website, including CSS, JavaScript, image, font, and so on, with many subfolders categorising the static files.

The reason for this setup is to allow me to configure Eleventy (the static site generator I am using) to simply copy all files from one folder (in this case the assets folder) when it builds my website, by using its Passthrough File Copy feature, so I do not need to worry about missing static files for my website just because I forgot or neglected to tell Eleventy which other folders it needed to copy files from.

This also saves me from needing to add more lines of code to Eleventy’s configuration file, so it would copy all the static file folders from different places.

1 Like
11

WOW! I have been using this a lot lately and it is helping me soooo much. I have discovered that most of the problems I was having weren’t from my code as much as it was my organization and way of doing things. A revelation, really!!! :pixelcat2:

And I haven’t really delved into the other tips left here too!

2 Likes