![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
enchantedsleeperIn my recent deep fic writer asks post I mentioned that I was embarking on a project to archive all of my created fanworks (no matter how old and cringey) on a personal archive website.
Since I wrote that post, I've spent a good chunk of very fun hours creating and tinkering with the archive site in question, and although I'm far from done, I'm excited enough to share the site so far (enchantedsleeper.space) and write a bit about what creating it has been like. It's going to be on the long side, so buckle in...
I had an idea to make a kind of tech musings site with a little archive of retro "stuff" that my husband and I have hung onto - old gaming consoles, my beloved 1990s Psion - and I'm definitely not ruling that out, because it's still a fun idea, but it was just sort of added to the backburner of "Things I might get around to eventually".
Then I sawmelannen 's how-to guide on creating your own personal fic archive, and I thought "Damn, I want to do that." Partly it was seeing the cute things that other people had done with their own fic archives and reading their enthusiasm towards simple, home-made HTML sites. The other part was that earlier this year, I embarked on a "just for fun" project of making a spreadsheet that listed all of my published fanworks, of any kind (mostly fic, but also fanart, fancomics and fanvids). It was fun tracking down my various works and seeing them all laid out, charting my migration from Fanfiction.net to AO3 and from fandom to fandom.
I've never archived them all in one place - I know AO3 exists to archive things, but I've always hesitated to add some of my oldest, cringiest works to my profile there, preferring to let them sit in obscurity at the bottom of my FF.net author page. But a personal fanworks archive felt like the right place to finally have them all in one place - and the idea of choosing my own categorising and tagging conventions was pleasing.
Does this add up to feeling like I know what I'm doing at all? Well... no xD
Building a very simple, minimalist static webpage is no problem, but when it comes to any slightly more advanced set dressing like making a header or a sidebar or creating sections that expand like I wanted to do on my fanworks listing pages - I had no idea what to do. And obviously, everyone has to learn somehow. But I'm impatient, so I've basically been grabbing what I need from w3schools tutorials and once, a Wikihow tutorial, and modifying bits until it does what I want it to.
You can argue that's a perfectly legitimate way to go about building a site - I mean, I built the Pottermore site in the same way, finding templates that I liked the look of and modifying them. But it does mean than I'm reliant on finding the right tutorial if I want to do a specific thing. I wanted to create expanding sections on my fanworks pages, but the w3schools version of that code was designed for menus, not big chunks of text. Eventually, I found a Wikihow tutorial that did what I wanted it to, albeit in a hacky way - because of the way the code works, only one section can be revealed at a time, and in order to have it not work like that, I expect I'd have to completely change the code.
But I've accepted "hacky and slightly janky" as a natural consequence of coding my own website for the first time in 10 years, and you know what? It doesn't matter! It's not a polished project for work, it's not a professional portfolio, it's my just-for-fun fic website and it doesn't need to be perfect; it just needs to exist.
Confession time: I was initially going to install WordPress and use that to build my site. It felt like a cop-out, but I reasoned that I wanted to spend my time archiving fic, not trying to figure out code; also, I could use WP plugins to do fancy things like add individual comments sections to my fanworks, create tag pages, and do other things that would be a lot more time-consuming or fiddly to do myself with HTML.
Besides, it was just easier, right?
I got as far as installing WordPress on my site and choosing a theme - something that I would normally find pretty fun, but all of the themes were designed for either portfolios or ecommerce websites and screamed Professional™. There was very little that I vibed with. I looked at the dozens of files that had been installed on my site (purchased on my other half's hosting plan) and thought, I don't know what any of these are for. And look, I don't 100% understand all of the code on my website intimately, but at least I know what all of the pages do.
Anyway, after a site error locked me out of my WordPress control panel, I took it as a sign and just deleted all of it. I flailed around a bit, created an index.html page, grabbed some code for a header and added it, and then turned it bright purple. I chose Verdana, a font I associate strongly with mid-00s forums, as the font and wrote 'enchantedsleeper's space' across the top. After hunting down another tutorial, I added a sidebar and made that vivid aqua.
This was the simple, gloriously tacky aesthetic I had been looking for. I knew that I'd made the right choice. I love being able to go "Behold!" and link my friends to my colourful work of web 1.0 art and say that I coded it myself (with help). Also, I don't even really want tag pages?
I aspire to have many more gloriously tacky indie web artefacts on my front page eventually, like pixel art, little icons that link to other sites (I'm hoping to join some webrings), maybe some scrolling text - but for now I'm focused on adding metadata to my different fanworks pages and archiving the actual works. (I will probably keep my fanvids hosted on Vidders.net and just embed them, but I'm planning to host the fanart and of course fanfic directly). There's a fair few, so it'll be a slow process, and the oldest ones are on Fanfiction.net which isn't as nice and helpful to grab fic from as AO3; but if I get bored, I can always spend some time prettifying the site.
That's my overly long write-up of my personal fanworks archiving project (so far)! Has anyone else here been working on a fanworks archive or similar project? Got any coding hacks or resources to share? Want to give it a try but unsure about it (I'll cheer you on!)? Hit me up in the comments!
Since I wrote that post, I've spent a good chunk of very fun hours creating and tinkering with the archive site in question, and although I'm far from done, I'm excited enough to share the site so far (enchantedsleeper.space) and write a bit about what creating it has been like. It's going to be on the long side, so buckle in...
How it started
I've been following the trend of "web 1.0" and "indie web" design for a little while now, looking at the fun websites and shrines that people have been making, and wanting to try my hand at making something myself. I didn't really know what to make it about, though. Back in the days of Actual Web 1.0 (which I just caught the tail end of, since I first got online in 2002) I did have a gloriously tacky personal website with a free web building service whose name is sadly lost to the grave of my old AOL bookmarks; but this time around, I wanted to do more with it than just make a Me Website.I had an idea to make a kind of tech musings site with a little archive of retro "stuff" that my husband and I have hung onto - old gaming consoles, my beloved 1990s Psion - and I'm definitely not ruling that out, because it's still a fun idea, but it was just sort of added to the backburner of "Things I might get around to eventually".
Then I saw
melannen 's how-to guide on creating your own personal fic archive, and I thought "Damn, I want to do that." Partly it was seeing the cute things that other people had done with their own fic archives and reading their enthusiasm towards simple, home-made HTML sites. The other part was that earlier this year, I embarked on a "just for fun" project of making a spreadsheet that listed all of my published fanworks, of any kind (mostly fic, but also fanart, fancomics and fanvids). It was fun tracking down my various works and seeing them all laid out, charting my migration from Fanfiction.net to AO3 and from fandom to fandom. I've never archived them all in one place - I know AO3 exists to archive things, but I've always hesitated to add some of my oldest, cringiest works to my profile there, preferring to let them sit in obscurity at the bottom of my FF.net author page. But a personal fanworks archive felt like the right place to finally have them all in one place - and the idea of choosing my own categorising and tagging conventions was pleasing.
C...code?
I know how to code HTML and CSS - sort of. I know the standard HTML for getting by on the internet, plus some fancier stuff that mostly relates to academic publishing thanks to my volunteering as a layout editor for Transformative Works & Cultures. CSS kind of passed me by until my Masters in digital journalism in 2014-5, but I didn't really feel like it had stuck until I went to a free women in tech conference in 2018 where I relearned how to code a simple webpage. Back in my Pottermore fandom days (2012 to roughly 2015) I also built and maintained a website for members of Hufflepuff that was widely used (I won't say what it did, because separation of identities and all, but I learned a lot of HTML and some CSS in the process and even taught myself how to use PHP includes).Does this add up to feeling like I know what I'm doing at all? Well... no xD
Building a very simple, minimalist static webpage is no problem, but when it comes to any slightly more advanced set dressing like making a header or a sidebar or creating sections that expand like I wanted to do on my fanworks listing pages - I had no idea what to do. And obviously, everyone has to learn somehow. But I'm impatient, so I've basically been grabbing what I need from w3schools tutorials and once, a Wikihow tutorial, and modifying bits until it does what I want it to.
You can argue that's a perfectly legitimate way to go about building a site - I mean, I built the Pottermore site in the same way, finding templates that I liked the look of and modifying them. But it does mean than I'm reliant on finding the right tutorial if I want to do a specific thing. I wanted to create expanding sections on my fanworks pages, but the w3schools version of that code was designed for menus, not big chunks of text. Eventually, I found a Wikihow tutorial that did what I wanted it to, albeit in a hacky way - because of the way the code works, only one section can be revealed at a time, and in order to have it not work like that, I expect I'd have to completely change the code.
But I've accepted "hacky and slightly janky" as a natural consequence of coding my own website for the first time in 10 years, and you know what? It doesn't matter! It's not a polished project for work, it's not a professional portfolio, it's my just-for-fun fic website and it doesn't need to be perfect; it just needs to exist.
Confession time: I was initially going to install WordPress and use that to build my site. It felt like a cop-out, but I reasoned that I wanted to spend my time archiving fic, not trying to figure out code; also, I could use WP plugins to do fancy things like add individual comments sections to my fanworks, create tag pages, and do other things that would be a lot more time-consuming or fiddly to do myself with HTML.
Besides, it was just easier, right?
I got as far as installing WordPress on my site and choosing a theme - something that I would normally find pretty fun, but all of the themes were designed for either portfolios or ecommerce websites and screamed Professional™. There was very little that I vibed with. I looked at the dozens of files that had been installed on my site (purchased on my other half's hosting plan) and thought, I don't know what any of these are for. And look, I don't 100% understand all of the code on my website intimately, but at least I know what all of the pages do.
Anyway, after a site error locked me out of my WordPress control panel, I took it as a sign and just deleted all of it. I flailed around a bit, created an index.html page, grabbed some code for a header and added it, and then turned it bright purple. I chose Verdana, a font I associate strongly with mid-00s forums, as the font and wrote 'enchantedsleeper's space' across the top. After hunting down another tutorial, I added a sidebar and made that vivid aqua.
This was the simple, gloriously tacky aesthetic I had been looking for. I knew that I'd made the right choice. I love being able to go "Behold!" and link my friends to my colourful work of web 1.0 art and say that I coded it myself (with help). Also, I don't even really want tag pages?
It's not even THAT tacky... yet xD But I do like bright colours!
Gloriously tacky web design
One of the nicest things about creating my fanworks archive is remembering that it can look however *I* want it to. I was pleased with the look of the buttons I'd added to the sidebar in my homepage, but for other pages around the site, I thought I should try to add a "proper" navigation sidebar. But when I added one, it just didn't look right. It was far too normal. Then I reminded myself that there was nothing to stop me from just adding the button sidebar to all of my pages if I wanted to. For anyone who visits my site, that'll just be how it looks. Also, if I want to do something different later, I can always change it.I aspire to have many more gloriously tacky indie web artefacts on my front page eventually, like pixel art, little icons that link to other sites (I'm hoping to join some webrings), maybe some scrolling text - but for now I'm focused on adding metadata to my different fanworks pages and archiving the actual works. (I will probably keep my fanvids hosted on Vidders.net and just embed them, but I'm planning to host the fanart and of course fanfic directly). There's a fair few, so it'll be a slow process, and the oldest ones are on Fanfiction.net which isn't as nice and helpful to grab fic from as AO3; but if I get bored, I can always spend some time prettifying the site.
That's my overly long write-up of my personal fanworks archiving project (so far)! Has anyone else here been working on a fanworks archive or similar project? Got any coding hacks or resources to share? Want to give it a try but unsure about it (I'll cheer you on!)? Hit me up in the comments!
no subject
Date: 2023-07-08 07:44 am (UTC)Best of luck with your Archiving All The Things project!! :D
no subject
Date: 2023-07-08 12:14 pm (UTC)Instead of having adventures into the great unknowns of the web, we instead now spend most of our time on social networks: boring, suburban gated communities, where everybody’s “profile” looks exactly the same, and presents exactly the same content, in the same arrangement.
It's kind of ironic that social media profiles effectively replaced the personal website (or personal blog?) but then because of the way they gated their content, it became necessary to have a bunch of them, so instead of having one place to link to which represents you, there were several, at which point... wouldn't a website be much easier? Just think what we might have if those resources had been put into making website building accessible to the non-coder. Sigh, anyway.
I never actually had MySpace, but I spent my formative years on Gaia Online, where you could do a *lot* of customisation to your personal profile - as was basically seen to be standard in those days - particularly if you knew CSS. Which I didn't, but instead of learning (maybe there was a lack of tutorials, or maybe I just assumed it would be complicated and difficult?) I developed a weird resentment of CSS which I think contributed to the fact that I never learned it properly until 2015 xD On Gaia I basically just inserted a bunch of images and tweaked some basic settings to make things look more customised ^^;
no subject
Date: 2023-07-09 09:49 am (UTC)I don't think I was on MySpace either, but I remember reading articles about girls learning to code super complex CSS for it and I thought that was super cool :D CSS especially on those days did leave us all with mental scars, haha. Small customisations on existing themes were also the way I went, and I guess still do looking at my Dreamwidth, haha.