A lot of people want to have a personal space and property on the internet, but a lot of them don't know how... So today I'm going to be showing you how you should go about making a website
Also, you should not straight up copy everything here, you should just read it and use it as a rough outline, you should never copy off tutorials or anything of sort
# Tl;Dr
Keep it minimal, simple and avoid using bloat, also make sure to keep going rather than giving up, learn rather than use some shit service, experience with code also helps
# Have prior programming experience
You'll need to have prior programming experience to understand what is really going on even though nor HTML nor CSS (the bare base of your website) are programming languages, many answers you'll find online will also use terminology that you won't understand if you don't have at least a bit of it
Even if you don't have prior programming experience, please don't resort to website builders or static site generators, it won't teach you anything, rather learn some programming language like python or even JavaScript, JavaScript alongside HTML and CSS is a huge part of the web stack
Anyway, if you don't have any experience, gain some and then come back, unless you want to just have a read, then go ahead :) Although without it, you won't get too far probably
# Learn basic HTML and CSS
First up, before you can do anything you'll probably want to learn HTML, to style it you'll probably want to learn CSS, although I have recommend this to many people, they seem to not understand what learning is, they find a tutorial and copy off it and then end up using inline style attrs or style tags in html, they begin making their HTML messy and invalid and generally make their site so messy and broken it becomes an unmaintanable mess, so what you should do
- Learn what HTML and CSS are, you need like 10 mins to look up the definitions and stuff
- Learn HTML
- Learn CSS
Once you have the bare minimum, make a simple HTML document and save it, this will serve you the purpose of archiving your progress and you'll be able to see how much you reached in like a month
To help you get started, here's quite a good template to start with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your title</title>
<meta name="description" content="Your description" />
<meta
name="keywords"
content="your, keywords, idk something, website, aaaa"
/>
<meta
name="robots"
content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"
/>
<meta property="og:type" content="website" />
<meta name="color-scheme" content="dark" />
<!-- ^^^ dark theme -->
<link rel="manifest" href="/manifest.json" />
</head>
<body>
<!-- Your markup -->
</body>
</html>
# JavaScript
JavaScript is a programming language made for the web, or at least is a huge part of the web stack, but these days it can run even serverside code using nodejs, but JavaScript (JS/js) is quite painful to code in, so if you want a better experience with programming on the internet for your website try TypeScript (TS/ts) out
You'll use JavaScript to handle logic on your website, for example if you want to check what a user has entered in a text box or managing state(s)
Although JS or TS are more than optional, hell, even CSS is optional, but if you want to make your site at least slightly nice you'll probably want at least CSS
# Never say "it's too hard"
After all of this, many people (including quite a few of my friends) would (or are) say "it's too hard" and resort to using some site builder with WIX or use a static site generator which bloats up your site to unbelievable levels, "it's easier" you'll say, even though this will end up making your site low-key shit and you'll have to deliver megabytes of content to your website visitors which is not pleasant for anyone, nor you hosting it (we'll get to it later) nor the user visiting it, especially if they have a bad internet connection, it doesn't teach you anything either, just bad in general, please keep pushing, you can do it
Also, most web frameworks also cost a shit-ton of money and have mannnyyy hidden fees and spyware, so just stay away from them
# Avoid frameworks
Frameworks, although useful when you understand what everything means, don't teach you anything, and once again bloat up your site
# Separate and track your learning
By separating and tracking your learning progress you'll see how much you reached, how you improved and what you did to improve, you will also have a great resource to
# Manual is better (usually)
If you do most things manually (as in not using too many frameworks) you'll gain more knowledge and make your site smaller and simpler overall, I prefer to do things manually and I made my site quite small, while frameworks (e.g. react or bootstrap (they are not comparable, but just examples)) tend to be huuuuggggeee in size, meaning your users will have to a) depend on 3rd party code and make your site worse and even then, if you're using the framework you are, you're learning the framework, not the actual logic (e.g. if you're using bootstrap, you're learning bootstrap, not CSS)
Although, note the (usually), for example this blog is generated by my own static site generator which optimises stuff and makes it accessible for everyone, it doesn't bloat anything up, so if you have something like this (a blog), I'd suggest writing your own or using a small static site generator, at least from that you learn something
This blog generator is quite simple, creation of a blog is like
Markdown + text -> base64 encoding -> JSON
And generation
JSON -> base64 decoder -> markdown -> HTML -> minification -> index.html file in a designated directory
# Writing your site
After all of this, you probably have few documents you can refer to, this will be a great resource for you if you forget something, but don't be scared to look things up, it's normal and a part of a developer's experience, nobody, and I mean nobody in 2022 knows how to center a div without looking it up lol
But, besides that, here's a few tips to help you
- Automate only if needed
- For example if you have something like a blog with many pages
- Don't focus on SEO, this will only make your site worse
- Although basic SEO is fine, like adding a
sitemap.xml or robots.txt or something - Don't add like a milion
meta tags too, just like 10 at max is good enough
- Focus on A11y (accessibility), because it's quite important for your site to be accessible to anyone, try using:
- Semantic elements
- CSS media queries
- Accessible design
- ARIA attrs
- Less is more, don't (over)use (over)complicated logic and frameworks with huge sizes, use little to get the result you desire
- Every little thing matters, especially on the web, every little bit of performance matters
- Asset optimisation is good, but make sure to not overdo it to the point only the newest browsers can run it
- For example asset optimisation at build time is an amazing example of much needed asset optimisation, although optional if you don't really care
- Server-side gzip compression also helps
- Image compression helps, quite a needed one especially if you have many images
- Bundling can and does help, but isn't super major and plus can break some functionality
- And don't forget about logic and CSS optimisation
- Don't add tracking, it just introduces security vulns, bloat, distrust and general bad things
- New technology can wait, let it develop and be supported amongst more browsers
- Just like when you were learning, don't be scared to separate content into different folders and files
- Fun thing: if you want a page without
.html at the end just, make a directory with the page name you want and have index.html in it, but your server might support doing that automatically :)
- Have a place to test and run your site temporally
- A dev server is important, because
file:// is usually not a good place to test it, use like live-server, I use it and I like it personally
- Use a VCS
- Although doesn't mean you have to make it open source (although you should (we'll talk about it)), you should still use a VCS,
git is probably the most popular one, while building your site you're going to have many fuck-ups and you'll want to say "eh, fuck it" and reset all of your changes, well, without a VCS.. Good luck lol - But this means you will have to learn a VCS, no, a VCS is not 'press upload button to GitHub', use the CLI
These are some things I could thing of, I use them all lol, anyway, let's continue
# Open source
Many people would say 'WhO tHe fUcK nEEdS thE sOurCE cODe oF A sItE' and that's just an idiotic mindset to say the least, anyway, here's some good things that come with making your website open source
- You're helping the open source community grow
- You're showing all changes you make to the public
- It's basically free advertising
- You show what your site does to the public, meaning it creates the feeling of trust
- You feel more accomplished when you show something to people and they like it
also if your point of not making it open source is just 'just open the dev tools' you're stupid, but you know what, okay then, send me the source code of google to my email, would be appreciated.. Oh waitttt you can't because it's not the full assets, it's obfuscated and minified and plus it's probably modified
# Hosting
Hosting is when you actually let people see the stuff you made, hosting your code is one thing, but hosting your site is another, I personally use netlify, it's an amazing, free and non-scummy platform for hosting your static site, it also provides amazing documentation, help and customisation and all of this for free, although more limiting, a good choice is also GitHub or GitLab pages
Although I think out of those 3 netlify is the best choice for static sites :)
But if you want something server-side, I doubt you'll be able to find anything free, but this is not a
# Publicising and sharing
Don't be annoying about it and don't shove it into everyone's face, just add it to your bio, put it on something like wiby and be happy, it's not a competition, just make fun things and people will like it :)
You can also share it with your friends and other strangers which are interested
# What can you do on your site
- Host files
- Make a blog
- Have fun with code
- Explore random frameworks (when you already know what you're doing)
- Talk to people
- Share your projects, thoughts and opinions
- Learn !
# Don't allow people to get in your way
Not everyone is going to like your site, if they call it shit, who cares, it's your place to do anything, for example would you burn your house down if someone didn't like it, it's yours, you're good with it and you need to enjoy it, it's your own property, just virtual
# Domain name
Domain names are really optional as most hosting services provide a subdomain, e.g. https://ari-web.netlify.app/, but you might like having your domain like https://ari-web.xyz/ which is shorter and just nicer, for domains you will have to pay, for example buy it from https://namecheap.com/, but there are services which provide free domains to people, those domains have very low value though, like .tk and .ga are usually flagged as untrustworthy and don't grow as fast
After you get a domain name you might want to set up HTTPS (if you don't already have it) and submit it to the HSTS preload list which will ensure the security of users visiting your site
# That's about it
Well... That's about it, it's a long process and getting it more popular is even harder, but don't try hard, don't be annoying about it to people and just make things you like and people will find it, anyway, hope you found this blog useful and I inspired you to join the web world, hope to see another web neighbour in the near future :)
Have a nice day and goodbye :)