what is the structure of your site?

ribose · February 17, 2024, 11:25pm

how do you visualize your site’s structure, if at all? do you think about it figuratively (“my site is a room / garden / labyrinth / tree / book / etc”) or more literally? is it orderly or chaotic? was the structure planned from the beginning or has it been pieced together as you go along?

i’ll start! my goal is to have my site become a sprawling labyrinth that rewards exploration, so i was looking for ways to visualize just how labyrinthine it is. first, i used this flowchart making tool to make a map of the pages i have so far and the links between them.

… not very labyrinthine.

it was eye opening to see just how flat the structure is! it was worth putting this together, because now it’s clear to me which sections of my site need more depth. my goal for this year is to make more pages in the 4th row (orange)!

after making the map above by hand, i was looking for ways to automatically visualize site structure and came across this site graph script. after crawling my site, it generated this!

blue = my pages
orange = external links

much more web-like! hooray!

it overestimates the number of pages because it counts things like ribo.zone/bugs/ and ribo.zone/bugs/index.html as two separate pages, but it’s still to cool to see my site laid out this way. this is just a screenshot, but the actual output is an .html file that’s interactive! you can select nodes to highlight connections and you can drag things around. very fun and highly recommended.

CooperationIsKey · February 18, 2024, 12:37am

When I redid my site recently to attempt to make it more responsive, I also redid the file structure to some extent to make it easier to find stuff while working on it. I have no clue how to use that script to make a graph of my site (that is really cool though!) but I do make an effort to be organized. :)

sanguineroyal · February 18, 2024, 1:25am

Oooooh, I hadn’t thought to lay out my site like this, but it makes me want to try mapping out my site! I think it’d help with visualization of file structure a lot…

versipellis · February 18, 2024, 2:38am

i have a loose categorization system going on with some of the pages on my site— the “extras” link takes you to a page with links to the other pages that fit into that category. i do this because i like to not have a ton of navigation links cluttering up the sidebar i love exploring a chaotic or cluttered site, but i don’t like maintaining it for myself

ttaxyy · February 18, 2024, 4:17am

seeing your room as a room/labyrinth/garden sounds like so much fun! I wanted to hide some links here and there, but I feel like I still need to improve my base pages before doing something more elaborate. I guess my answer is: i just try to structure it in a way that it makes sense?

jackdaw · February 18, 2024, 6:08am

That makes your site look like fireworks, which is pretty awesome.

I think if I were trying to visualize my site it’d be something like an older library or a used book store, where there are several different rooms that each have their own selection of things in them.

arevakhach · February 18, 2024, 9:01am

I’m surprised you’re going for the labyrinth structure. The more I webdev, the more I feel the need to make things more obvious, more straightforward. My thoughts on it are: “Wow, this person has already made the effort to click on my site (not InstaSnapBookTok), the least I can do is serve them on a silver platter.” Like, I get easter eggs, and I get how they’re fun, but (I feel) unless a site is deliberately that kind-of activity, it’s very unlikely that hidden-away things will ever be seen. This mindset is something I’m also working on with my hyperlinking: “If someone goes through the trouble of clicking something I’ve linked, it should be worthwhile, not like a footnote, I think.”

Anyways, just my thoughts! I have a ton others on site structure. Maybe I’ll share more at a later point.

jayeless · February 18, 2024, 12:06pm

I think I think of my site as a house, that I keep haphazardly tacking new extensions onto!

There are probably a few main rooms: there’s a blog (and also stuff like link posts, which are not really part of the blog, but are listed alongside blog posts in my archive?), and there’s my book reviews, and then there’s my personal wiki, which is the fun sprawling mess of a hobby room. I try to use tags to link related content in different categories together (and in fact my tag pages are kind of like stub wiki pages, with a little description and links to relevant posts). But then there are other rooms I tack on in an excited rush one day, and promptly neglect. Like the one for recipes. Or the time I made a whole edition of my site in the auxlang Ido

One thing I would like my site to have is a better way to find the “best stuff”. In the meantime, though, I guess if my site is a house, it’s not going to be winning any interior design awards, but hopefully it’s got a bit of kooky eclectic charm to it, structure-wise. I like the idea of a site that rewards exploration!

solaria · February 18, 2024, 1:00pm

My site files are Very disorganized ^^; If I were to start from scratch I would definitely organize them better, but when I started neocities I didn’t know much about file structure nor did I plan to have a website with more than just a few pages. Ideally I’d like to reorganize them, but that would require a lot of work and a lot of editing my file paths in my HTML ^^;

As for the user interface I try to make most things accessible on my homepage via a link, especially on my left sidebar so its immediately accessible to mobile users, but in order to save space I have many expandable detail elements holding related links. On my right sidebar I have some sections featuring my guides and other resources, so they are immediately visible, especially to computer users.

I’d like to try out the script for the visualization, but even after reading the creators blog post I’m still a little confused ^^; (like where and how to download the script and its dependency scripts)

eladnarra · February 18, 2024, 2:23pm

My site isn’t up yet, but I’ve been thinking about its structure a lot as I design it.

I love the less traditional, interlinked organization that some folks end up with, but I’m not sure my brain works that way. So for my own site I think I’ll mostly just have some sections (projects, blog, etc) with landing pages for each that link out to individual pages in that section. I do have some plans for some CSS and JavaScript experiments and such, but I think I’ll still collect them under a “fun pages” section to more easily find them.

ribose · February 18, 2024, 4:08pm

i downloaded (and ran) the script from the command line! there’s a little bit of setup required if you haven’t done that before. getting site-graph to run was my first time doing this, so i have all the steps i followed in my recent browser and command history.

first, you’ll need to install Git. this is the version control system that GitHub, GitLab, and GitTea are based on. here’s the Git installation guide.
follow the steps on the first time Git setup page. i didn’t bother with --system or --global variables, so don’t worry to much about that. the key sections are ‘Your Identity’ and ‘Your Editor’.
now, you can download site-graph by pasting git clone https://github.com/tomlinsonk/site-graph.git into the command prompt and hitting Enter
you may or may not be able to run it though! it’s a python script, so you’ll also need to have python installed. you can check by typing python --version and hitting Enter. if you don’t have it installed (i didn’t), you can download python here.
enter the following lines into the command prompt one at a time to download the dependencies.
- cd site-graph
- pip3 install -r requirements.txt
now you have everything you need! type python3 site_graph.py ***YOUR SITE URL HERE*** and it’ll crawl all the links on your pages, following internal links and crawling those too. there should be a folder inside your user folder called ‘site-graph’ and that’s where you’ll find the output: site.html

to run it again, you just have to type python3 site_graph.py ***OTHER SITE URL***.
- this will overwrite the existing site.html!
if you’ve closed the terminal since the last time you’ve run it, you’ll probably have to use cd site-graph to get back to the right directory before running it again.

i’m still a beginner (someone jump in if i’m saying something incorrect!) but i think it was worth the setup because now i can easily download and run other cool projects i find on github.

@CooperationIsKey

unfortunately the script isn’t able to distinguish between internal and external links on your site because of the / you include at the beginning of your internal links. i can’t get it to crawl your site, sorry!

@solaria

this is the graph it generated from your site! the network of internal links at the center is impressive; you have so many pages! also, i didn’t mention it in the original post (because my site doesn’t have many), but green nodes are non-html files you’ve linked to.

i see my site as more of an art project than a source of information. if it was the latter, i’d probably put more effort into making it straightforward. though i try not to be totally hostile! i have a link to a site map on my index page to make navigating easier for people that don’t want to play along with my point and click adventure gimmick… but i do leave pages out of the map at my discretion.

i treat my site like an extension of myself, so i don’t want everything to be obvious. my thoughts are: “i’m baring my soul here; the least a visitor can do is click around!”

you’d be surprised by people’s willingness to explore! my toybox page is arguably the most hidden of my site’s pages so far, but my partner’s brother (not a website guy) ended up there and talked to me about it at a family gathering. (context: i link to my site in my instagram bio, so people i know IRL are welcome to look at it. this was fun, not scary, to me!)

ooooh, this is a tricky one! what you see as the best part of your site may be different from what any given visitor thinks is the best! one way i’ve seen this idea addressed is this site map, which has certain pages marked as “author’s pick”.

CooperationIsKey · February 18, 2024, 6:14pm

Oh weird, I was always taught to use that slash as part of ~proper site coding~ so yeah, literally all of my internal links have it. Oh well. Thanks for all the info and for trying! Hopefully I can use other neat github stuff in the future though with this info.

solaria · February 18, 2024, 9:04pm

oh my gosh thank you so much for both the script help and going ahead and plugging my url in! the clump in the upper right corner is interesting!

ribose · February 18, 2024, 11:20pm

the clump in the upper right is your pixel page! it has the error i mentioned where it’s counting /pixel/ and /pixel as two different pages so there’s two nodes at the center that are fighting with each other…

Jay · February 19, 2024, 3:02am

I have my site pages laid out in a sort of nested tree style on my sitemap. All the important stuff is easy to find, but because of how I set up the collection pages it gets really really deep haha. I want to make a graph so badly!!! But I haven’t had the time to set up that cmd stuff (thank you btw @ribose I’m totally gonna use your tutorial!!!) And doing a manual flowchart would be a nightmare… 320 pages and counting

Melvian · February 19, 2024, 6:25am

Over the years I’ve had multiple different personal websites throughout my life on the Internet, and that’s given me the chance to try out different ways of structuring my website. Something that I’ve come to realize, and something that may be potentially obvious, is that the structure of your personal site is something very deeply personal. Certain structures are more ideally suited to certain personalities or certain ways of working. So if someone is to be introduced to the personal web they shouldn’t just be introduced to “blogs” but a variety of different ways of running a personal site.

In my case, I don’t run a traditional blog. I have tried many times, and I often found myself speaking too soon about topics that I quickly lose interest in. The strictly chronological, minimal editing nature of blogs don’t fit at all with the way I think, where I tend to think very deeply about bigger ideas for long periods of time. So instead I have a curated writings section that caters to this aspect. They’re not dated, and I continually rework them as I make new discoveries.

In addition to this I have a section where all my animations go. Compiling each page takes quite a while, and despite my use of Jekyll, it’s still a pretty manual process. Along with writing and editing the process videos, I encode VP9 and fallback H.264 versions of all the videos and make the thumbnails for them, and crop and encode the thumbnail in the gallery. But it’s absolutely worth it.

All changes I make to the site will be announced in the updates section on a monthly basis or even less frequent. One of the biggest strengths of having a blog is because of its chronological nature, it’s easy to subscribe through an RSS or Atom feed and get updates instantly, and a lot of personal web users depend on this. The updates section is my way of taking advantage of this subscription ability as someone who doesn’t have a traditional blog. It also gives me extra flexibility; because it’s not tied to any one particular topic, I can change the rest of the website and announce such changes, as long as I don’t change the URL of the feed itself.

I have only one CSS stylesheet for the whole website, and, apart from the webrings, no JavaScript. Honestly, it’s all I need! I do sometimes enjoy the crazy aesthetics of many personal websites, but this super minimal aesthetic, where the primary element is my custom typeface, is what personally fits me best.

Unfortunately I don’t have much to show so there aren’t very many sections, but in the future I plan on adding a characters section, structured similarly to the animations section but contains extensive, carefully built references for each character and the process behind designing them. And I’ll have a projects section as well for any programming projects I end up releasing.

jackdaw · February 19, 2024, 7:22am

Yes, I do the same thing! I’m not going to manually blog but I can put the article tags around my updates and generate a feed that way.

npw · February 20, 2024, 4:05pm

Semi-related, but I recently made a sitemap for my website, following a suggestion of one of y’all.

arevakhach · February 21, 2024, 9:03am

I think that’s a great mindset, actually. Here’s a post I wrote a year ago on this very dichotomy, of convenient vs. unconventional site navigation:

In my opinion, in my “perfect world”, a site could be navigated in any way the visitor wishes.

Thematically (by Category) ~ ideally in the manner / order the webmasters considers most valuable / important.

Via Sitemap

With search ~ And good search, mind you. Ideally, having indexed every word on the site.

Through sorting ~ via date, via last modified, via page title, etc.

By tags & “contributors”

Those are the ways that come to mind, and I believe are most common. Each with their own pros and cons. But if you have them all, I guess the cons don’t really matter. Obviously, that is quite difficult and certainly asking too much of (some) hobbyist web developers.

I organize my content thematically (by category). I acknowledge that it makes it difficult for the visitor to find what they’re looking for; to easily reach the things that interest them. But I see my site as art. I will organize it in a manner that best reflects that art. Dear visitor, finding the things you are looking for is important, but so is finding the things you are not.

I take great pleasure in navigating personal web pages. I can only go through so many in a day; I try my best to dedicate the time necessary to have felt that I properly explored another’s invested time and effort, their world, their message. Perhaps there is some value in encouraging people to take the time to slow down, in addition to improving navigation.

To any that perhaps find themselves consumed in this conundrum: your site is probably more important than its navigation, don’t let this stop or delay you from making it. Time is so valuable.

By me, on the YesterWeb Forums, Jan. 25th, 2023

memo · February 27, 2024, 10:31pm

One navigation suggestion for respecting your visitors’ time: put hidden on links to under-construction or not-yet-existing pages. This is more of an issue for hand-coded pages than it is for SSGs which support drafts.