![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
enchantedsleeperThis is a list that I originally put together for the 2024 Snowflake Challenge (as the name shows :D), but I've decided to turn it into a rolling list of resources, guides and tutorials that I've found helpful in my small/indie web journey to create a personal fanworks archive.
I rely heavily on how-to guides for making my site (and I like to save cool/helpful things I find), so there'll always be plenty to add to this list! I've added each one with some notes about how I found or used it, which should hopefully be helpful for anyone consulting these sites.
I've added headings to break up the list and also make it easier to find a specific resource, though the categorisation may be a little idiosyncratic xD
This guide is specific to Neocities, so I didn't really use it for reference myself, but it's a nice step-by-step for anyone who might feel intimidated by the prospect of creating a site from scratch. You can't get simpler than this! Also, there are lots of site examples and interesting discussions in the comments.
IndieWeb 101 by fLaMEd
This post was made as part of 32-Bit Cafe's August Code Jam and is a cool primer on the IndieWeb (it also differentiates between the IndieWeb and Independent Web, something I haven't come across before).
It contains some suggestions for things that people can do to get started on the IndieWeb, focusing primarily on marking up content with microformats2 and making an h-card, which is a sort of integrated contact card for your website, and an h-entry, which marks up individual posts or articles. It also touches briefly on webmentions. This was my first brush with all of these concepts, and I haven't done any of these things myself, but I felt like it was a resource worth passing on.
Okay, it might just be me that was unclear on this for ages but never found out the answer, but I always wondered why
This MDN doc does a good job of explaining what
Fixing issues with a CSS stylesheet on Stack Overflow
This Stack Overflow question saved my life when I was going nuts wondering what the problem was with my CSS stylesheet given that it was doing absolutely nothing. Specifically, the answer that begins, If all your syntax seems fine... helped me to get my browser to reflect the updated stylesheet instead of the cached version, but there are lots of other options in here to try if you are having stylesheet problems.
An AO3-style Neocities layout by Anonymous
This one came from Fail Fandom Anon (hence the name "nonny projects") in a discussion about creating independent fanworks archives, and is a layout designed to mimic AO3 on Neocities (or any indie website) and accomplish tag-based filtering. You can use Inspect (right-click on desktop) to check out the underlying code.
There's also a vertigo-friendly version that removes the dizzying transitions when filtering by tags. Anyone who's interested in the original discussion can check it out here. I'm not sure how polished or finalised the template is, but it's pretty cool!
One of the key things I wanted my site to have was expandable sections for fic, notes, etc. but most tutorials about how to accomplish this rely on JavaScript. I'm not familiar with JS, though, and getting to grips with it for this one thing felt like it would take too long, so I hunted desperately for an HTML workaround.
This was the first one I found, and I originally implemented it on my Fanfic & Fan Poetry page, although I recently switched it out for the method below this on the list. It worked pretty well for my needs, but has some drawbacks, such as not being able to open more than one section at a time. Still, it's here if you want to try it out!
Creating a collapsible section with nothing but HTML by Jordan Finneran
This is the current expandable sections setup I have on my Fanfic & Fan Poetry and Meta pages, and it works really well! The only real drawback is not being able to have paragraph breaks in your "summary" section, so if I want both the fandom name and description to be visible, the description has to go in the <summary> tags. The cool icon rotation also doesn't always work depending on how you set this up, but that's an optional bonus.
How to Make a Div Vertically Scrollable by w3docs
I used this to make the scrollable Site Updates section on my site homepage. It's very simple to do once you have the instructions!
light/dark mode in html, without CSS (only html) on Stack Overflow
I haven't yet set this up on my site, but the very kindtempural suggested this after I mentioned during SWS that I wanted to implement night/dark mode for my fic pages. The solution by Shreyansi Hathi (top rated answer) gives two ways of doing this easily - one using a line of CSS, and the other using only HTML. Perfect for someone like me who only works with those!
Ayano's Neocities comment widget
One of my SWS 'bonus' goals is to implement comments on enchantedsleeper.space.pebbleinalake suggested this widget, which is designed for Neocities but should also work on other static HTML sites! There's a note at the top about how the widget has been affected by a Neocities content security policy update, so bear that in mind if you use Neocities and have a newer account.
Another option for comments is HTML Comment Box, mentioned bytempural, although it offers less database control than something like the widget above.
I rely heavily on how-to guides for making my site (and I like to save cool/helpful things I find), so there'll always be plenty to add to this list! I've added each one with some notes about how I found or used it, which should hopefully be helpful for anyone consulting these sites.
I've added headings to break up the list and also make it easier to find a specific resource, though the categorisation may be a little idiosyncratic xD
General indie web
How To Make Your Own Fanfiction Archive, In Just 10 Easy Steps by melannenThis guide is specific to Neocities, so I didn't really use it for reference myself, but it's a nice step-by-step for anyone who might feel intimidated by the prospect of creating a site from scratch. You can't get simpler than this! Also, there are lots of site examples and interesting discussions in the comments.
IndieWeb 101 by fLaMEd
This post was made as part of 32-Bit Cafe's August Code Jam and is a cool primer on the IndieWeb (it also differentiates between the IndieWeb and Independent Web, something I haven't come across before).
It contains some suggestions for things that people can do to get started on the IndieWeb, focusing primarily on marking up content with microformats2 and making an h-card, which is a sort of integrated contact card for your website, and an h-entry, which marks up individual posts or articles. It also touches briefly on webmentions. This was my first brush with all of these concepts, and I haven't done any of these things myself, but I felt like it was a resource worth passing on.
Design & customisation
<strong>: The Strong Importance element by MDNOkay, it might just be me that was unclear on this for ages but never found out the answer, but I always wondered why
<strong> and <b> HTML tags were different but seemingly accomplished the same thing visually (and ditto <em> and <i>). Learning how they differ (initially from friends, and then looking up a full explanation) changed the way I tag my HTML.This MDN doc does a good job of explaining what
<strong> really does and the difference from <b>; additionally, this article from Techstacker expands a bit more on how to use font weight in CSS to accomplish the same goal.Fixing issues with a CSS stylesheet on Stack Overflow
This Stack Overflow question saved my life when I was going nuts wondering what the problem was with my CSS stylesheet given that it was doing absolutely nothing. Specifically, the answer that begins, If all your syntax seems fine... helped me to get my browser to reflect the updated stylesheet instead of the cached version, but there are lots of other options in here to try if you are having stylesheet problems.
An AO3-style Neocities layout by Anonymous
This one came from Fail Fandom Anon (hence the name "nonny projects") in a discussion about creating independent fanworks archives, and is a layout designed to mimic AO3 on Neocities (or any indie website) and accomplish tag-based filtering. You can use Inspect (right-click on desktop) to check out the underlying code.
There's also a vertigo-friendly version that removes the dizzying transitions when filtering by tags. Anyone who's interested in the original discussion can check it out here. I'm not sure how polished or finalised the template is, but it's pretty cool!
Website features
How to Make a Collapsible List in HTML Without Javascript by wikiHowOne of the key things I wanted my site to have was expandable sections for fic, notes, etc. but most tutorials about how to accomplish this rely on JavaScript. I'm not familiar with JS, though, and getting to grips with it for this one thing felt like it would take too long, so I hunted desperately for an HTML workaround.
This was the first one I found, and I originally implemented it on my Fanfic & Fan Poetry page, although I recently switched it out for the method below this on the list. It worked pretty well for my needs, but has some drawbacks, such as not being able to open more than one section at a time. Still, it's here if you want to try it out!
Creating a collapsible section with nothing but HTML by Jordan Finneran
This is the current expandable sections setup I have on my Fanfic & Fan Poetry and Meta pages, and it works really well! The only real drawback is not being able to have paragraph breaks in your "summary" section, so if I want both the fandom name and description to be visible, the description has to go in the <summary> tags. The cool icon rotation also doesn't always work depending on how you set this up, but that's an optional bonus.
How to Make a Div Vertically Scrollable by w3docs
I used this to make the scrollable Site Updates section on my site homepage. It's very simple to do once you have the instructions!
light/dark mode in html, without CSS (only html) on Stack Overflow
I haven't yet set this up on my site, but the very kind
tempural suggested this after I mentioned during SWS that I wanted to implement night/dark mode for my fic pages. The solution by Shreyansi Hathi (top rated answer) gives two ways of doing this easily - one using a line of CSS, and the other using only HTML. Perfect for someone like me who only works with those!Ayano's Neocities comment widget
One of my SWS 'bonus' goals is to implement comments on enchantedsleeper.space.
pebbleinalake suggested this widget, which is designed for Neocities but should also work on other static HTML sites! There's a note at the top about how the widget has been affected by a Neocities content security policy update, so bear that in mind if you use Neocities and have a newer account. Another option for comments is HTML Comment Box, mentioned by
tempural, although it offers less database control than something like the widget above.Fic formatting
Archiving lots of fanworks that need to be HTML tagged and don't want to do it manually? These resources have you covered!- AOYeet is designed to convert documents downloaded from Google Docs in .zip or .html form into formatted-for-AO3 text, which involves adding HTML tags, so it also works for posting to fic archives! You can download the resulting document as text, or as an HTML file and then open it in Notepad, to grab the formatted fic. The tool explains everything you need to do, and it's fun :D
- The venerable AO3 posting script by Min will also do this for you within Google Docs - create a copy of the scriptified doc (don't request editing access to the main one!) into your GDrive and then paste your fanwork, and this will do all the formatting in HTML for you. Also designed for AO3, also works for personal archives. All the instructions are in the main doc!
Blocking scrapers & web crawlers
I know that it's important for a lot of people to prevent their fanworks from being crawled and subsumed into an AI training dataset - any more than they have been already, that is, sob. Below are a few resources I've bookmarked to that end:- Instructions from Filip W on Mastodon to block OpenAI's GPT Bot (I can't speak for the IP range blocking as that one is a bit beyond me)
- Block the Bots that Feed “AI” Models by Scraping Your Website by Neil Clarke: This blog post contains directions on how to block a whole range of AI scrapers including an additional OpenAI bot, ChatGPT-user; bots from Google and Facebook; and some other AI scrapers. It also talks about ways to modify your robots.txt file for different web hosters and also using firewalls or .htaccess to block scrapers if you feel confident in tackling a more advanced method.
- Google's instructions on Robots meta tags, X-Robots-Tag and data-nosnippet if you want to block your whole site, or certain pages, from being indexed by Google.
Webrings & directories
Bring back webrings! Also including here any directories of fic archives that are being compiled. I don't have many here yet, but maybe I'll be able to add more later...- The Fanfiction Webring: A webring for "Anyone who maintains a small personal or communal fic archive that is under your control", as long as it has some fic posted to it!
- The Pillowfort Webring: A webring for users on Pillowfort who also have indie websites!
- Directory of Fanfic Archives: I was keeping an eye on this one as it looks like setup is still in progress, but there hasn't been any activity since the initial setup post, so maybe it's not active...
- Category:Webring on Fanlore: This is more a reflection of past fannish webrings, but could be useful as a reference? (Or if anyone wanted ideas for revivals! 😂)
Communities
- Fan-Coded on Dreamwidth: A really awesome community for fans to share resources, collaborate on coding projects, and generally help each other out. It was spun off from the Fan Coders Discord server, which I'm not in, but that's likely also of interest!
- Smallweb on Dreamwidth: This is where I'm hosting Small Web September! I'll be linking this resource list there as part of Check-in 2, so it's likely that anyone reading this will have already heard of it, but there it is anyway ;D It's a chill and friendly community for all things small web.
- Neocities on Pillowfort: For anyone who's on PF, this is the main community for small web things! While it's nominally for Neocities, I've found that anything small web-related is welcome there.
- 32-Bit Cafe forums: The forum area for 32-Bit Cafe, itself a wonderful resource and hub for small/indie/personal web lovers, with events, guides and tutorials, and a newsletter.
Fun stuff
- Moth Garden by absol (works best on desktop). I love this adorable generator by absol (who also goes by absoi or absul on some sites) that lets you 'catch' pixel moths in a 'garden' and bring them back to live on your site. I have several on my homepage!
- blinkies.cafe blinkie maker - build a blinkie, a tiny little banner/button for your site that has a little bit of animation, such as sparkles, lights around the edge, some bouncing little guys, etc. Pure 90s web fun!
