How to Make a Website, and Why

The home of Dalboz of Gurth.

If you're reading this, you probably have a Neocities account. You might be wondering how you can create awesome sites like the ones on the Browse page. Well, wonder no more. This article will tell you how to do it.

I'm not going to talk about analytics, search engine optimization, monetization, or how to get followers or views. All that stuff is is a toxic distraction. Optimizing your site for clicks or views is actually counterproductive; it will annoy your users, turn your site into a steaming pile of gaudy garbage, and turn you into a nervous wreck.

Instead, I'm going to talk about writing (/drawing/painting/coding/musicking) from the heart. I'm going to talk about how to express yourself to the world even when you think you have nothing to say.

I know from personal experience (the interactions I've had with people, the stuff I've found myself reading again and again) that that's what's actually important, in the sense that when you are honest and open with people and just tell them about what's on your mind, even if you don't think it will interest them, they tend to become genuinely interested. Note that this is a tendancy, not an absolute rule. Sometimes, they're not interested. If that's the case, then whatever, the next person will be.

One of my work colleagues who does improv comedy on the side once said something that I find fascinating: "When people are starting out doing improv," he says, "there's a temptation to try to be funny. People feel pressure to come up with a great gag, but that pressure makes them falter and ends up killing the scene. The way to do improv comedy is not to try to be funny, but to be yourself and let the interactions be funny. The thing that seems most obvious to you may be the funniest thing in the world to someone else, and your partner might react to it with the funniest thing you've ever heard." The essence of a joke is not in what one person says, but in what two people say to each other.

One of the hardest things about making a personal site on the web is trusting that people will (a) understand what you have to say and (b) find it relatable or likeable. But they will! Honestly, they will. If you can take that leap of faith, the rest is easy.

Curation is Creation

Cameron Desautels has a great blog post titled "Curation is Creation". He points out that there's a huge amount of stuff on the internet, and finding the gems among the chaff is practically a full-time job. One of the easiest and most fun ways to get your website started is just to link to other sites you think are cool.

This is a great solution to "webmaster's block" for a couple of reasons. If you think you have nothing to say, it's probably because you're comparing yourself to some set of idealized heroes who have awesome websites. The thing to remember is, plenty of other people probably haven't heard of your heroes. So link to them! Boosting the signal of stuff you enjoy is actually a super effective (not to mention easy) way to benefit both your readers and your heroes.

This is doubly true when you consider what people actually read when they go to a website. When people land on your personal page, they're not likely to go straight for your art or writing or music. Why? Because they have no reason yet to be personally interested in you. There's a certain level of trust and affinity that people have to build up with you / your site before they can engage with your art in a meaningful way. A links page helps build that trust, by contextualizing your art and personality within the web of the larger world.

Difficult != Valuable

(!= is programmer-speak for "does not equal".)

You might feel like a links page is too facile, like it's taking the easy way out. You may have visions of a grand opus that will be the crown jewel of your website, and decide to spend all your time working on it.

Keep in mind, though, that you don't have to perform herculean feats to make someone's day or get your ideas out into the world. A link to a meme, a collection of cool gifs, or that half-assed collection of notes sitting on your desktop can seem like a treasure trove to someone who stumbled on your site.

Of course, you may want to edit and prune a little, but the point is that if you are the kind of person who works on grandiose projects, your intermediate steps and sketches are likely to be just as interesting and accessible, if not more so, to someone who finds your page.

HTML Sucks (it's not just you)

HTML and CSS combine to produce the most frustrating suite of programming tools I know. Very often you'll tweak something in the code of one of your pages and get a totally surprising, broken result. The thing to keep in mind is that, in this case at least, it's not your fault. HTML and CSS, due to their history, are laughably broken and inadequate tools for authoring modern websites.

HTML was designed for annotating academic papers on university websites with minimalistic formatting (e.g. bold, italics) and metadata (e.g. links to other papers). That was what the Internet was mainly used for in its early days, and HTML was perfectly sufficient for that task. As more and more people became web users, commercial pages started appearing, and then personal pages. These pages started using existing HTML features in new and surprising ways, like using images as decoration instead of illustration. Meanwhile, browser vendors were competing for market share by developing cool new HTML features that only worked in that browser...

The result, predictably, was pure chaos. It took a couple decades, but eventually the browser vendors grew tired of the constant feature wars, called a truce, and all implemented pretty much the same standard set of HTML features. Of course, in order to ensure that browsers would continue to display old webpages correctly, that standard set of features had to be horrendously complicated, and account for all the weird hacks and tricks that people had done over the years to get their pages to display in both Internet Explorer and Netscape Navigator...

Keep it simple, and don't sweat the small stuff

The surest way to avoid (most of) the insanity of HTML is to keep your page really simple. Simple doesn't mean bare-bones or boring. Actually, what counts as "simple" in HTML is kind of counterintuitive. Here are some things that seem like they should be simple in HTML but are not:

None of these things are impossible; they can all be achieved with hacks. But hacks have a way of breaking when you least expect it...

Instead, I prefer to use a very simple HTML layout for my pages. Basically, it goes something like this: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rivendell</title>
  <link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>
  <nav>
    <p>
      <a href="/music">Music</a>
      <a href="/mirth">Mirth</a>
      <a href="/conlangs">Conlangs</a>
      <a href="/2000s">2000s</a>
      <a href="/welcome.html">Old Homepage</a>
      <a href="/old.html">Old Landing Page</a>
      <a href="https://neocities.org/site/rivendell">Follow Me</a>
    </p>
  </nav>
  <div class="content">
    <h1>Heading Goes Here</h1>

    <div class="caption left" style="width:50%; max-width:780px">
      <img class="frame" src="/images/lair.jpg">
      <p>A caption for the image</p>
    </div>

    <p>
      This is a paragraph!
      Line breaks get collapsed into spaces by the browser.
      lorem ipsum dolor sit amet...
    </p>

    <p class="footer">
      <a href="./trails-end.html">Trail's End</a>
    </p>
  </div>
</body>
</html>

Colors, fonts, and text alignment are all done in CSS. CSS has a bit of a learning curve compared to plain HTML, but it will save you time in the long run because you end up having to type and read less code overall. With CSS, it's very easy to overhaul the whole style of your site, without having to make changes to every individual HTML tag.

Trail's End