YOU should make a website! Yes, YOU, the person reading this web page! Don't think you have the skills? That's fine. If I can learn to do it, you definitely can. Don't think you have anything original to offer to the net? That's fine too! We need people online who just archive and duplicate information about what they like so it isn't all stuck on ugly wikifarms like Fandom. WE NEED YOU HERE ON THE INDIE WEB! And I'm going to share what I know about how it's done.
Please note that I have no formal CS background. I am almost entirely self-taught. If you want to go to rely on something that is much more professional, just go to W3Schools. My site still probably has a lot about it that is sub-optimal. But I am improving and understanding more and I aim to get you to my level at least if you want to make a site like mine. This guide will assume that you have zero knowledge and experience and is intended for complete beginners. But it might have stuff that will help you anyway, so please feel free to skip to the parts of it that you think will help you.
(Also, anyone with more of a background than me, please tell me if I'm making any major mistakes here.)
The first thing you need to upload for your site is a file called index.html. This will be your home page. It's what anyone sees when entering your site's URL. When you type pantsuprophet.xyz in your browser's address bar and hit Enter, what you are seeing is actually my index.html file. Your site will just automatically load it as the home page.
So how do you create a home page? Want a demo? Copy-paste this into your favorite PLAIN text editor (like Notepad, not something like Microsoft Word) and save it as index.html:
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<h1>Your Website Name</h1>
<p>This is where you type text.<p>
</body>
</html>
Now open that index.html file in your web browser and voila, you should see a very basic web page!
So let's break down what some of these elements mean. If you've ever used a forum, you're probably used to brackets that you can use to decorate and embellish text. For example, when you write [b]bold[/b], it will appear as bold. When you write [i]italic[/i], it will appear as italic. Well, HTML basically uses the same rules: you enclose text in brackets, but they are triangular (<>) instead of square ([]). You can actually use things like bold, italic, and underlined text in exactly the same way in html. For example, try replacing the text portion in that index.html file (the part from <p> to </p>) with this instead:
<p>This is where you type text. It can be <b>bold</b>,
<i>italic</i>, or <u>underlined</u>.<p>
(Keep that index.html file open and try replacing the text with other stuff I'll demonstrate so you can see for yourself.)
So let's look at some of the other brackets that are being used here. The top and bottom are encased in an <html></html> tag. That basically just defines that everything between those brackets will be read as HTML, which tells the browser how to read it. <head></head> tells the browser the information before the actual page content. <title></title> tells the browser what to put as the title of the page (what appears on the top of the browser and as a title for a tab).
<body></body> defines the actual contents of the page. <p> </p> brackets a "paragraph." Any text in these brackets will automatically be read as one paragraph and only break to the next line when it reaches the edge of your browser. So it doesn't matter if you move to a new line as long as it's between <p></p> brackets. Observe:
<p>These two paragraphs look exactly the same.<p>
<p>These two
paragraphs look
exactly the same.<p>
If you DO want to move onto a new line within the paragraph brackets without moving to an entirely new paragraph, just add an element called <br> (no closing bracket needed):
<p>This paragraph is broken into multiple lines without an entirely new
paragraph division.
<br>See?
<br>It's easy!</p>
The <h1></h1> tags define a "header" or title. Browsers will use a pre-determined size and weight for 6 levels of headers in diminishing importance, onto <h2>, <h3>, <h4>, <h5>, and <h6>. Personally? I've never had a reason to use anything but <h1>. All my articles just use different <h1>s with my own numbering scheme to define sub-sections and so on. So I can't give much advice about these outside of that. But feel free to experiment. Just make sure you never skip a number. If you only have <h1>, don't move straight to <h3>, for exmple.
Some of your basic intuitions from forums will apply for other stuff in HTML. For example, if you want text to sit in the center of the page, just slap it in between one of these:
<center>This text is in the center.</center>
Adjusting the color of text requires something a little extra, but it's also very easy. You use a <font> bracket and define it in there:
<font color=#FF0000>This text is red.</font>
If you want to add a line division like I do on a lot of my pages, it looks like this:
<hr class="dashed">
What if you want to create a table like I have on my GAME INDEX? You would do something like this:
<table>
<tr>
<td>Put some data here.</td>
</tr>
</table>
The "tr" defines a new row for the table and the "td" defines a column. So right now this table would have only one row and one column. But you can expand it:
<table>
<tr>
<td>Put some data here.</td>
<td>Put some data here again.</td>
</tr>
<tr>
<td>Put some data here on your next row.</td>
<td>Put some data here again.</td>
</tr>
</table>
Want a column that spans all the rows? Put something like this with the number of total columns after "colspan:"
<table>
<td colspan=2>Title</td>
<tr>
<td>Put some data here.</td>
<td>Put some data here again.</td>
</tr>
<tr>
<td>Put some data here on your next row.</td>
<td>Put some data here again.</td>
</tr>
</table>
You probably want to make your site look more fancy than just black text on a white background (or maybe not... if you want to keep it as minimal and suckless as possible I respect that a lot!). In that case, you need to define the "style" of your page:
<style>
body {
background-color: black;
color: white;
font-size: 16px;
line-height: 1.1;
font-family: Courier, monospace;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
a:link {
color: #00ffff;
}
a:visited {
color: #00ffff;
}
a:hover {
color: #ff0000;
}
a:active {
color: #ff0000;
}
</style>
This is what I use at least. The first part is pretty self-explanatory: The color of the background and the color of the text. "max-width" is helpful for pages that are text-heavy, because it can be harder to keep track of huge paragraphs of text if they stretch all the way to the edge of the browser screen. The last four colors define what colors links appear as when they are fresh, when they've already been visited, when you're hovering over them, and when you're clicking down on them. This is just my preference.
The last thing I'll say is that if you add some characters to your webpage that aren't in the standard English alphabet, they will by default appear as "mojibake" (corrupted and unreadable). So to fix this, just slap one of these under your <title> section:
<title>Your Website Name</title>
<meta charset="UTF-8">
Now your .html file will display text as unicode!
There are more things I could teach here, but here's my advice: If you want to know how I or anyone else do something on a webpage, just right-click and "view source." You can examine any of it yourself. Once you have an idea how HTML basically looks, you can understand a lot of what someone is doing just by looking and experimenting by copy-pasting their layout in your own .html files. Of course you can always email me and ask me anything about this site and I'm happy to help. But I would just use W3Schools, because they are guaranteed to be more accurate and well-researched then me.
I haven't addressed how to link to other pages or how to embed images yet. That's because I want to address how your actual website is structured and how I recommend working on it. You can just dump a bunch of .html files in one folder that you will upload and have it look like this:
bio.html
buttsex.html
index.html
tentacle-hentai.html
This would give your website four pages: index.html (the home page aka www.yoursite.com), bio.html (www.yoursite.com/bio.html), buttsex.html (www.yoursite.com/buttsex.html), and tentacle-hentai.html (www.yoursite.com/tentacle-hentai.html). Well, you could just dump everything from your site in one big pool like this, but that would get hard to keep track of. So just make some directories and it works exactly like files on your computer:
pr0nz (folder)
----buttsex.html
----tentacle-hentai.html
bio.html
index.html
So let's say that you want to link something on your homepage, index.html. If you want to link to a website that isn't yours, you need to use an "absolute" URL, meaning it should look exactly like what you type in your URL bar:
<a href="https://pantsuprophet.xyz">Click on this to go to the best website on the
internet.</a>
Now, you could just link everything on your site with absolute URLs. So with the above setup, if you wanted to link to bio.html and buttsex.html from index.html, you could do this:
<a href="https://www.yoursite.com/bio.html">Click here to read my bio.</a>
<a href="https://www.yoursite.com/pr0nz/buttsex.html">Click here to see anal
sechz.</a>
This will work, but it's kind of unwieldy. And every extra letter you add that isn't necessary is a waste of bandwidth. So let's simplify it! If the link is going to another page on YOUR website, you can use "relative" URLs instead of "absolute" ones, which look like this:
<a href="bio.html">Click here to read my bio.</a>
<a href="pr0nz/buttsex.html">Click here to see anal sechz.</a>
Basically, just delete the part which has the main URL of your site. The .html will assume you're linking to your own website. Isn't that easy? HOWEVER, one thing will be somewhat confusing if you're not used to Unix. Let's assume your site is set up like this:
pr0nz (folder)
----hentai (folder)
--------loli-hentai.html
--------ntr-hentai.html
--------tentacle-hentai.html
----buttsex.html
bio.html
index.html
Let's assume you want to link back to the homepage from any page, like /pr0nz/hentai/tentacle-hentai.html. Easy! Just do it like this:
<a href="/index.html">Click here to go back to the main page.</a>
However, it will NOT work if you do it like this:
<a href="index.html">Click here to go back to the main page.</a>
Did you catch the difference? The first one has a trailing dash (/) and the second one doesn't. When you use a dash at the beginning, the .html will automatically read it as following from the MAIN URL. That is, it reads "/index.html" as "www.yoursite.com/index.html", no matter what page of your site you are on. But if you do it WITHOUT the trailing dash, the .html will read it as following the CURRENT URL. For example, if you are on www.yoursite.com/pr0nz/hentai/tentacle-hentai.html, it will read "index.html" (with no /) as "www.yoursite.com/pr0nz/hentai/tentacle-hentai/index.html". So just be very careful to remember the trailing dashes where you need them.
You want to add some images too, don't you? The absolute/relative URL thing applies for them too. You just have to have a place to store them on your site. Also, PLEASE host all your own images. Otherwise you are a leech feasting on other peoples' bandwidth. And it makes your site more stable in case they decide to replace the image with goatse to spite you. Anyway, here's how you do it:
<img src="/img/your-image-here.jpg" alt="my image">
The "alt" part is what text will be displayed if the image fails to load for whatever reason. It's important for degbugging, so it's best practice to have something there.
The last thing I'll say, in the interest of saving you from writing redundant HTML, I told you how to make your pages look how you like them to by defining the style like this:
<style>
body {
background-color: black;
color: white;
font-size: 16px;
line-height: 1.1;
font-family: Courier, monospace;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
a:link {
color: #00ffff;
}
a:visited {
color: #00ffff;
}
a:hover {
color: #ff0000;
}
a:active {
color: #ff0000;
}
</style>
However, unless your website is a particularly unusual art project where each page will look completely different, you'll probably want it to be fairly consistent. Also, what if you want to tweak how your website looks but don't want to open up each and every .html file and manually change the code? That's where a .css file comes in. Just make a file called something like yoursite.css and copy/paste that above data between the "style" brackets, then upload it to your site. Then on every page, you can replace the style section with this:
<link rel="stylesheet" type="text/css" href="/css/yoursite.css">
It's as easy as that! Now each page with this on it will simply use the yoursite.css as reference instead of having the style defined in the .html itself. So you can tinker with your global style without having to change each and every indivdiual page on the site. (I had to do this before discovering this... it wasn't fun.) That said, there might be cases where you want to keep it manual on some special pages. For example, the STREAM page of this site is the one exception as I want the stream to actually stretch to the full width of your browser window instead of being confined to 800px, so I don't use the above reference for that one page.
If you are making a website like mine, I HIGHLY recommend making an RSS feed! Modern social media is AIDS, but we all like having a "feed," so we can immediately see what sites (or channels, profiles, etc.) have updated and which have not without having to check each site we care about manually. What's the solution to this? A technology that is tried and true but has been forgotten with the advent of social media. Well, let's fix that. Creating an RSS feed for your site is extremely easy. Just make a file with the extension .xml and put it somewhere on your site. Whoever wants to follow it just has to paste the URL to that file in their favorite RSS reader. The contents of the file should look like this:
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
<title>TITLE OF YOUR RSS FEED</title>
<link>https://www.yoursite.com</link>
<description>Description of your site</description>
<item>
<title>TITLE OF THE PAGE YOU ARE UPDATING</title>
<link>https://www.yoursite.com/updated-article.html</link>
<description>Description of update.</description>
<pubDate>20260720</pubDate>
</item>
<item>
<title>TITLE OF THE PAGE YOU ARE UPDATING</title>
<link>https://www.yoursite.com/updated-article.html</link>
<description>Description of update.</description>
<pubDate>20260719</pubDate>
</item>
<item>
<title>TITLE OF THE PAGE YOU ARE UPDATING</title>
<link>https://www.yoursite.com/updated-article.html</link>
<description>Description of update.</description>
<pubDate>20260718</pubDate>
</item>
</channel>
</rss>
Anything in the "item" brackets is an item that readers will see as being an update in their RSS reader. Within it, you define what they will see in their reader and the date of publication. Writing it as year<month<date like this is the simplest way. When you want to add a new update, just add another "item" at the top of the list of items. You can keep as many updates in the .xml file as you want as the information will automatically be transferred to readers, but I always just keep three, deleting the last one whenever I replace it with the first.
The most fool-proof way to keep the RSS updated is to do it manually. I do this whenever I update my site. It's really not too bad. Just open the file, copy/paste the previous item, and switch around the URLS/descriptions/names. But it is possible to write scripts that automate the process. That is outside of the scope of my abilities right now, so you'll have to find somewhere else to teach you it!
Congratultions, now you have the site ready to go live! But how? Well, you need a host (unless you are using a machine you own to host, which I can't help you with) and a domain registrar. Some services offer both. What you can afford depends on your means. I've used DreamHost for both, and they are pretty well-priced. I now use a VPS (virtual private server) via Vultr for heavy-duty server stuff, but you definitely don't need this much at first. The easiest choice for beginners is Neocities, which offers a quite decent 1GB of storage and 200GB of bandwidth for free.
Choosing a good host can be tricky if you want to host potentially controversial content. Always read the fine print of what your VPS service says and be aware of the laws of the country in which it is hosted. Servers hosted in the United States, for example, tend to be very good for free speech (such as things like conspiracy theories), but bad for piracy and copyrighted materials. Namecheap and Porkbun seem to be good from my meager research. I'm lucky enough not to be hosting anything too crazy so far, so I'm in a somewhat privileged position. I say find a registrar and be ready to transfer if shit hits the fan.
What you have to do now is upload your files to a remote directory. The best program to do this for beginners is FileZilla. After logging into your server (with information that your domain registrar will provide), you just drag and drop files from your local machine (on the left) to the remote server (on the right). Eventually, there are a lot of advantages to learning to do this all from the command line with ssh commands. But if you're a beginner, I recommend using FileZilla first so you at least know what you're looking at with a GUI.
This is just a basic overview. I suggest reading these for more information:
LRS Wiki - HTML: Basic overview of HTML from a friend.
LandChad.net: Information on building and
hosting your own platforms. Advanced stuff, but indispensable if you want to make the
jump to having your own server with root access.
Dig Deeper VPS Reviews:
VPS reviews from the most schizo-tier privacy and freedom oriented investigator on the
internet (the gold standard, in other words).