My Neocities Website
This microsite is an ongoing hobby for me. Let’s find out how much I can cram in here before I exceed neocities’ free 1GB limit.
I will try to find a balance, between saving space by injecting re-usable elements with JavaScript, and having duplicate-but-essential elements in plain HTML.
I know my way around an HTML, CSS and JavaScript or two, so I’ve got plenty of ways to experiment.
I have also switched to Pelican, for generating these pages.
The first upload of this idea, before I was even using templates, had long page content broken up with “read more” links, as a curiosity to see if i could make them and find uses for them. Now that I’m doing a bit more with this place, they’d just get in the way, but the knowledge from making them, will course in my veins forever.
Storage and Filesize
I might try just using small, compressed images. Preferably reuse them in multiple pages or contexts, instead of using new ones.
Make the bare essentials of each page with HTML. Anything non-essential that has to repeat across every page gets added by a JavaScript file instead.
The barebones, HTML-only version of these pages:
-
The unique content of that page, such as an article, and the visible metadata for that content, such as the creation and modification dates, and the author.
- Preferably with as few container, or wrapper elements, or repeated attributes, as possible, to save space across hunreds of thousands of pages. Prefer, putting your content directly in the
<body>element, rather than a<div>inside the<body>.
- Preferably with as few container, or wrapper elements, or repeated attributes, as possible, to save space across hunreds of thousands of pages. Prefer, putting your content directly in the
-
A single basic site navigation link, that just goes to a different page just for site navigation. Can be to a home page, index, sitemap, etc.
- The invisible metadata for that page, such as the language
lang="??"attribute, in the<html>root tag of the page’s HTML code. - The important invisible metadata for the entire site, such as linked
<script>or<link rel="stylesheet">files.
Afterwards, I can extend this basic structure, with a global javascript file that I’ll <link> to on every page.
That JavaScript can be used to repeat extra things across pages that I don’t need to be in the actual HTML code of every single page, such as:
- A favicon.
- More complex site navigation, with more links, submenus, theme settings, icons, etc, a "skip nav" jump link for low-vision, blind, non-mouse or Tab-only users.
- A more complex page footer.
You could even make a sidebar with JS, with all the usual neat-to-annoying sidebar content. It would only be visible to people with JS on, and it would only take up storage space once on your site.
In my customiseable Pelican site generator, I also have extras in pure HTML, that I can choose to generate for certain pages, such as the home or index page.
Images
Most of my art is visual, and most of my projects are driven by visuals. Hosting such files elsewhere is always an option, but if I want to try keeping everything hosted here, possibly at unde 1GB, I have a few options.
- I should use small, compressed images.
- I should preferably make the images reusable for different contexts. Character portraits, or characters doing something common. I shouldn’t overuse them either, however, otherwise this place would become a festival of reaction images.
- I can use
<SVG>(Scaleable Vector Graphics) for certain edge cases, such as explaining the layout of an app, or for a diagram, using just lines and boxes, or taking other images and compositing them together, in a little scene or something.