Table of Contents! Adds some works in progress

This commit adds a table of contents generated in the panupdate script. It also changes some links on the homepage to conform with removing '/site' as the parent directory
author: mjfernez <mjf@mjfer.net> 2021-12-22 16:40:46 -0500
committer: mjfernez <mjf@mjfer.net> 2021-12-22 16:40:46 -0500
commit: d0595724cd13a2274e34a813119cf457a796af75 (patch)
tree: 90a3b6d44ff929c47f05b354a5f682f6df6e30f1 /tutorials
parent: 3e87511c9ded4663150d6c4c4a1d829b53a16ed4 (diff)
download: site-files-d0595724cd13a2274e34a813119cf457a796af75.tar.gz
3 files changed, 135 insertions, 4 deletions
diff --git a/tutorials/tor/how-to-host-a-tor-hidden-service.html b/tutorials/tor/how-to-host-a-tor-hidden-service.html
index 794932e..43b6364 100644
--- a/tutorials/tor/how-to-host-a-tor-hidden-service.html
+++ b/tutorials/tor/how-to-host-a-tor-hidden-service.html
@@ -1,5 +1,32 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>how-to-host-a-tor-hidden-service</title>
+  <style>
+    code{white-space: pre-wrap;}
+    span.smallcaps{font-variant: small-caps;}
+    span.underline{text-decoration: underline;}
+    div.column{display: inline-block; vertical-align: top; width: 50%;}
+    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+    ul.task-list{list-style: none;}
+  </style>
+</head>
+<body>
+<nav id="TOC" role="doc-toc">
+<h2 id="toc-title">Contents</h2>
+<ul>
+<li><a href="#how-to-spin-up-a-temporary-hidden-file-share-with-python">How to spin up a temporary hidden file share with Python</a>
+<ul>
+<li><a href="#configure-tor">Configure Tor</a></li>
+<li><a href="#set-up-the-server">Set up the server</a></li>
+</ul></li>
+</ul>
+</nav>
 <p>This might sound spooky and complicated, but it's really not. If you want to host a small site or a small file share among friends, I honestly think Tor is one of the easiest and safest options to set up.</p>
-<p>Getting a Tor hidden service running is so stupidly easy that it hardly deserves it's own article. Tor's website has a great guide right <a href="https://community.torproject.org/onion-services/setup/">here</a>. I figured I'd put my own spin on it by showing you show to host a temporary server to share some files with your friends. Please note the word <em>temporary</em> in that last sentence; running this way for a while is insecure and not a good idea. For a permanent solution, you'll want to host a real web server as explained <a href="/site/tutorials/www/how-to-make-this-site.html">here</a>.</p>
+<p>Getting a Tor hidden service running is so stupidly easy that it hardly deserves it's own article. Tor's website has a great guide right <a href="https://community.torproject.org/onion-services/setup/">here</a>. I figured I'd put my own spin on it by showing you show to host a temporary server to share some files with your friends. Please note the word <em>temporary</em> in that last sentence; running this way for a while is insecure and not a good idea. For a permanent solution, you'll want to host a real web server as explained <a href="/tutorials/www/how-to-make-this-site.html">here</a>.</p>
 <p>Like that article, I will only explain how to do this on Linux since it's way easier and, to be honest, I've never tried to do it on Windows. If you've never used Linux before, buy a Raspberry Pi and follow the basic install guide. If you're strapped for cash, run it in a virtual machine, or use <a href="https://docs.microsoft.com/en-us/windows/wsl/install">Windows Subsystem for Linux</a>.</p>
 <h2 id="how-to-spin-up-a-temporary-hidden-file-share-with-python">How to spin up a temporary hidden file share with Python</h2>
 <p>Once you have Debian/Ubuntu/whatever installed and it's updated to your liking, you can install Tor with:</p>
@@ -36,3 +63,5 @@ $ python3 -m http.server</code></pre>
 <p>You'll see the server is being hosted on port 8000, which is what we chose in the config file earlier. Just leave it running, or send it to the background with Ctrl+Z and run "bg".</p>
 <p>And that's it! You are now the proud owner of a tor hidden service. Take the hostname you copied down before and add ".onion" to the end and give it to your friends so they can browse the files in the directory through the Tor Browser.</p>
 <p>Be sure to watch the program log though... lest they get up to no good.</p>
+</body>
+</html>
diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html
index f84414e..c3290e9 100644
--- a/tutorials/www/how-to-make-this-site.html
+++ b/tutorials/www/how-to-make-this-site.html
@@ -1,3 +1,49 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>how-to-make-this-site</title>
+  <style>
+    code{white-space: pre-wrap;}
+    span.smallcaps{font-variant: small-caps;}
+    span.underline{text-decoration: underline;}
+    div.column{display: inline-block; vertical-align: top; width: 50%;}
+    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+    ul.task-list{list-style: none;}
+  </style>
+</head>
+<body>
+<nav id="TOC" role="doc-toc">
+<h2 id="toc-title">Contents</h2>
+<ul>
+<li><a href="#background">Background</a></li>
+<li><a href="#what-is-a-web-server-and-how-do-i-run-one">What is a web server and how do I run one?</a>
+<ul>
+<li><a href="#getting-from-localhost-to-the-internet">Getting from localhost to the internet</a></li>
+</ul></li>
+<li><a href="#how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How can I make this server available on the Internet <em>cheaply</em> and <em>independently</em></a>
+<ul>
+<li><a href="#can-i-run-a-web-server-at-home">Can I run a web server at home</a></li>
+<li><a href="#so-what-should-i-do">So what should I do</a></li>
+</ul></li>
+<li><a href="#whats-a-domain-name">What's a "Domain Name"</a></li>
+<li><a href="#setup-https-and-tls-for-some-sense-of-security">Setup HTTPS and TLS, for some sense of security</a></li>
+<li><a href="#perspective">Perspective</a></li>
+<li><a href="#references">References</a>
+<ul>
+<li><a href="#terms-of-service-for-certain-isps">Terms of service for certain ISPs</a>
+<ul>
+<li><a href="#verizon">Verizon</a></li>
+<li><a href="#optimum">Optimum</a></li>
+<li><a href="#spectrum">Spectrum</a></li>
+<li><a href="#att">AT&amp;T</a></li>
+<li><a href="#cox-communications">Cox Communications</a></li>
+</ul></li>
+</ul></li>
+</ul>
+</nav>
 <h2 id="background">Background</h2>
 <p><em>TL;DR get to </em><a href="#thepoint">the point</a></p>
 <p>I think it was roughly the end of high school when I first had the idea I wanted to make <em>some</em> kind of website. This would be around 2010 and I did what I thought would be a good idea and bought a book on the subject: "Web Sites for Dummies." I was dummy after all...</p>
@@ -71,14 +117,14 @@
     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." 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>
+<h2 id="how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How can I 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>
 <p>Most likely you'll want to rent someone else's server, usually a VPS. </i></p>
 <p>Once you understand the basic installation above, you can now populate your site with content just by adding HTML files to your web directory. You can use an HTML editor to write these, or you can download a full content management system to help you. Here are some options I know about:</p>
 <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. 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>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="/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>
@@ -96,7 +142,7 @@
 <p>In addition to hosting code repositories, you can host small sites on github for mostly free. I've never used it, but I definitely would if I needed something like a small wiki.</p>
 <p>But once you have stuff to share, how do you keep this stuff online?</p>
 <h3 id="can-i-run-a-web-server-at-home">Can I run a web server at home</h3>
-<p>Technically yes, but practically probably not. At least not at a lot of extra cost to you. If you do want to host a small thing at home, like some text or some cat pics, a <a href="/site/tutorials/tor/how-to-host-a-tor-hidden-service.html">tor hidden service</a> is a great option.</p>
+<p>Technically yes, but practically probably not. At least not at a lot of extra cost to you. If you do want to host a small thing at home, like some text or some cat pics, a <a href="/tutorials/tor/how-to-host-a-tor-hidden-service.html">tor hidden service</a> is a great option.</p>
 <p>I spent a lot of time searching on this (you can find a full list of references at the bottom), and I've even tested a little bit by hosting game servers and web projects for code jams, but the problem is 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.</p>
 <ul>
 <li><p>Your bandwidth is limited, which limits the amount of people you can serve at one time <em>and</em> the rate you can transfer data to them. Think laggy games and videos that take 10 years to download.</p></li>
@@ -193,3 +239,5 @@
 </ol></li>
 </ul></li>
 </ul>
+</body>
+</html>
diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html
index 33fba18..53073d3 100644
--- a/tutorials/www/quick-intro-html-css.html
+++ b/tutorials/www/quick-intro-html-css.html
@@ -1,3 +1,55 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>quick-intro-html-css</title>
+  <style>
+    code{white-space: pre-wrap;}
+    span.smallcaps{font-variant: small-caps;}
+    span.underline{text-decoration: underline;}
+    div.column{display: inline-block; vertical-align: top; width: 50%;}
+    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+    ul.task-list{list-style: none;}
+  </style>
+</head>
+<body>
+<nav id="TOC" role="doc-toc">
+<h2 id="toc-title">Contents</h2>
+<ul>
+<li><a href="#web-browsers-render-code">Web browsers render code</a>
+<ul>
+<li><a href="#html">HTML</a>
+<ul>
+<li><a href="#basic-format">Basic Format</a></li>
+<li><a href="#tables-and-links">Tables and Links</a></li>
+<li><a href="#and-everything-else...">And Everything Else...</a>
+<ul>
+<li><a href="#shortlist-of-text-and-formatting-tags">Shortlist of Text and Formatting Tags</a></li>
+</ul></li>
+<li><a href="#html-metadata">HTML Metadata</a></li>
+</ul></li>
+<li><a href="#css">CSS</a>
+<ul>
+<li><a href="#add-style-without-css">Add style <em>without</em> CSS</a></li>
+<li><a href="#basic-formatting">Basic Formatting</a></li>
+<li><a href="#image-formatting">Image Formatting</a></li>
+<li><a href="#making-custom-classes">Making Custom Classes</a>
+<ul>
+<li><a href="#use-the-div-tag-to-make-sections">Use the div tag to make sections</a></li>
+</ul></li>
+<li><a href="#mobile-optimization">Mobile Optimization</a></li>
+</ul></li>
+<li><a href="#how-to-look-things-up">How to look things up</a></li>
+<li><a href="#references">References</a>
+<ul>
+<li><a href="#html-1">HTML</a></li>
+<li><a href="#css-1">CSS</a></li>
+</ul></li>
+</ul></li>
+</ul>
+</nav>
 <p><em>Note: you should run the examples to see how they work. You can either write the files yourself and open them in a web browser, or use an online HTML editor like</em> <a href="https://html-css-js.com/"><em>this one</em></a></p>
 <p>As you can see from the current state of this site, I'm not exactly exactly the most skilled web designer. But I struggled through the basics enough to get an idiot's sense of front-end web design, so that perspective might be useful if you have no clue where to start with this like I did.</p>
 <p>The building blocks are very simple, <em>but there's a lot of blocks</em>. The <a href="https://dev.w3.org/html5/spec-LC/semantics.html#semantics">HTML5 specification</a>, which most browsers are built around, defines the semantics of elements that can should be rendered by a web browser. CSS similarly defines the <em>attributes</em>--or styles--that can be applied to those elements in a format specified <a href="https://www.w3.org/TR/CSS1/">here</a>. I've never gotten deep into the weeds like professional designers do--and to be honest, I don't really want to. But I <em>do</em> like understanding how things work. And getting a unique custom HTML site is something anyone with a text editor and a web browser can get done in a weekend.</p>
@@ -338,3 +390,5 @@ src="https://archive.md/zP2NL/9d16630c80f93351469867fde13ea5199cd1f483.jpg"
 <li>https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b</li>
 <li>https://stallman.org/common/stallman.css</li>
 </ol>
+</body>
+</html>
author	mjfernez <mjf@mjfer.net>	2021-12-22 16:40:46 -0500
committer	mjfernez <mjf@mjfer.net>	2021-12-22 16:40:46 -0500
commit	d0595724cd13a2274e34a813119cf457a796af75 (patch)
tree	90a3b6d44ff929c47f05b354a5f682f6df6e30f1 /tutorials
parent	3e87511c9ded4663150d6c4c4a1d829b53a16ed4 (diff)
download	site-files-d0595724cd13a2274e34a813119cf457a796af75.tar.gz