Navigation
Latest blog posts

Happy new year! 2024/01/11

Been a while! No real reason. Other than that I spent the past month setting up the latest rendition of my Minecraft server. Modded Minecraft is a black hole.

I'm here because I'm taking a break from Tumblr, because my dashboard has been posting about some stuff that hits way too close to home for me, and I don't want to unfollow anyone because they should be posting about it but aughhh my brain is like an egg held together with scotch tape. Scotch egg.

I'm running a bit behind on launching IHATEART (website project I've been working on). I am running very behind on updating Needleminder. I have a doctor's appointment tomorrow and I don't really want to go to it. I have chores today and I don't want to go to them either. I think I might be procrastinating by writing this blog post, but I was also a month late on making a new blog post, so I'm technically also accomplishing something. The heck am I supposed to do here?

Mountain of tasks aside, I think things in my life are going pretty well right now. Oh, right, um, I've stopped streaming. Big change. I'm happy with it, I think it was negatively impacting my friendships. Admittedly that means I've lost an income source but I have to protect my sanity here.

I post a lot on my forums and I feel like they are going very well. My Minecraft server is doing great, better than it's ever been. I even redid the EggwareXYZ Discord server and that's been nice too. And I feel closer to my friends than ever.

I have nothing to really complain about except for the omnipresent cloud of dread that I think haunts every American nowadays. And that's good enough for me. At least my problems are relatable and not some of the weirdest shit you've ever heard of.

Anyway, I made a new contact page, because I'm feeling mentally well enough that talking to people probably won't implode me! I don't wanna even acknowledge how bad it was before.

Oh yeah, I probably won't make another post in a week, so I might as well bring up that I've had this blog for a year! That's pretty cool! Also you can definitely see how bad my social anxiety was back then. Also also rereading that is funny because I am mainly on Mastodon now.

The world is a nice place, other than literally everything about it. I've gotten so much support over the years and I'm so grateful for it. I'm excited to see where the future takes me.


Making your first wedsite with Eleventy 2023/11/17

This is a sample of the kind of tutorials I will be writing for my upcoming website, IHATEART. As such, this post will be moved onto there at a later date. I'm just throwing it onto my blog so that I can show it off before I have to write a bunch of fucking CSS!


“I hate making websites,” I used to think. “It’s so much effort to have to paste the layout into every page, and what if I want to change the layout later?”

Does this sound like you? Maybe not. If you have a modicum of experience with ‘professional’ web development, you might already have your head in your hands. But this guide was not written for people who know what they are doing. This is for people who kind of, sort of know how websites work, but can’t quite make the leap into making one themselves.

Eleventy is a static site generator (SSG), a tool that uses input files to generate your website. What this means is that you can store your blog posts as plaintext files, and then the computer can sandwich it in your layout HTML for you – you can update your entire website, whenever you want. If you can’t tell if you would benefit from this or not, let me ask you this: when’s the last time you’ve updated your website?

The only thing that you need… is the bravery to use the command line. I WILL WALK YOU THROUGH IT! PLEASE TRUST ME!


Installing Node.js

You’re gonna need Node.js, so go ahead and get that out of the way.

Aaand you really don’t need to know what Node.js is for the rest of the tutorial. You can go ahead and look it up later if you want.

Installing Eleventy

On your computer’s hard drive, make the folder that you plan on building your website in.

Here is where it gets scary. We’re going to open the command line. If you’re a Linux user, you probably know it’s as simple as right-clicking in the folder and selecting “Open in Terminal”. But I was surprised to learn that if you are a Windows user, this is still pretty simple, just hidden:

  1. Click on the address bar (bar at the top where the folder’s address is)
  2. Type cmd into the address bar
  3. Hit enter

And there you go! Now you have a command prompt window in the folder that you’re in. No more having to cd into the directory.

Now that we’re in /yourcomputer/website/ (this is my shorthand for wherever your folder is, so try to keep track of it), here’s the first command that you’re going to run:

npm install @11ty/eleventy --save-dev

npm is the package manager for Node.js. It is installing @11ty’s package eleventy. --save-dev marks Eleventy as a developmental package, not one that will be present in the final product.

And yeah, this will dump some shit into your folder that you don’t need to touch right now. I hate the mess, but it’s normal, and later I’ll be rearranging things so your files aren’t mixed in with the clutter.

Making your first page

For the sake of this tutorial, we will be recreating Homestar Runner’s famous wedpage – I think that’s a reasonable start, don’t you?

We’ll start by making a Markdown file. It isn’t anything scary! It’s a plain-text file format, typically .md, that you can write in any text editor. It’s very likely at this point in your life that you’ve used Markdown; for example, Discord’s chat formatting is Markdown-based.

That’s what makes Eleventy so cool – you don’t need to write HTML, you can write your blog posts intuitively and on-the-go, and certainly if Eleventy ever dies out all your post data will still be usable in any other static site generator. It’s a big improvement over fishing it out of Wordpress, I’d say (from experience).

Create a file at /yourcomputer/website/src/index.md and place this text inside:

head> )title(Untitled)title( /head} ,body.

helscome my wedsite.

its not done.

this page is best viewed using Nedscape 1.0 or lower

Or, uh, whatever placeholder text you want. Fine, put Hello World in there if you must.

Now, starting from /yourcomputer/website/, open the terminal and run this command (or skip ahead to the automation subsection below):

npx eleventy --serve

npx is the node package executor. We’re executing eleventy with the parameter --serve, which launches a local web server that refreshes whenever you make a change to one of the files.

Your site will now be live at localhost:8080. (This is a page that only your computer can see. So don’t worry about putting weird stuff on it, but also don’t try to send it to your friends or they might laugh at you.)

Automating the serve command

You probably don’t want to have to remember that command every single time you want to work on your site.

For Windows, create this file: /yourcomputer/website/serve.bat

npx eleventy --serve
pause

The Linux version is the same, except it’s titled serve.sh and does not use the pause line. I had success right-clicking and opening as gnome-terminal -- bash, but you’ll probably have to look this up for your specific Linux experience.

Folder structure

By default, your site is built in /yourcomputer/website/_site/src. You might not be thrilled with this arrangement; even if you don’t care, you might want to change it down the line, so it’ll just make it easier for everyone if we can go ahead and set that up.

I’ve even written the file for you, so you don’t have to think about it too much. Eleventy’s folder structure is totally configurable to whatever makes the most sense to you, but there isn’t any accepted standard, so if you have no idea what you want or expect these folders to be named, you can just go along with these and worry about it later.

/yourcomputer/website/eleventy.config.js

// Most code you can find online will name this "eleventyConfig" instead of "config".
// I keep it brief. Change it to "eleventyConfig" if you think you'll forget.
module.exports = config => {

    // This copies `./public/` to your build folder.
    // Why do you want this? Well, this is where you'll
    // put static files that Eleventy isn't processing,
    // like images or CSS.
    config.addPassthroughCopy({
        "./public/": "/"
    })

    return {
        // ALL of this is changeable
        // to your personal preference. Please!
        dir: {
            // Where your page data will be.
            input: 'src',
            // Where your site will be built.
            output: 'build',
            // Extra files that won't be built as html,
            // but instead included in other files,
            // such as footers or navigation bars.
            includes: '../includes',
            // JSON data to be processed,
            // such as your site's metadata.
            data: '../data'
        }
    }
}

Warning: Sometimes when I make major changes to the Eleventy config file, I have to close and re-run Eleventy. Worth keeping an eye on if you’re getting any odd errors.

Metadata

Storing your metadata separately means that you can easily locate it for editing and reference it across multiple page layout files. Look, I know it’s boring but trust me on this one, OK? You’re gonna regret it if you ever get another major name change.

/yourcomputer/website/data/metadata.js

module.exports = {
	title: "Untitled",
	url: "https://example.com/",
	language: "en",
	description: "I am a silly snart who forgot to fill out my metadata.",
	author: {
		name: "Your Name Here"
	}
}

The actual layout

Now let’s get this bad boy up and running!

Make a file named /yourcomputer/website/includes/layouts/base.njk. This is where you will put your default layout. njk is a Nunjucks file, a way to write basic scripts on top of HTML files; as you can see, we’ll be using it to read the metadata.js file in your data folder.

Maybe in another tutorial I’ll detail how you can bring an already-existing layout into Eleventy. For now, here’s a very basic file:

<!doctype html>

<html lang="{{ metadata.language }}">
    <head>
        <meta charset="utf-8">

        <title>{{ title or metadata.title }}</title>
        <meta name="description" content="{{ description or metadata.description }}">
        <meta name="author" content="{{ metadata.author.name }}">
    </head>

    <body>
        {{ content | safe }}
    </body>

</html>

Going back to /yourcomputer/website/src/index.md, add these lines at the top:

---
layout: layouts/base.njk
---

You probably don’t want to use base.njk as your default layout file, since your base should really just contain your header data, but this will be fine for now.

And there you go.

Finishing touches

… but I’m sure you’re thinking, it doesn’t look like a good website, right? It looks like black text on a white page. Is there anything we can do to communicate that this is a really great, awesome website? Well, sure.

Download hsbackground.jpg to /yourcomputer/website/public/hsbackground.jpg. The “public” folder is where you keep files that will be copied raw into the final build.

The cool thing about building our site in Markdown is that we can still use as much HTML as we want. As such:

---
layout: layouts/base.njk
---
<style>
    body { background-image: url("hsbackground.jpg") }
</style>

<font color="Lime">

head> )title(Untitled)title( /head} ,body.
  
helscome my wedsite.

</font>

<font color="White">
  
its not done.

<br>

this page is best viewed using Nedscape 1.0 or lower

</font>

And there it is! You’ve made a website that would make our Geocities elders cry… tears of, um, joy…

Now what?

Sky’s the limit! World’s your oyster! And all that other shit. But seriously, you can now generate as many pages as you could possibly want.

Some challenges that should be easy enough to accomplish with the info I’ve put in front of you:

  • Upload your page online (HINT: it’s in your build folder)
  • Change the text, font color, background image…
  • … or make an actual layout (HINT: you can apply a layout to a layout, for nested layouts - that’s what the base is for)
  • Make multiple pages

And hopefully this gets you interested in using Eleventy, even if you have to wait for me to make a more advanced tutorial. It’s fun! It’s built to last! You can write blog posts in Obsidian and then host them on your site! I will never make you use the command line again!!


Existing just fine! 2023/11/16

Hey, exactly one month since my last update!

We were having a bitch of a time affording rent last month but we scraped by. I'm still struggling to pay off my credit card but things could be worse.

My rollator has completely changed my life around. I've been to the zoo, I've been to the mega grocery stores, I've been everywhere I thought I could never go.

Being able to expend my physical energy has actually given me more energy for other things too. I got back into game dev. I like to go for walks and take notes. I'm trying to get into walking and listening to audio essays. It'd be a good time for me to get into e-books too, if you have any recommendations.

I even managed to get my forums popping off, with the help of my friend Mortis who pointed me towards webhooks. Turns out those aren't as scary as Discord bots! Though I also need to bite the bullet and work on learning Discord bots...

AND, today I finally streamed again and it went fine.

So really the only thing I have to complain about is money, but so does everyone else.

Here's some stuff I've been up to:

  • AI Builds is a fantastic web series about depression, writer's block, and uh, ants, and... a guy retching while looking at a Prozac jpeg... look, never trust me to explain anything to you
  • Pokemon Fool's Gold perfectly scratches my itch for "I wish there was more Game Boy Pokemon and also they were scarier"
  • Kuray Infinite Fusion is a mod for Pokemon Infinite Fusion that features a lot of quality-of-life features, enough to get me interested in playing again (well, that and Nintendo being super shit)