Your Own Website: Handmade Link Tree

There are lots of services that will help you make a "link tree" website, but a list of links is one of the simplest websites you can make with HTML. If you already have a website, make a new page and name it links or linktree or whatever you want. I call my link tree page follow. (If you want to see an example of a personalized page, you can look at my follow page).

If you don't have a website, check out the free web hosts I've tested and make a website. I suggest Neocities or Nekoweb for beginners.

selfh.st icons - A source for icons and logos


The first and possibly easiest method is using an unordered list. The list is between <ul> tags, and each item in the list is between <li> tags. Link to whatever you want in your list.


<ul>
    <li><a href="https://www.shannonkay.com">Shannon's Website</a></li>
    <li><a href="https://blog.shannonkay.com">Shannon's Blog</a></li>
</ul>
                

The list of links is just a snippet of code, so we need to put it into the structure for an html page, like this one.

If you want the link tree to be the main page of your website, name it index.html and put it in the root folder of your website. If you want the link tree's address to be something like mywebsite.tld/linktree, make a folder called "linktree" and make an index.html file inside that folder. You can also make your link tree in a file named something like linktree.html and you'll have an address for it like mywebsite.tld/linktree.html.


<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Link Tree</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>  
    <header><h1>Link Tree</h1></header>
                
   <main>
   </main>
                
    <footer>This Link Tree was made by Shannon</footer>
    </body>
</html>

Put the unordered list between the <main> tags.


<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Link Tree</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>  
    <header><h1>Link Tree</h1></header>
                
    <main>
        <ul>
        <li><a href="https://www.shannonkay.com">Shannon's Website</a></li>
        <li><a href="https://blog.shannonkay.com">Shannon's Blog</a></li>
        </ul>
    </main>
                
    <footer>This Link Tree was made by Shannon</footer>
    </body>
</html>

I now have a super simple "link tree". Here's what my example looks like.


I had this much already written up, and decided to share it instead of waiting. Hopefully, this is helpful for getting people started. I plan to expand on this tutorial with things like how to include icons, and some ways to style your links. In the meantime, if you've gotten this far and don't want your link tree to look very plain and unstyled, you can head over to the style section of Make Your Own Website for some help.

Visit Make Your Own Website for a more in-depth beginner's website guide.