make your own linktree with html and neocities, for free

2022-01-10

word count: 3002

approx reading time: 16 mins

intro

in this post i'll show you how to setup a linktree-like page on neocities, explaining all of the html and css needed for it, as well as some general introductions to each of them. the only computer knowledge you need is how to type on a keyboard and how to drag and drop files! you won't be an html expert after reading this, but it should provide you enough so that you can keep going on your own to a fully customized personal website :)

if you need any help with stuff, hit me up on discord (annieversary#6393), and ill try my best to walk you through any issues you might be having

disclaimers n stuff

i don't like to explain everything as soon as it appears on the screen, cause i feel it's a bit overwhelming, and it affects the pacing negatively. if you don't understand something, try waiting a bit cause it might be explained later. if something isn't explained and you feel like it should have been, please let me know!

setup neocities

the first step is to create an account on neocities!

neocities signup screenshot

it'll ask if you want to pay or not. you can check what a paid account offers you, but a free one works just fine for our purposes. after that, you'll get an account confirmation email, and once that's done, you will see the following page:

let's get started screenshot

you can read through the html tutorial if you want to, but i'll explain everything you need in this tutorial already. click on Go to the dashboard >>, this will open your neocities dashboard:

dashboard screenshot

here you can see the list of files currently on your website. the most important one is index.html, which is the first page browsers will display when someone visits your page. at this point, your website is already up and running! you can visit username.neocities.org (with your username instead of username), where you'll see something like:

empty neocities page

if we go back to the dashboard, and click on index.html, the following html editor will open up:

html editor

here we'll be able to edit the content on the page

intro to html

this might be a bit overwhelming if it's the first time see you see html, but don't worry, i assure you it's much easier than it looks at first. html consists of a set of tags, which are the things inside the funny < and > characters. for example, we have <html> on line 2. that's what we call an opening tag. on line 32 we have it's corresponding closing tag, which looks like </html>. it looks similar to the opening tag, but it has an extra / character after <. in html, most tags must have a corresponding closing tag. if you look throughout the html, you'll see a lot of different tags, which are opened and closed, like <h1>Welcome to my Website!</h1> on line 13. if you edit your document to read <h1>im annie!</h1> instead, and hit the big save button at the top right corner, you can refresh the page at username.neocities.org to see how the text has changed:

im annie h1 screenshot

im annie website screenshot

there's a bunch of different tags, each with a different meaning. the one we just edited is a <h1> tag, which is a heading (title). there's a bunch of different heading tags, from h1 to h6, each smaller than the last. another really common tag is <p>, which is a paragraph. paragraphs are the main text tag, as you can see in the html you already have. inside <p> tags you can use <strong> and <em> tags, to write bold and italic text respectively. another really important tag is <a>, an anchor (link). <a> tags are a bit more involved than <h1> or <p> tags, as <a> tags need an href attribute, like in <a href="https://neocities.org">Neocities</a>. attributes go on the opening tag, and are in the form name="content". in the case of <a> tags, href attributes indicate where they link to. another attribute we can add to <a> tags is target, with which we can indicate that we want links to open in a new tab, by adding target="_blank", like <a href="https://neocities.org" href="_blank">Neocities</a>.

target blank screenshot

if you save, reload your website, and then click on the neocities link, you'll see how it opens in a new tab instead of on the same one

you might be very confused about why you have to write target="_blank" instead of something that makes more sense. the reason is actually kinda interesting, but it's a bit too long and not really relevant right now. it boils down to the extreme backwards compatibility of the web

another important tag is <div>. it allows us to group other tags together, which will then be useful when we want to style our page

another thing you might have noticed is that all the actual content of your site is inside the <body> tag, and that there's a <head> tag that contain some other stuff:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>The web site of username</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>

the first two are not particularly important, they tell the browser how to render your page. don't remove them and everything will be alright! i'll explain a bit more what they do at the bottom. after that, we have the <title> tag, which is the text that shows on the browser's tab. you can change it to something else, like <title>annieversary!</title>, and if you save and refresh, you should see:

annieversary title screenshot

the last tag in your website's <head> section is <link>, which links a css file to your page. we'll talk about css later, but in summary it helps you give a style to your html

adding content

we'll now add all the content we want to our website. we'll start by removing all of the existing text, and replacing it with:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>annieversary!</title>

    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <h1>im annie!</h1>
  </body>
</html>

this will give us a blank slate to work off of. we'll add two links for now, one to my soundcloud and another to my personal website. of course, you should replace that with links to your soundcloud, twitter, bandcamp, etc.

we'll start by adding an empty <div> tag as a sibling to our lonely <h1>:

  ... other stuff here
  <body>
    <h1>im annie!</h1>
    <div></div>
  </body>
  ... other stuff here

note: i wont show the whole file every time, as that gets long and repetitive. i'll only show the important sections

tags are siblings when they live next to each other. in this last code section, both the <h1> and the <div> tags are children of the <body> tag, and they're siblings between themselves. this funny naming leads you to search messed up things on google, when taken out of context:

how to kill child google screenshot

we're gonna add some children to our empty <div>:

  <body>
    <h1>im annie!</h1>

    <div>
      <h2>
        <a href="https://soundcloud.com/annieversary" target="_blank">
          soundcloud
        </a>
      </h2>
      <p>you can checkout my songs here!</p>
    </div>
  </body>

we've added two children: an <h2> and a <p>. the <h2> tag has in turn an <a> tag as a child. this way, we have a heading and a text element, and the heading will also be a link to soundcloud. in general, most people expect external websites to open in a new tab, so we've added target="_blank" to the link

we'll duplicate the <div> element, but we'll replace the text and link to go to my website, like so:

  <body>
    <h1>im annie!</h1>

    <div>
      <h2>
        <a href="https://soundcloud.com/annieversary">
          soundcloud
        </a>
      </h2>
      <p>you can checkout my songs here!</p>
    </div>
    
    <div>
      <h2>
        <a href="https://versary.town">
          website
        </a>
      </h2>
      <p>this is my personal website!</p>
      <p>it has some cool stuff!!</p>
    </div>
  </body>

to this second <div> tag we've added three children: an <h2> tag, and two <p> tags. if all is well, your website should now look like the following:

website with two links screenshot

this is cool, but it's very boring. we want our page to be unique! to wow people tuning in! to be the most amazing neocities page ever! in my case, i wanna have an early web type of website, with the fun backgrounds, cool text, and all that jazz. to get there, we'll need css

css

if you've ever heard about css, you're probably scared of what's coming next. yes, css is a scary beast, but it can be tamed, and i'll show you some tricks to not get too lost

first of all, go back to the neocities dashboard, and open style.css. you'll see the following:

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

note: the comment is right, anything you might want to do can be easily searched for! i encourage you to experiment and search for stuff you want to do, it's the best way to learn

css files consist of a list of rules. in each rule, we first give it a selector, and then a list of styling properties we want to give to every element that matches that selector, which are contained inside the curly brackets ({}). each property does something different, and there's a lot (A Lot) of them

in the code above, we only have one rule, which has body as a selector, and three properties. the first one, background-color, is pretty self-explanatory. the second one changes the color of text on the page, and the last one, changes the font used. if we replace it with the following:

body {
  background-color: red;
  color: white;
  font-family: 'Times New Roman';
}

our website will now look like this:

red website

note: if you don't see any changes after refreshing, the css file is probably being cached, and you'll need to either clear it, or open the page on an incognito window

now, this is not particularly nice to look at, so we'll change it for something nicer. for starters, we'll get a cool background from here. i've picked this one:

image of the background i've selected

download it to your computer, then drag and drop it into the dashboard. you'll have something like:

dashboard with background image

make sure to rename the uploaded image to bg.jpg. with that, we can go back to style.css to add it as a background image. for that, we can use the background-image property:

body {
  background-image: url(/bg.jpg);
  color: black;
  font-family: 'Times New Roman';
}

to indicate where our image is located, we use url, and we give it the path to the image

next, we'll center the text by adding a text-align property:

body {
  background-image: url(/bg.jpg);
  color: black;
  font-family: 'Times New Roman';
  text-align: center;
}

at this point it should look like the following:

text centered cool bg

this could already work as a very plain linktree replacement, but the fun in having your own website comes from the full range of customization it provides! i obviously can't show you every possibility in this post, as it's basically infinite, but i can show you some more stuff. and, as the comment on the css file said, google anything else you want to do

cards

we're gonna add classes. classes help use be more specific with our css selectors

  <body>
    <h1>im annie!</h1>

    <div class="card">
      <h2>
        <a href="https://soundcloud.com/annieversary">
          soundcloud
        </a>
      </h2>
      <p>you can checkout my songs here!</p>
    </div>
    
    <div class="card">
      <h2>
        <a href="https://versary.town">
          website
        </a>
      </h2>
      <p>this is my personal website!</p>
      <p>it has some cool stuff!!</p>
    </div>
  </body>

by adding the classes to those two specific elements, we can now target them in css using .card

body {
  background-image: url(/bg.jpg);
  color: black;
  font-family: 'Times New Roman';
  text-align: center;
}

.card {
  background-color: white;
  width: 30rem;
  margin-top: 3rem;
}

if we instead had used the div selector, every other <div> element on our page would get those style properties applied, which we might not want. at this time there are no other <div>, but still

rem are a unit of measurement used in css. we could have used pixels, with px, but rems are nicer to work with in my opinion

if you reload the page now, you'll see the following:

non-centered cards

that's not really what we were expecting, and here's where the difficulty of computers comes from. computers do what we tell them to do, not what we want them to. we told it to align all text to the center, but we didn't tell it to align the <div> elements to the center, so it's left aligning the <div>s, and center aligning the text inside them

to fix this, we'll need to add a bit of stuff to the body rule:

body {
  background-image: url(/bg.jpg);
  color: black;
  font-family: 'Times New Roman';
  text-align: center;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

with this we have changed the display method to be flex, instead of the default block, and we're making the children be aligned to the center, and to be displayed vertically with flex-direction: column

with that, our cards should look centered! they're a bit bland though, so we'll add some cool borders. i like using broider, which lets you draw by clicking, and then generates a css rule we can add to style.css:

screenshot of broider

i drew a pattern i think is cool, and then i grabbed the .broider rule that's autogenerated for me, and i pasted it into style.css. as a check, here's how that whole file looks like right now:

body {
  background-image: url(/bg.jpg);
  color: black;
  font-family: 'Times New Roman';
  text-align: center;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card {
  background-color: white;  
  width: 30rem;
  margin-top: 3rem;
}

.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACjElEQVR4Xu2cwVLDMAxE2///aOiJIaHT581Krl2Wq9bW6kmOUxh6v+WnlMC9dLdsdgvQ4iEI0AlAvybkKE4hbdda37MJbU0old4jbq0vQP2mHRgG6BuAVl9c1UeOkHT7lye02xABcePd/gPU7ND5hAXoakBfduhhluJmPfZy8mfFR275s8ZKaOPwN3D9lx9515CPxNvB9R+gJ/7LAT3PBxmkeaL1btzNL9V75RkqJaBqBi6xAB2A+FviAqP1ZEddX/4MzYQeCdgv9tRRitPEdMfJnxW/8gy1EnbTGtjf9V9+5F1DAzW3Slz/Afru99DW8fj0zat/V/jpvLC+AEVEmiBANV6oHgFKtyIm2Vwg1R+g3O0AZUaSIkAlXCyeDlRKyP6nK8g/xQ+GK56hUsLpuDgh+ad4gBZ/FA3Q1YHyodpbMf3I742L3QcoM5IUASrhYvF0oFJC9j9dQf4pnlt+9Vte6uD0+eOE5J/imdDVJ5RnYG/F9AndGxe7D1BmJCkCVMLF4ulApYTsf7qC/FM8t/zqt7zUwenzxwnJP8UzoatPKM/A3orpE7o3LnYfoMxIUgSohIvF5UA5ZRQ/BEb+Lh9cAoEAFWCNSAN0hJKgyb/V3P58uxpdQi/jARqgwvl7LrUm8LFlJrT4s3s50HPfqeM0UrTejbv5pXqvPEOlBFQNHaGCOFmghkn1Bqj+LT458jCib59QMkBxOoLdcfJnxa8ceSthN62B/V3/5UfeNTRQc6vE9R+gu72HquN07rC6XtVX/wKofELVgug9zt2P1gcoERLjASoCI/lyQMkwxasLonwUr36Gy1+ERQYpHqBESIwHqAiM5P8eKAFK/AWB1aZn+2YFaHELA7QY6DcNGRBkDsgg/gAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}

note: that huge blob of text is a base64 encoded image. it's an easy way to store images in a text format

if you now reload the page, you'll notice that the borders don't appear anyway yet. that's because we're using the .broider rule, which applies to elements with the broider class (because of the . at the start of the selector). we can add it to our cards like so: class="card broider". you can have as many classes are you want in your elements, you just need to add a space to separate them

reloading the page should show the following:

cool borders on the cards

images

last thing we'll do is to add an image. i want to show my profile picture at the top of the page. for this, we can use the <img> tag. they take a src attribute, where we can specify a url to the image we want. browsers allow us to write relative paths when using urls to things on our own website. for example, instead of using src="https://username.neocities.org/pfp.png", we can just do src="/pfp.png"

i uploaded my profile picture to the dashboard by dragging and dropping, and then renamed it to pfp.png

i'll put it above the <h1> item:

  <body>
    <img src="/pfp.png" />
    <h1>im annie!</h1>

    <div class="card broider">
      <h2>
        <a href="https://soundcloud.com/annieversary">
          soundcloud
        </a>
      </h2>
      <p>you can checkout my songs here!</p>
    </div>
    
    <div class="card broider">
      <h2>
        <a href="https://versary.town">
          website
        </a>
      </h2>
      <p>this is my personal website!</p>
      <p>it has some cool stuff!!</p>
    </div>
  </body>

you might notice something weird with the image tag. there's no closing tag, and instead of the / being after the < character, it's right before >. this is what we call a self-closing tag. in a nutshell, it's like an opening and a closing tag fused together. it's used on elements that don't have children, like <img>

huge profile picture

now, the image has been added, but it's huuuuge. we can change it's size by, you guessed it, using more css! we'll add a pfp class to the image: <img src="/pfp.png" class="pfp" />. inside style.css, we can create a new rule that sets the width property for this class:

.pfp {
  width: 10rem;
}

finally, my page looks like this:

final page

nothing otherworldly yet, but here's where your own creativity comes in! you now have a base to build on

other stuff

meta tags

todo: explain the meta tags

separator line, for decoration