This page contains information about how you can make your own personal website! At the bottom are links to websites with 88x31 buttons and GIFs.
Hosting
The biggest hurdle for most people looking to make a website is finding a service to host a site for you. While it's possible to self host a website, this isn't recommended unless you know what you're doing, as it can be difficult and costly. Luckily, many free options exist which will host your website for you.
NeoCities - Recommendation for most people
NeoCities is a popular free website host modeled after the long defunct GeoCities. It gives you 1GB of free storage to build your own website, which should be plenty for most people. As of writing, my entire website only takes up 74.65 MB of space. This is my personal recommendation, and it's the service my own website is hosted by. If you want more storage or extra features such as a custom domain name, you can pay $5 a month for NeoCities Supporter, which I personally do in an effort to help support the NeoCities developers as well as to use my custom domain name. If you don't want to pay for anything, your website will be a subdomain of "neocities.org", for example "mjdxp.neocities.org".
Pubnixes - Recommendation for nerds
A pubnix is a public Unix or Linux system that you can register to join. You can then remote connect to the pubnix system and use it like any other Linux or Unix computer through a terminal. Most pubnixes will give each of its users their own website which you can use as your own personal site. This is great if you want to have more control over your website, but it requires you to know how to use a Linux computer only using a terminal, which is pretty daunting for most people. However, if you want to join a community of likeminded people and really learn how Linux and HTML coding works, this might be a good option for you.
Google Sites - Not recommended
Google Sites offers a very simple interface for website creation as well as free hosting, but it's extremely limited. I wouldn't personally recommend it.
HTML
Upon editing your new website for the first time, you'll probably find the idea of writing HTML very daunting. However, once you learn the basics, you can start making simple web pages pretty easily.
HTML is the "code" that a web page is written in. It defines the text, images, links, etc. contained in a web page.
HTML is made up of building blocks called "elements" which are surrounded by "tags". Opening tags look like "<p>", while closing tags look like "</p>".
An HTML document can be mostly split into two parts; the "head" and the "body". The head defines certain things like formatting and the title of the page shown in browser tabs. When you're just starting out, it's not something you need to worry about much. The body contains all the actual content of the page.
Here are some basic building blocks to get you started:
Paragraphs
Paragraphs allow you to put text on your website. Here's an example of something you might put in your HTML to say "Hello, world!":
<p>Hello, world!</p>
Links
Links are clickable pieces of text that will bring the user to another web page. You can have links to other pages on your own website, or you can link to an external website.
The default "home page" that visitors will land on when typing in your website in their web browser is titled "index.html". While you can have all of your website's content on one page, it makes sense to have other pages on your website to keep things organized. A well designed home page should typically have links going to most pages on your website. You could also have a link which goes to a list of other links.
If you're using NeoCities, when you make a new page on your website, it'll automatically use a template so you don't have to worry about specifics regarding syntax. Otherwise, you can just copy the index.html file, or make a dedicated template file to copy in the future.
Assuming you want to make a link to the newly created page "about.html" on your home page, you'd put something like this:
<a href="/about.html">About me!</a>
Notice the href="/about.html" inside the opening tag. Most tags can have additional information put inside them like this. The "a" tag in particular needs you to put "href=" followed by the web page you'd like to send the user to when they click on it. The "About me!" between the tags is the text that will be displayed as the link. It will usually automatically turn blue and underlined to indicate to the user that it can be clicked on.
You can also put a link to an external website inside the first tag:
<a href="https://google.com">Google</a>
This example will make a link to Google. Any links going to an external website should start with "https://" to tell the web browser that the site isn't being hosted by you.
Lastly, links can be put inside paragraphs. For example:
<p>Click here to read <a href="/about.html">about me</a>!</p>
This puts the link in between the text. It will look something like this:
Click here to read about me!
Images
Images are the last major building block you can use to make a simple website. Here's an example of the HTML you'd use to put an image on your website:
<img src="/images/welcome.png">
Notice how the image is only a singular tag. In some cases, like with the "img" tag, you do not need to have a closing tag.
You can upload an image to your website in NeoCities by clicking the "Upload" button on your dashboard. In this example, the image is inside of a folder called "images". Similarly to your computer, a website can have folders to better organize files. Most websites will have a folder specifically for images, and oftentimes similar web pages will be grouped together in folders.
HTML Tutorials
With paragaphs, links, and images, you can make very basic web pages. However, you're likely going to want to make your website look more interesting using other elements or CSS, which is a topic I didn't cover here. For more information on HTML, W3Schools is considered by most to be the best source of information.
Here are the W3Schools pages on paragraphs, links, and images to get you started.
Resources
A lot of people like to recreate the retro web aesthetic using 88x31 buttons and retro imagery such as under construction images. Here are some great resources to find some:
GifCities
This is a searchable database of images which were used on the now defunct GeoCities service, which was a website host from the 90's and 2000's. It has a bunch of aesthetically pleasing retro imagery available. Use this link to filter to only 88x31 buttons.
The 88x31 GIF Collection
This website has thousands of 88x31 buttons for you to download. You can't search it, but they're sorted alphabetically.
99GIF Shop
A website with a bunch of GIFs for download.