diff options
Diffstat (limited to 'tutorials/www/how-to-make-this-site.html')
| -rw-r--r-- | tutorials/www/how-to-make-this-site.html | 60 |
1 files changed, 35 insertions, 25 deletions
diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html index f440c1b..f84414e 100644 --- a/tutorials/www/how-to-make-this-site.html +++ b/tutorials/www/how-to-make-this-site.html @@ -17,31 +17,37 @@ <p><a id="thepoint"></a></p> <h2 id="what-is-a-web-server-and-how-do-i-run-one">What is a web server and how do I run one?</h2> <p><em>TL;DR a web server is just a program that lets other computers on a network view files in a chosen folder. All you need to do is download a web server: apache and nginx are popular ones, but you can easily program your own with web frameworks like <a href="https://flask.palletsprojects.com/en/2.0.x/">Flask</a> or <a href="https://facil.io/">Facil</a></em></p> -<p>You can run a web server for free right now. If you're on windows go download Apache for Windows <a href="https://httpd.apache.org/docs/current/platform/windows.html">here</a> and follow the set up guide <a href="https://www.liquidweb.com/kb/how-to-install-apache-on-a-windows-server/">here</a>. If you're on Linux, you probably already have it installed.</p> -<p>Find the configuration file in "sites-available/default" (on windows, this may be led by C:FilesSoftware Foundation ). You'll see something like the following:</p> -<pre><code><VirtualHost *:80> - ServerAdmin webmaster@localhost +<p>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 <a href="https://docs.microsoft.com/en-us/windows/wsl/install">here</a>. 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 <code>wsl --install -d Debian</code>. Once you're at a command prompt, come back here.</p> +<p>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.</p> +<pre><code>$ sudo apt install nginx</code></pre> +<p>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 "#"):</p> +<pre><code>server { + listen 80 default_server; + listen [::]:80 default_server; - 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></code></pre> + 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; + } +}</code></pre> <p>For now, you don't need to change anything, so don't worry about what it means.</p> -<p>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"</p> +<p>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.</p> +<p>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:</p> +<pre><code>$ cp -vr /mnt/c/Users/username/Desktop/cats /var/www/html</code></pre> +<p>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".</p> +<h3 id="getting-from-localhost-to-the-internet">Getting from localhost to the internet</h3> <p>The problem is, only you and others on your home network can visit your site right now.</p> <p>Your computer's most likely behind your router's firewall, which will not allow any traffic in. You'll need to forward a port from your router (port 80 is for HTTP) to point to the device hosting the server.</p> <p>Router's differ when it comes to to exact configuration, but MOST routers will have some kind of steps similar to this:</p> <ol type="1"> <li><p>Click "Advanced" then click "Firewall"</p></li> <li><p>Scroll to the add new rule form</p></li> -<li><p>Put in the following values</p></li> +<li><p>Put in the following values:</p></li> </ol> <ul> <li>source/original port: 80</li> @@ -63,7 +69,7 @@ valid_lft forever preferred_lft forever 3: wlp5s0: <BROADCAST,MULTICAST> mtu 1500 qdisc noop state DOWN group default qlen 1000 link/ether 82:e2:e4:c2:0c:a1 brd ff:ff:ff:ff:ff:ff permaddr 98:de:d0:f3:d6:ea</code></pre> -<p>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."</p> +<p>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." Set the forwarding rule according to this value.</p> <p>Now get your <em>public</em> ip address at this site https://who.is/ and share it with your friends. Watch in horror as they access all the files in the directory you launched the server!</p> <h2 id="how-can-make-this-server-available-on-the-internet-cheaply-and-independently">How can make this server available on the Internet <em>cheaply</em> and <em>independently</em></h2> <p><i> TL;DR Expense scales with independence. It's possible to become your own service provider, get IP addresses from ICANN, your own hardware to host it, to host your cat pics; but it's also a lot of time, work and money to do all that (<a href="https://hackaday.com/2018/09/20/one-mans-journey-to-become-his-own-isp/">this guy</a> did it apparently, and so did <a href="https://en.wikipedia.org/wiki/Kiwi_Farms">Null</a>)</p> @@ -72,11 +78,12 @@ <ul> <li><strong>You can just write the damn HTML and use apache or nginx</strong></li> </ul> -<p>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.</p> +<p>This honestly is not that hard, it just takes long and takes away from 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 <a href="/site/tutorials/www/quick-intro-to-html-css.html">here</a>. And you can find a number of great guides on how to write files, copy them and manage them in the <a href="#references">references</a>.</p> +<p>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 <a href="https://nginx.org/en/docs/http/ngx_http_ssi_module.html">here</a>.</p> <ul> <li><a href="https://neocities.org/"><strong>Neocities</strong></a></li> </ul> -<p>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 <a href="#dns">domain name</a>.</p> +<p>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 <a href="#whats-a-domain-name">domain name</a>.</p> <ul> <li><strong>Wordpress</strong> (but this time, you set it up)</li> </ul> @@ -96,15 +103,15 @@ <li><p>Your ISP probably explicitly does not allow this (at least in the US). I have <em>never</em> had my ISP complain about hosting small personal servers at home, but I imagine if I hosted higher traffic things, I would have some problems.</p></li> </ul> <h3 id="so-what-should-i-do">So what should I do</h3> -<p>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.</p> +<p>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.</p> +<p>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.</p> <p>Once you've got enough content and a way to manage it, all you have to do is just copy all that stuff over to your VPS. Usually that looks like:</p> <ul> <li>Installing a web server and a CMS tweaked to your liking</li> <li>Copying over your stuff to the web directory</li> <li>Opening up your ports to the outside world.</li> </ul> -<p>And in a nutshell that's it. There's fancy stuff of course, like you'll want a <a href="#dns">domain name</a> 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!</p> -<p><a id="dns"></a></p> +<p>And in a nutshell that's it. There's fancy stuff of course, like you'll want a <a href="#whats-a-domain-name">domain name</a> 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!</p> <h2 id="whats-a-domain-name">What's a "Domain Name"</h2> <p>Expecting people to save your IP address is not really a good idea though. It's better to have an easy name they can remember. Enter DNS: the Domain Name System. If an IP address is a telephone number, DNS is the telephone book. ICANN and IANA host the top level servers, which point to local domain registries who buy names like "mjfer.net" on behalf of their customers.</p> <p>The actual business of domain names is complicated and not something I understand all that well. But setting up a domain name to point to an IP address is typically easy, once you've chosen a domain registrar (just search that online and you'll find a ton) and name you like. Be aware that shorter names are rarer and usually more expensive and different TLDs--that is, the ending parts like ".net" and ".io,"--will be priced differently.</p> @@ -123,11 +130,13 @@ </ul> <p>The reason for the second record is in case you want to set subdomains on the same IP address like "git.mjfer.net".</p> <p>Wait a few minutes for the DNS servers to update and you should now be able access your server by name.</p> -<h2 id="setup-https-and-tls-a-false-sense-of-security">Setup HTTPS and TLS, a false sense of security</h2> +<h2 id="setup-https-and-tls-for-some-sense-of-security">Setup HTTPS and TLS, for some sense of security</h2> <p>A decade of half-though through security advice has convinced everyone that HTTPS and <em>only</em> HTTPS is secure. This is simply not true. Using HTTP alone doesn't inherently make you insecure and using HTTPS doesn't automatically guarantee the app your communicating with is secure.</p> -<p>What HTTPS means is that the <em>data you send to the server</em> and the <em>data the server sends back</em> is encrypted. This only provides security in contexts where you're entering information like a credit card number or a password; or in the reverse case when the server is authenticating you. In those cases <em>you need HTTPS</em>. But if you're just requesting a 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.</p> +<p>What HTTPS means is that the <em>data you send to the server</em> and the <em>data the server sends back</em> is encrypted. This only provides security in contexts where you're entering information like a credit card number or a password; or in the reverse case when the server is authenticating you. In those cases <em>you need HTTPS</em>. But if you're just requesting a 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.</p> <p>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 HTTPS enabled. Unfortunately, most users interpret this to mean the site is somehow dangerous, even if it doesn't collect any information about the user. Because of that, most you will want to go the extra mile to make your visitors feel warm and fuzzy inside and implement HTTPS.</p> <p>Fortunately, this is now much easier than is used to be thanks to <a href="https://letsencrypt.org/">LetsEncrypt</a>. LetsEncrypt generously serves as a free certificate authority, which allows you to generate signed certificates that are recognized by every web browser in the world. The tool they recommend, <a href="https://certbot.eff.org/">certbot</a> is painless to install. I've rarely had to do much more than "certbot certonly" and follow the prompts to get a certificate. Once you've obtained one, add it to <a href="https://httpd.apache.org/docs/2.4/ssl/ssl_howto.html">apache</a> or <a href="https://www.nginx.com/blog/nginx-ssl/#Examples">nginx</a>, switch the port to 443 instead of 80 and bam, you've got HTTPS!</p> +<h2 id="perspective">Perspective</h2> +<p>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.</p> <h2 id="references">References</h2> <ol type="1"> <li>https://dataswamp.org/~solene/2021-07-23-why-selfhosting-is-important.html</li> @@ -135,6 +144,7 @@ <li>https://www.howtogeek.com/362602/can-you-host-a-web-server-on-your-home-internet-connection/</li> <li>https://googiehost.com/blog/create-your-own-server-at-home-for-web-hosting/</li> <li>https://en.wikipedia.org/wiki/ICANN</li> +<li>https://landchad.net/</li> </ol> <h3 id="terms-of-service-for-certain-isps">Terms of service for certain ISPs</h3> <p>There's always more ISPs out there, but I went the one's I'm most familiar with in my area. I'll probably expand this as I go, let me know if there are important ones in your area worth listing here for others.</p> |