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!!