diff options
Diffstat (limited to '.md/tutorials/www/how-to-make-this-site.md')
| -rw-r--r-- | .md/tutorials/www/how-to-make-this-site.md | 150 |
1 files changed, 103 insertions, 47 deletions
diff --git a/.md/tutorials/www/how-to-make-this-site.md b/.md/tutorials/www/how-to-make-this-site.md index bcc4770..2cf8a80 100644 --- a/.md/tutorials/www/how-to-make-this-site.md +++ b/.md/tutorials/www/how-to-make-this-site.md @@ -80,43 +80,72 @@ program your own with web frameworks like [Flask](https://flask.palletsprojects.com/en/2.0.x/) or [Facil](https://facil.io/)* -You can run a web server for free right now. If you're on windows go -download Apache for Windows -[here](https://httpd.apache.org/docs/current/platform/windows.html) and -follow the set up guide -[here](https://www.liquidweb.com/kb/how-to-install-apache-on-a-windows-server/). -If you're on Linux, you probably already have it installed. +You can run a web server for free right now. These instructions will be +for Linux just for consistency since I'm as used to setting this up on +a Windows server. If you've never used Linux, don't be scared! It's very +easy to setup and manage in Windows now with Windows Subsystem for +Linux. If you're on Windows, follow their guide +[here](https://docs.microsoft.com/en-us/windows/wsl/install). It should +be pretty straightforward, but if you have any issues: 1) Make sure you +check your Windows version as noted in the "Prerequisites," 2) Try a +different distribution, like Debian with `wsl --install -d Debian`. Once +you're at a command prompt, come back here. + +There are many web servers out there, but I like nginx since the +configuration file is a bit easier to read than others. So let's install +it. + +``` +$ sudo apt install nginx +``` + +On Ubuntu or Debian, nginx puts the default server configuration in the +folder "/etc/nginx/sites-enabled/default". Open that in a text editor +like vim or nano, and you should see something like this (neglecting the +commented lines starting with "#"): -Find the configuration file in "sites-available/default" (on -windows, this may be led by C:\Program Files\Apache Software -Foundation\Apache2.4\ ). You'll see something like the following: ``` -<VirtualHost *:80> - ServerAdmin webmaster@localhost - - DocumentRoot /var/www - <Directory /> - Options FollowSymLinks - AllowOverride None - </Directory> - <Directory /var/www/> - Options Indexes FollowSymLinks MultiViews - AllowOverride None - Order allow,deny - allow from all - </Directory> +server { + listen 80 default_server; + listen [::]:80 default_server; + + root /var/www/html; + + server_name _; + + location / { + # First attempt to serve request as file, then + # as directory, then fall back to displaying a 404. + try_files $uri $uri/ =404; + } +} ``` For now, you don't need to change anything, so don't worry about what it means. -But do note the directory set on "DocumentRoot," which may differ for -you. This is where the web server looks for files and folders. -So let's put some stuff there! Put whatever, a picture, a text file. -Run the server, then go to your web browser and type: "http://localhost". -You'll find a directory with your files in it! And you can access them -at "http://localhost/filename.extension" +But do note the directory set on "root." This is where the web server +looks for files and folders. You can change this, but usually, you don't +need too. Any files or folders you put under "/var/www/html" will be +included as part of the web server when viewed in a web browser. + +So let's put some stuff there! If you're on WSL as mentioned before, you +can access your C drive at "/mnt/c". So let's say you had a folder of +cat pics in "C:\\Users\\username\\Desktop\\cats"; you can copy this +into your website by running: + +``` +$ cp -vr /mnt/c/Users/username/Desktop/cats /var/www/html +``` + +Run the server, then go to your web browser and type: +"http://localhost". You'll find a directory with your files in it! +And you can access them at +"http://localhost/foldername/filename.extension". Following our +previous example, you can get your cats at "https://localhost/cats". + +### Getting from localhost to the internet The problem is, only you and others on your home network can visit your site right now. @@ -132,7 +161,8 @@ routers will have some kind of steps similar to this: 2) Scroll to the add new rule form -3) Put in the following values +3) Put in the following values: + - source/original port: 80 - forward to address/device: your device's local ip - forward to/destination port: 80 @@ -161,7 +191,8 @@ example: The device "enp7s0" is my Ethernet adapter (starts with an 'e') and my current local ip address for the device is shown. If you use wifi, it -will likely start with a "wl." +will likely start with a "wl." Set the forwarding rule according to this +value. Now get your *public* ip address at this site https://who.is/ and share it with your friends. Watch in horror as they access all the files in @@ -188,16 +219,28 @@ about: - **You can just write the damn HTML and use apache or nginx** This honestly is not that hard, it just takes long and takes away from -the joy of writing in my opinion. But if your content is short and -sweet, or you're mostly hosting files, writing a few basic HTML files in -vim or notepad and adding some CSS goes a long way. +the joy of writing in my opinion. I personally have set up my own little +system where I write content in markdown and templates in the Jinja +template language to render it automatically. But if your content is +short and sweet, or you're mostly hosting files, writing a few basic +HTML files in vim or notepad and adding some CSS goes a long way. +I wrote my own view of the topic in the context of how I wrote this site +[here](/site/tutorials/www/quick-intro-to-html-css.html). And you can +find a number of great guides on how to write files, copy them and +manage them in the [references](#references). + +One easy way to create HTML templates with these servers is through the +use of "Server Side Includes," which essentially let you past one html +document into another. This varies by server, for example, nginx has +their own options and syntax detailed +[here](https://nginx.org/en/docs/http/ngx_http_ssi_module.html). - [**Neocities**](https://neocities.org/) Neocities is based on the old Geocities from the mid 90s which allows simple static hosting and features and amazing array of creative projects. Everything is managed through the website, and you can pay to -set your own custom [domain name](#dns). +set your own custom [domain name](#whats-a-domain-name). - **Wordpress** (but this time, you set it up) @@ -233,9 +276,9 @@ twofold. First, if you are in the United States and not a business, you probably have a standard plan with one of the major ISPs (Verizon, Optimum, etc.). This limits you in a few ways. -- Your bandwidth is limited, which limits the amount of people you can serve -at one time *and* the rate you can transfer data to them. Think laggy -games and videos that take 10 years to download. +- Your bandwidth is limited, which limits the amount of people you can +serve at one time *and* the rate you can transfer data to them. Think +laggy games and videos that take 10 years to download. - Your ISP probably explicitly does not allow this (at least in the US). I have *never* had my ISP complain about hosting small personal servers @@ -244,8 +287,12 @@ some problems. ### So what should I do -Most people will find it cheapest to rent from a VPS provider. VPS -stands for "Virtual Private Server," which just means an +As mentioned above, it kind of depends on what your hosting. A small +game server can be run just fine from home. A website with an email +server and other bells and whistles is another thing. + +In those cases most people will find it cheapest to rent from a VPS +provider. VPS stands for "Virtual Private Server," which just means an Internet-connected server stored somewhere in someone's private data center. You pay them for the storage and to keep your server online and accessible. @@ -259,12 +306,11 @@ like: - Opening up your ports to the outside world. And in a nutshell that's it. There's fancy stuff of course, like you'll -want a [domain name](#dns) probably and I'll talk about that too, but at -this point, your stuff is on the Internet! Just tell your friends to -paste in your public ip address (your VPS provider will tell you this) -and there's your stuff! +want a [domain name](#whats-a-domain-name) probably and I'll talk about +that too, but at this point, your stuff is on the Internet! Just tell +your friends to paste in your public ip address (your VPS provider will +tell you this) and there's your stuff! -<a id="dns"></a> ## What's a "Domain Name" @@ -306,7 +352,7 @@ on the same IP address like "git.mjfer.net". Wait a few minutes for the DNS servers to update and you should now be able access your server by name. -## Setup HTTPS and TLS, a false sense of security +## Setup HTTPS and TLS, for some sense of security A decade of half-though through security advice has convinced everyone that HTTPS and *only* HTTPS is secure. This is simply not true. Using @@ -323,7 +369,7 @@ text document, or a cat picture, and not sending any data, HTTP is perfectly acceptable for retrieving that information. HTTPS is also no guarantee that the information your retrieving is actually what you want. There's plenty of malware and other nasty things over HTTPS, just -because it's sent encrypted doesn't make it safe though. +because it's sent encrypted doesn't make it safe. Web browsers have largely responded to this fact by assuming that HTTP is always insecure and printing a warning when you visit a site without @@ -345,6 +391,15 @@ or [nginx](https://www.nginx.com/blog/nginx-ssl/#Examples), switch the port to 443 instead of 80 and bam, you've got HTTPS! +## Perspective + +What I tried to present here was the brief overview of how you get from +files on your computer to files accessible of the Internet. The full +picture though is something you need to seek out yourself. I intend to +add more guides on how I manage this site, but there is so much material +out there already it hardly feels worth adding to. I hope at the very +least to have got you through the start. + ## References 1. https://dataswamp.org/~solene/2021-07-23-why-selfhosting-is-important.html @@ -352,6 +407,7 @@ switch the port to 443 instead of 80 and bam, you've got HTTPS! 3. https://www.howtogeek.com/362602/can-you-host-a-web-server-on-your-home-internet-connection/ 4. https://googiehost.com/blog/create-your-own-server-at-home-for-web-hosting/ 5. https://en.wikipedia.org/wiki/ICANN +6. https://landchad.net/ ### Terms of service for certain ISPs |