Now building with Eleventy, thank you Kayin! And, fighting game locals are fun (also ty Kay~)

*.·:·.✧ ✦ ✧.·:·.* Hiiii hi!~ ｡･:*˚:✧｡

Just a quick little blog post to go with some updates to the site, most of which are on my workflow more than anything.

You served me well Zoner... for like, a month before I got fed up, alas

If any of you remember the distant past of a couple months ago at the start of this website adventure, you'll know that I've been making my site through Zoner. The basic idea is you only have to make a simple markdown file for each blogpost you wanna write. Zoner (and by extension Zonelets I suppose) is great, honestly, I don't want to knock it down and if what you want is just a really easy in to super basic blogging without technical overhead you can't really go wrong with it.

However... I have brainworms.

I am not simply satisfied with basic, chronologically ordered blogging, and quickly ran into a few pain points. Zoner imposes a very strict structure on the site, everything is either a standalone page (that must live in the root folder), or a Blog Post™, all of which must be dated and named a specific way to work right, and will get dumped into the single massive chronological archive.

(you can skip my ranting at zoner if you want) ↓

I ran into this most starkly trying to get together my Magical Girl Raising Project Live Reaction archive on here, thinking I could just make an organized folder structure and raw pages for posts that all manually linked to each other. Nooooope. Granted, I am truly asking a lot of Zoner here, maybe? Either way, it turns out zoner freaks out and ignores building pages inside folders. My hack workaround wound up making each page at the root, then building them, and on the built site transferring them over to the correct folder structure. ...also I had to manually edit the HTML of every one of them to get the links working right, all on notepad cause I'm insane.

That said, even on the blogging side there was issues. Particularly with the filename requirements. The post filenames determine the title of the posts and the URL, limiting them to what is allowed in filenames (so no colons!). There's a couple of built in workarounds for this, but they leave much to be desired. You can passthrough a title that's distinct from the URL (still in the filename), or pass no title and manually add in the header and title in the markdown yourself BUT the URL/Title is what's used for the title bar and the archive link and ugghhhhh.

What else... images are only copied over to the build if they're in the root images folder, so I had to manually copy folders over. Previewing is a pain!! You have to build the whole site every time, and its hard to get a sense for what the body of the post looks like from raw markdown, and even worse when I throw in manual HTML snippets. Also, it would be nice to have tags or different blog post categories!!

(welcome back)

There's a general lack of flexibility to all of this, and it made the act of working on the site or simply writing blog posts more of a chore than it needed to be. Crucially, my brainworms are of a particular strain of workflow optimization, not for the sake of "efficiency", but more a sense of, if not laziness, self satisfaction in making a couple slightly strenuous of actions into a single, frictionless action and having everything to my taste. There's surely better ways to do this, ways that would still let me have my markdown, or in fact, even empower me more! I got started by at the very least writing stuff out on a real text editor. I wrote most of the Home Run Derby post on Sublime Text and even found this live preview plugin that would let me get at least a basic sense for what things where looking like (and make for easier reading). Still, I could just tell I could be doing more now that I was here, I just didn't know where to start.

(It does preview html I was just stupid)

Throughout this whole process, as you might've seen, I was, of course, airing most of these grievances with my good friend Kay. I bring her up a lot, but it specially makes sense here since she set me on this path on the first place. As you can see, she also has a website, and has been through a lot of these workflow optimizations after a major site refactor relatively recently. Her site is a bit more complicated than a static neocities, but maybe not that much more? Either way, my questioning had me diving way too deep into "how the fuck do webpages even work".

All that modern web madness aside, once we got down to it I had a very clear idea of what I wanted. I needed a way to generate my site in a sensible, easy to compose way that let me preview quickly, and leverage various templates and building blocks. Was I gonna have to build this, surely NOT right?

So yea as it turns out this already exists, that's literally what Eleventy (11ty) is. We both found this video at the exact time and its beat for beat what I was asking for. It comes built in with a live updating local server you can load up on your web browser, markdown to HTML, and various ways to manage and use different templates/layouts, and I get a nice, clean static site out of it.

Migrating to 11ty (by having Kay do 90% of it)

So finding 11ty was great, I could easily see how with some elbow grease I could transfer the zonelets template over, and how I should probably definitely get on VSCode and leverage some of the stuff on it. But- its also a whole project, and sure once its done I won't have to mess with it again, but I still had things to do, like write about Junko (which I'm still putting off...). I did also find that someone had done the bulk of the work already and created a tutorial for converting zonelets to 11ty, but its still work to implement and troubleshoot. So I filed it away to "I'll get to it soon for real because I won't update the site until I sort this", then proceeded to write about a flash game anyway.

A couple weeks pass and I'm talking with Kay about like, arcade cabs or whatever after having linked a zoner blogpost with a messy URL (unrelated to arcade cabs), and I get this message:

Naturally, I zipped up and sent over my site. A part of me was kinda sad to not dig head first into it myself, but I wasn't about to say no to help getting over the initial hurdle, and I got updates as the site took shape and finally, a nice little zip for my new source folder and instructions on how to get going. Took like two minutes to get dependencies installed, launch the live preview and watch all my post edits populate in real time. Hell yea!!! I fucking love you Kay 😭

At this point I had parity+ with Zoner, and I could just keep going as I was editing posts on Sublime. Still, I wanted to dig into the tutorial code and try to parse the structure for myself so I could do edits, fixes, and updates. The most I got to do was move the comment boxes off of each post and into the post layout. It was also definitely time to get on VSCode, Kay kept teasing me about how I could get source control going, github backups, and even automatically pushing the site to neocities with the push of a button, all within VSCode.

VSCode? more like VSGoated

Of course, I put it off for a few days (I was busy with something I'll go over later though), until the other day I was on call with Kay after getting her to play Guilty Gear Strive with me and I figured hey, while I've got you here nows as good a time as any to get this stuff going.

VSCode (lol do I even need to link MICROSOFT) is kinda fucking great??? Though I might just be the newbie here with her first real text editor. The first, most important thing to do after installing VSCode is to spend at least 20 minutes, preferably more, looking at, installing and trying out various themes. I'm going with Catppuccin (Frappé) right now, but there's lots of great options to look through and themes, like various other VSCode extensions, are super easy to install from the marketplace sidebar. This also made me realized my firefox was still going with a basic black theme I've had for probably a decade, instead of something cute. This cannot do!! So I also looked at firefox themes.

What was I going on about?... Right! After the themes, I spent some time clicking around, going through some of the starter guide stuff and familiarizing myself with it. I love this part of discovering new software, to me the best UX is one that naturally invites me to poke around and learn all the features intuitively as I do, and I'm really good at picking up software like this.

As we went forward, it became increasingly clear to me how powerful this would be, and how I could just basically manage my site entirely within it. I setup git and version control, and we said fuck it, we're here, we may as well get github setup right? A private repro later, and Kay's asking me to set her up as a collaborator, and she pushes through a github action that has my site auto build and update on neocities whenever I sync to github, this shit is wild! (I'll probably tweak it to not always push to neocities but its cool that it works)

(Yes, this means she has full access to update my site and will surely hopefully not abuse this power, I trust)

You can run terminals from within VSCode, so I can just throw the live preview command in whenever I start. But typing and remembering a command is LAME, what if we had a button?? VsCode Action Buttons!! now I can restart the live preview with ease! I have SO MUCH POWER already. But also I should sleep.

The next day (yesterday) I dug into the site and figured out how most of it worked, or got like, a sense of it, and where to look for what, lots of fixes for things that didn't transfer over quite right, changes to my preference, etc. Kay had redone my post urls, no more dates on them (probably for the best) and setup redirects, but that broke the comment boxes that look for the old URL! A bit of her hackery and a merge later, and we got those working again and also ready in case of any other redirects.

I could be done here but NO, I want MORE POWER. If every post starts with the same frontmatter, couldn't I get some sort of easily accessed template going? And there's so many little HTML code things like my tooltips I'd wanna have easy access to, or maybe make it more readable on my end. As my mentor informed me, what I wanted was Snippets and Shortcodes. After some troubleshooting and googling I got some POWERFUL tools on my side, in no short order:

• Frontmatter snippet: Very simple, just pastes in a template to manually fill in (it autofills the current date~)

• Markdown Link snippet: Even though MD already makes linking super easy, its not enough for me!! This takes whatever I select, whatever is in my clipboard, and wraps it all up in a MD link.

• Tooltip shortcode snippet: My beloved and most fun to figure out, this takes whatever I've selected and wraps it around into my tooltip shortcode, automatically placing my cursor over the spot where I write my tooltip. I also, of course, setup the shortcode in 11ty, which on build time will take this and turn it into proper HTML.

hehehehehehe

Okay okay, with these tools in hand writing up this post was super easy and SO fun. I've learned a lot in the past few days and enjoyed it thoroughly. I'm already thinking of other things I could automate or implement, if you see Kay's bluesky comments under this post then you'll know I (probably we) went ahead and did that too, lmaoo. My workflow optimization/customization brain is VERY satisfied, to say the least, I fell completely for Kay's trap 😌

I want to/have a website, should I go this insane?

If you stuck with this so far, uhh, thank you?? that sure was not quick.

With all the talk recently of the importance (and I might add, FUN) of making your own site, you might be interested in some of this, or already have something basic going. Should you go with 11ty? I think the short answer is Yea!!...BUT I'm also not sure if I'm the best to answer that. As its been made clear, I have a special kind of brain that is conducive to this stuff, and while I'm not a comp sci grad or even close to it, I'm not afraid to look at code. Its hard to really engage with web creation without looking at code though, and if you're going to, you may as well give yourself modern niceties and make it as friction free as possible once set up. Or so I'd like to think.

Its worth keeping in mind your goals and scope too, I made this site to have a place for long-form blogposts after cohost died (😔) BUT I'm also incredibly down to have my own little digital space I can endlessly tinker with for my own amusement. If you just need a place to write like this there's places to do it, like, I guess, Dreamwidth?? idk I'm not on there. You don't get to own your stuff, but I suppose there's also WhiteWind if you're on bluesky and believe its promises of decentralization... but if you know how to host your own PDS you can probably host your own website, lmao?

All that said though, as far as automatically building a static site goes, and having full control regardless, its hard to beat Eleventy. I don't feel like I'm stuck to a platform or a specific format, I could strip all zonelets-like formatting at this point if I wanted (I don't, not at this point, but I could is the point). I also have many tools at my disposal to look at HTML only when necessary, lol.

Going to your first local fighting game event and entering your first tournament

...listen, this was supposed to be a quick little blog update to make the refactoring official, "hey the site's now on 11ty, its so neat! thank you Kay" and not much more, so I figured this cute little life update anecdote would be good to have to pad things out a bit. Instead, because I cannot keep my mouth shut and I had so much fun detailing the process that got me to have so much fun doing so, the post got rather long. So I'll try to keep this short. I promise, I'm trying really hard to not give you my whole fighting game history, I might save that for a future post?...

Anyway, I went to locals!! With my wife!! IT WAS SO MUCH FUN! To make a long story short, my wife Teddie has also been hanging out with Kay a lot, and watching her stream got her interested in fighting games. A few months ago I set her up with Guilty Gear Strive since that's what I own and play the most, and its got a pretty active playerbase, and with me and Kay's help she got going from literally zero knowledge of the genre or even 2D action games. She picked up May because of course, cute girl, big anchor, and FISH?? Laser targeted to her.

Teddie's what I've come to call a "hyperfixating social demon", so even though she's very quick to get mad/frustrated and struggled a lot early on with learning the game, the fact that she was willing to devote so much time to it, and constantly bug Kay for advice means she's gotten really good really fast, her perseverance never ceases to amaze. Kay's been more than happy to help, and can't stop bragging about her disciple who's handily proven how getting into fighting games is more a matter of will than any particular genre difficulty.

Another aspect of Teddie's social demonhood is that, in complete contrast to me, she isn't afraid to join the discord for our local scene and start asking for games!! Something I never managed to do myself (well I'm on there now, but I still haven't asked for games...). It didn't take long to hear about an upcoming event at the end of month, its hosted shockingly close to us so going over and signing up for the Strive tournament was a no-brainer.

So how was it? Pretty great -w- locals are one of those mythical fgc things that are easy to see as overhyped, and there's definitely some exaggeration and need to manage expectations. I saw this video earlier in the month and it spoke to me and my introvert ways, even if it was mostly focused on bigger events. That said, even through it, we all agree its worth it in the end. It helped that we weren't alone, that Teddie was already well known from the discord, and that we had things like the tournament to break the ice. The people there made us feel so welcome.

So how did we do in the tournament? pretty well I'd say, though that was the quickest part of it. Teddie lost both her games, I lost the first, won my first losers game and lost the next. BUT we played our best, and had a blast after playing our hearts out casually for hours, taking breaks as needed. Its hard to overstate how much more "real" playing local feels compared to online, I got kinda blindsided by it!! That day was some of the best I've felt about my play, even against people who were way better than me. I could go on about all kinds of things, all the cool fightsticks and controllers I got to see. Games just sorta come to you, and people happily talk away and give advice or praise. I might've gotten compliments on how cute I am :3

Afterwards we went out for dinner with a massive group of people and had a good time socializing. I made some connections in the industry I got laid-off of last year?? I swear if this gets me a job... Overall, a resounding success and testament to how great these community events are, we have the bug, and are already making plans to hit up another event this weekend~