Preamble#

I originally got the idea to create a proper fanfic archive (one that’s part of my string of websites) from this example here: kingdra.net fanfic masterlist which was linked to by ArimaMary.

I currently use Dreamwidth as a place to archive my writing, and I’ve been using it to repost the text of any fics I’ve uploaded on AO3. It’s helpful when AO3 is down, but honestly I was feeling kind of dissatisfied with Dreamwidth. I’ve run into plenty of HTML issues on the site, where the HTML code I copy into their editor gets warped somehow, and messes up my spacing. Sometimes tables go awry, and even though it’s kind of dumb, I’m always worried about running into the 1000 tag limit even though that’s a ridiculously huge number of tags and I’m nowhere close.

And ever since I started archiving my blog posts on there too, I feel like it doesn’t really serve the purpose of a fanfic archive, since I blog way more then I write fanfics. I wanted a dedicated space for fanfics, and I was kicking around the idea of starting a new dreamwidth blog. However, I found Mary’s post, which got the gears turning.

I wanted something aesthetic and relatively easy to maintain. Since this is just a fanfic archive, I don’t have too many worries about updating it as frequently as a blog, so I’m okay with using hand-coded pages. I also wanted something with filtering or tag capabilities.

The solution I found is basically to customize a fanfic rec page template developed for tumblr.

How I Built It#

1) Find a Fanfic Rec page I like#

I searched around a few tumblr theme repositories, and any theme/page archives of coders whose work I’ve used before. Unfortunately, many of those resources have gone offline since the great Tumblr purge, but some are still around. I managed to find one that I liked, that had filtering capabilities. In the end, I decided to use Candlelight by Odeysseus. You can see a demo of it here.

2) Download all my fanfics as HTML files from ArchiveOfOurOwn#

This one is pretty self explanatory.

3) Create a github repository and start customizing the page template#

I uploaded the fanfic files into a subfolder, and then pasted the Candlelight code into an index.html file at the top level. From there, I performed a few customizations:

Added the filters I wanted using the code in the template
Made the fanfic cards bigger
Increased the size of the font in various places, since tumblr themes are notorious for small text for some reason.
Made it mobile friendly and dynamic (I’m not very experienced with coding, so I used Gemini to suggest the code changes that would achieve the final effect).

4) Start inputting fanfic information and linking to the fanfic files.#

This is just manual, I started inputting the fanfic title, summary, wordcount, etc. into the correct spots on the template, which I repeated for each story. I also uploaded the html files I downloaded from AO3 into a subfolder on the repo, and then linked to the files on the site.

I also used kingdra.net’s AO3 CSS stylesheet on each fanfic’s page so that it looks nice.

5) Upload the end result and finish!#

I linked the private Github project I created to Netlify and uploaded it. Any changes I make on Github will auto-deploy to the website. You can see the outcome here at Navi’s Fanfic Archive.

I’m not too comfortable sharing the source code since it’s cobbled together from a bunch of random parts that I didn’t create, but you can see what the code looks like by inspecting the page in your browser.

What’s Next?#

I’m pretty happy with the way it looks right now, but I have a few other ideas that I think could be incorporated.

table of contents for the multi-chapter fics
“back to top” or “back to TOC” button
adding more navigation links between the fics and the main page

Honestly I was pretty happy with how non-fussy this project was. It was nice to work with regular html code rather than trying some complicated solution.