Making a Site
While making this site, there's been a lot of pieces of info I've had to really do digging for. Most information on web development online is based on the idea that you are trying to make your site as optimal as possible, to get it to the top of the search results, to make as much money as possible, etc. For obvious reasons, that is not what I'm trying to do here. So I thought I'd consolidate all the things I've learned to help you make your own site. I'm not anything close to an expert on any of this stuff, I was just frustrated with the currently available guides out there. During the site creation process I just kept finding new random things I should add to mine.
The Basics: HTML, CSS, and Javascript
You may be put off from making your site by thinking that you'll need to learn how to code, but you really don't. What the content of your site is made in, HTML, is often considered to not even be a coding language. It's more of a formatting language if anything; you'll define when things like paragraphs, headings, and links start and end. It really isn't that hard to understand, even if you have no background in coding. To define the design and style of your site, you'll use CSS. Things like colors, sizes, and behaviors. It also isn't complicated. Javascript is a little more complicated; it is definitely an actual coding language. Thankfully, once you get it working you likely won't need to tweak it much if your site is a simple static one like mine. There are lots of premade scripts for you to use online. You can use W3Schools (also good for any of your code learning aspirations) and Neocities to learn all three.
Site Templates
Making your site look nice is hard. Despite the fact that I already knew HTML, CSS, and Javascript, I couldn't make my site nice. When I started I tried for a solid 30 seconds before I realized I wouldn't be able to. Thankfully, there are free to use site templates available online. I used Editorial from HTML5 UP!. Since then, I've heavily modified and changed the backend significantly.
Neocities
Neocities is a service that aims to bring back "the fun, creativity and independence that made the web great" (Neocities). You can use it to host your own personal site, for free, to help you get away from the centralized nature of social medias and platforms owned by billion-dollar corporations. You can use their tutorials to learn how to create your own site. I originally used it for this site.
Hosting
Once I was committed to making this site a big project, I decided to move away from Neocities for hosting. The annoying thing is one of the most commonly suggested options for hosting is GitHub Pages, but considering Microsoft's... everything I didn't want to use it. I experimented with a lot of different options, but I eventually settled with Cloudflare Pages for hosting. I also purchased the domain with Cloudflare, simply because it was the cheapest I could find and because I was already hosting with them. I've also heard great things about Porkbun for domains.
Accessibility
It is crucial you make your site as accessible as possible. Make sure your website is screen reader compatible and that everything can be navigated with a keyboard alone. Make sure any and all images have alt text so screen readers can read them. Make sure the colors on your site have enough contrast so that anyone with any vision disability can still view it. Make sure you can disable/skip anything like fast animations, flashing colors, and music. Make sure all videos and audio have captions. Make sure any files you have for download are accessible, especially for pdfs. This isn't a comprehensive list.
Images
For a long time, I wanted to add images to the site but I struggled with finding images I could confidently use without fear of copyright infringement or something. That's when I remembered that Wikimedia has a large collection of images that are all completely in the public domain, available to use and modify. You can search for images with them on Wikimedia Commons.
Dark Reader
I love the Dark Reader extension as it allows you to automatically have dark mode on every site, even for sites that don't natively have one.
If your site is by default in dark mode, like mine, you can easily disable it with <meta name="darkreader-lock">.
If your site has a dynamic/togglable dark mode, you can dynamically disable Dark Reader with Javascript using the code in their documentation.
Site Checkers
There exists many sites where you can plug in a link to your site to have it check your site for something. I used multiple, including one to check for bad links, one to check for typos, and one to check for accessibility.
404 Page
Depending on where you're hosting your site, you can create a custom page for 404 errors (that is, when the user ends up at a link on your site that doesn't exist). That way instead of seeing a generic error message, they can easily navigate back to any given page on your site. Check with how you're hosting to see how to make one.
Robots, Sitemap, RSS
There are three files you should/could add to your site to improve their functionality, those being robots.txt, sitemap.xml, and an RSS xml. Your robots.txt and sitemap.xml both exist to tell bots, crawlers, and things like search engines how to navigate your site. If your site has any kind of "blog" content - that is article style things where updates happen often and people may want to be notified when new content comes out - create an RSS feed that way people can subscribe to it on their RSS readers.
Redirects
Also depending on where you host your site, you may be able to easily create redirects so that if someone goes to one address they'll be redirected to another. This is could be useful if you change the address for something, so you can redirect from the old one to the new one, and so you can redirect common pages like /about or /feed (for RSS) to what they should be.
Disabled Javascript
It is possible that a few people who come across your site have Javascript disabled. Some resources online simply say to ignore those users, but I didn't want to leave anyone in the dark. If your site is complicated and heavily relies on Javascript to function I wouldn't worry about it, but considering my site is simple I could easily make a Javascript-less version. The only thing I used Javascript for was to inject the code for the sidebar into every page, the sidebar's dropdowns, and the arrow key navigation. If you opened the site with Javascript disabled, there would be a blank box where the sidebar should go and the site would still claim you can use the arrow keys to navigate, despite that not working.
The key to making your site work without Javascript is <noscript>.
The <noscript> tag allows you to set content that will only appear if you the user has Javascript disabled.
Utilizing that, you can create a CSS class that will only appear if the user has Javascript enabled.
In the header of your HTML files, probably near your other <style> objects, place <noscript><style>.js-only{display:none}</style></noscript>.
This will make it so elements with the class .js-only will only appear if the user has Javascript enabled, otherwise they will be hidden.
I used these methods to hide the sidebar and show extra navigation options for users without Javascript.
I also used it to make a paragraph that changes depending on whether you have it enabled or disabled, which can be found here:
<p>
<noscript>This site works better with <a target="_blank" href="https://en.wikipedia.org/wiki/JavaScript">Javascript</a>, but you have it disabled. Without it, you can't </noscript>
<span class="js-only">You can </span>
use the sidebar or the left <kbd>←</kbd> and right <kbd>→</kbd> keys on your keyboard when applicable to navigate across the pages.
You can also use the "<a>← Previous</a>" and "<a>Next →</a>" buttons at the bottom <noscript>and top </noscript>of every page to navigate.
You can get a link to a specific section by copying the link from any header or the sidebar.
If there's anything I should change, improve, or clear up (especially if there is a barrier to accessibility), <a class="in-site" href="links#Contact">let me know</a>.
</p>
Search Engine Optimization
Search engine optimization (SEO) is the process of making your site appear as close to the top of search results as possible. As the definition suggests, it's highly related to monetization. The higher your page is on search engines, the more users you'll get, the more ad money you'll rake in. Any resource on SEO will be about that. If it wasn't obvious from the rest of the site, I'm not interested in that. Despite that, I still feel that I should do my due diligence to make sure that if people search for my site or it's related concepts that my site will come up. After digging through lots of resources focused on maximally monetizing your site, I came up with the following.
One big part of SEO I thought I'd mention are backlinks, which is when another site links to yours.
Most of the SEO you can actually control is in the headers of your HTML files.
I'd assume you already have the <title>, <meta charset="utf-8">, and <link rel="icon" href="...">, but there's a lot of other things you can add to help your site.
Here's mine for the Blocking Ads and Internet Privacy page as an example:
<head>
<title>Blocking Ads and Internet Privacy - Machines Against the Rage</title>
<meta property="og:title" content="Blocking Ads and Internet Privacy">
<meta property="og:site_name" content="Machines Against the Rage">
<meta property="og:type" content="website">
<meta property="og:url" content="https://machinesagainsttherage.org/blocking-ads-internet-privacy">
<meta property="og:description" content="Here are multiple products/services you can use to improve your internet experience by blocking ads, increasing privacy, and fighting back against our corporate overlords.">
<meta property="og:image" content="https://machinesagainsttherage.org/assets/Open_Graph.png">
<meta property="og:locale" content="en_US">
<meta charset="utf-8">
<meta name="description" content="Here are multiple products/services you can use to improve your internet experience by blocking ads, increasing privacy, and fighting back against our corporate overlords.">
<meta name="keywords" content="big tech, degoogling, internet privacy, ad blocking">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="darkreader-lock">
<link rel="stylesheet" href="assets/main.css">
<noscript><style>.js-only{display:none}</style></noscript>
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"WebPage",
"name":"Blocking Ads and Internet Privacy",
"description":"Here are multiple products/services you can use to improve your internet experience by blocking ads, increasing privacy, and fighting back against our corporate overlords.",
"url":"https://machinesagainsttherage.org/blocking-ads-internet-privacy",
"publisher":{
"@type":"Organization",
"name":"Machines Against the Rage"
}
}
</script>
<link rel="canonical" href="https://machinesagainsttherage.org/blocking-ads-internet-privacy">
<link rel="icon" href="assets/favicon.svg">
<link rel="prev" href="why">
<link rel="next" href="social-media-and-streaming">
</head>
There are lots of links to documentation in the above code.
Follow the provided links to learn more about how to implement everything.
Let's go line by line, skipping over the uninteresting things.
Most of it is pretty self explanatory
The first group of things with og: in front are the Open Graph items.
They will make sure that whenever your site is linked to, the preview for the link will look nice.
Next is multiple meta name="..." objects.
The Schema (<script type="application/ld+json">) provides more info for search engines.
link rel="prev" and next provide the next and previous links on your site.
Some info is present multiple times, including the site's description being in meta property="og:description", meta name="description", and <script type="application/ld+json">{"description"}</script> and the page's link being at meta property="og:url", <script type="application/ld+json">{"url"}</script>, and link rel="canonical".
This is not an exhaustive list, but it's more or less good enough for me.
There are other things you can do like Twitter Cards and some iOS/Safari specific things.
r/SEO was a very good resource for this.