It sounds like you’re on the right track. As long as you aren’t hosting anything too important, just go for it. The only thing to keep in mind is security, which in your case should be fairly simple.

1. Use common sense: if you never have to enter a password or have a security key to access something, neither does a hacker. You would be amazed how many people host their openhab instances to the internet with no passwords.
2. Use ssh keys and disable passwords. Ssh keys are sort of like giant passwords that sit in a file and you never have to type in. It is counter intuitive, but it is more secure. A giant key is harder to guess than a password. You can also encrypt your key so you need the key and a password, this is useful for laptops which could be stolen.

For how to learn simple html and css, w3schools is your friend. You can learn all the random stuff people become extremely opinionated on eventually, but don’t get overwhelmed by all of it and just do what works for you.

You’ll need something to actually host the site. I usually stick with nginx but that’s just preference. Once you get that running you can edit files for the site & start looking into some guides or tutorials for nginx.

I don’t recommend putting your site on the general internet. It’s just going to be attacked & can compromise your network. I have local web services but use a WireGuard VPN setup so that I can access when I’m not home, & not allow access to the internet.

Acronyms, initialisms, abbreviations, contractions, and other phrases which expand to something larger, that I’ve seen in this thread:

10 acronyms in this thread; the most compressed thread commented on today has 8 acronyms.

[Thread #824 for this sub, first seen 22nd Jun 2024, 20:45] [FAQ] [Full list] [Contact] [Source code]

At the very least you need to install a webserver and you need a proxy of some kind. If you truly want old school you can just create html pages hosted from the root of your webserver (although there are now easier modern ways to do this, you might learn more the classic way rather than using a CMS).

You will want a reverse proxy to lie between your webserver and the internet that handles SSL. Let’s Encrypt is a good option to generate a cert so that you only expose port 443 on your router to the internet and your webserver. You’ll have to open port 80 to generate the cert but can close it again once generated. Then you will have https.

That’s the basics. The how-to’s are easy to find online.

For the site itself the most minimal thing you can do is an html file.

Then some software to act as the “server” that serves that file to a visitor. (nginx, caddy, apache - there are many options).

And your domain needs a domain record which points to your server.

As you want to use a home pc, you need to figure out whether your ISP gives you a dynamic or static IP.

If static, you can just use that.

If dynamic, you’d need some service like dynDNS to keep pointing your domain to your changing IP.

So your goal is to host a publicly accessible static website from a computer in your home. There are a few problems you need to overcome before even worrying about configuring any software. You need some more basic networking knowledge first.

0. Basic Networking Theory - you should read a brief explanation of the OSI 7-layer network model. You don’t have to try to memorize this and you won’t really understand it until you start actually doing stuff, but you should read it for some basic terminology and to understand that there are distinct steps through which communication between computers happens.

   When you start running into problems (“why can’t I access the server? I did all the tutorial steps”), figuring out which layer the problem is in will help guide you to the solution:

   • is there a bad cable? -> 1. Physical
   • do I have the right IP address? -> 3. Network
   • is the firewall port closed? -> 4. Transport

1. Privacy/Security/Safety - don’t host a publicly accessible website from your personal computer. Just don’t. To make this happen you will have to open a hole in your network security that makes your computer accessible from the public internet. Don’t do this on your daily driver computer. Don’t do this with any device that has any files on it that you care about or any access to any personal information. Don’t.

   Set up your web server/learning environment on a clean, dedicated system. This could be an old laptop or a Raspberry Pi (an older 3B model will work just fine for this) or whatever cheap computer hardware you have, as long as it can run Linux and has a physical network port (using WiFi will give you extra headaches for getting this working). If you think you might want to expand your projects in the future, you can get a used Dell server for very little money, and add more hard drives as needed. Wipe the hard drive and install Debian or Ubuntu server as a base, there’s lots of resources out there for setting up web services on either.

2. Restricted Ports - you are most likely on a residential internet connection. Most residential ISPs close ports for security reasons, especially 80. For example, here is Cox’s list of restricted ports. You will need to find your ISP’s equivalent list and understand what you can and can’t do with your connection.

   There are workarounds, primarily through port forwarding. You will need admin access to your router to set this up. I recommend that you read that entire article because it probably applies directly to your situation.

3. Dynamic IP Address - most people still find it easier to work with IPv4 addresses - I won’t go into IPv6 right now, but you should read a little about it just for awareness. Your residential internet most likely has a dynamic IPv4 address, which means you can’t rely on that address staying the same forever (or even until next week), which means that you can’t configure your Cloudflare domain name to point to a single IPv4 address.

   Dynamic DNS is the solution for this, and again you’ll need admin access to your router to set it up.

4. HTTPS/TLS/SSL - if you get through all those issues then you probably have a working website, but now you’re seeing something like this when you try to view it in your browser:

   This doesn’t mean that you can’t get to your website - it just means that you can only do it via HTTP and not HTTPS, which the browser is warning you (and anyone else trying to view your website) is not secure. You can either just accept that this alert will always come up, and that you have to click through it, or you can learn about TLS and getting an SSL/TLS certificate. This is a later topic - it doesn’t matter and probably won’t make sense until after you’ve got your web server online.

i think using node and express.js is very approachable in serving your web content. https://expressjs.com/

following the hello world example on their site will help clarify how everything clicks together.

i know u said this is a project for learning, but static site hosting is pretty cheap and may provide less headaches as you’re learning. sites like porkbun offer it for $3 USD and i think even github has a free way tp host a static site. idk what running a computer at home would cost monthly in electricity.

I recently fell into this rabbit hole myself! Though I decided against hosting the blog myself(because I don’t want to do anything stupid lol) Nowadays for sites like that you can install a static site generator to automatically build the site based off of markdown files. I personally use Hugo but I hear good things about Jekyll too.

The way mine is set up I make a post or a page on my machine and push it to my backend github repo. Github detects a change and rebuilds the site with the new content using a github action, then uploads the whole public folder to my host at neocities.