firststuffs

This commit is contained in:
Luke Smith 2021-06-29 08:30:52 -04:00
commit 825282fea9
No known key found for this signature in database
GPG Key ID: 4C50B54A911F6252
74 changed files with 2813 additions and 0 deletions

7
.footer.html Normal file
View File

@ -0,0 +1,7 @@
<a href="https://landchad.net">LandChad.net</a></br>
Because Everyone should be an Internet LandChad.</br>
<li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li>
<li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li>
<li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li>
<li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li>
<li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a>

27
404.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>404 &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>404</h1></header>
<nav></nav>
<main>
<p>
This article linked is not yet finalized!
</p>
<p>
To keep tabs on what new articles are published, keep up with our RSS feed at
<img src="pix/rss.svg" alt="rss logo">
<a href="https://landchad.net/rss.xml">https://landchad.net/rss.xml</a> which
will feature all new pages and significant changes.
</p>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

7
README.md Normal file
View File

@ -0,0 +1,7 @@
# LandChad.net ([https://landchad.net](https://landchad.net))
A site dedicated to turn web peasants into Internet LandChads.
Simple step-by-step text and image-based tutorials for creating websites, email servers, chat servers, server administration and everything else.
Suggestions welcome.

18
barsup Executable file
View File

@ -0,0 +1,18 @@
#!/bin/sh
# Replace existing navs and footers with content of nav and footer files.
navfile="/home/luke/.local/src/landchad/.nav.html"
footerfile="/home/luke/.local/src/landchad/.footer.html"
files="$(for x in $(find /home/luke/.local/src/landchad -type f -iname '*.html'); do
echo "$x"
done)"
escnav="$(sed "s|^\s\+||;s|/|\\\\/|g;s|\"|\\\\\"|g" "$navfile" 2>/dev/null | tr -d '\n')"
escfooter="$(sed "s|^\s\+||;s|/|\\\\/|g;s|\"|\\\\\"|g" "$footerfile" 2>/dev/null | tr -d '\n')"
sed -s -i "s/<nav>.*<\/nav>/<nav>$escnav<\/nav>/; s/<footer>.*<\/footer>/<footer>$escfooter<\/footer>/" $files
# Multiline:
# sed -n -s -i "1h; 1!H; \${ g; s/<nav>.*<\/nav>/<nav>\n$escnav\n\t<\/nav>/g; s/<footer>.*<\/footer>/<footer>\n$escfooter\n\t<\/footer>/p }" $files

92
bat.html Normal file
View File

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Enrolling Your Site in the Basic Attention Token Project &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Enrolling in the Basic Attention Token Project</h1></header>
<nav></nav>
<main>
<h2>What is the <img src="pix/bat.svg" alt="bat logo">Basic Attention Token?</h2>
<p>
The Basic Attention Token (BAT) is a cryptocurrency token associated with the <a href="https://brave.com">Brave Browser</a>.</p>
<p>
You might want to consider enrolling any and all sites you have on the internet into their project which allows you to earn some of their token based on how many Brave users view your website.
It also enables Brave users to donate BAT directly to you.
</p>
<p>
You can receive these donations in BAT itself, or in another cryptocurreny of your choosing.
</p>
<h3>Explanation of the BAT system</h3>
<p>
In the Brave Browser, all ads are automatically blocked.
Brave users however, are given the choice to opt into an optional ads system to view occasional notification ads instead and if they do, they are paid some amount of BAT monthly for how many ads they view.
At the end of the month, depending on their settings, Brave users either have their BAT automatically donated to the sites/channels/accounts they spent the most time on, or they can hold onto their token to give away as they please.
</p>
<h3>Why you might <em>not</em> want to enroll...</h3>
<p>
Unlike <a href="bitcoin.html">Bitcoin</a> and <a href="monero.html">Monero</a>, BAT is a token organized by a company, and as such, it has to comply with know-your-customer regulations.
What that means for you is that to get a payout in BAT, you must have an custodial cryptocurrency wallet with either Gemini or Uphold, the two services they are interfaced with.
You can move your payouts elsewhere when you want, but those sites require real-world identification.
</p>
<p>
Enrolling in BAT is thus not an option for people who want to be on the internet totally anonymously.
For those for which this is not an issue, however, enrolling your site in the Basic Attention Token system, even if you do not use Brave yourself,
is an easy, free and no risk thing that you can only gain from.
</p>
<h2>Enrolling in the System</h2>
<h3>Create a Publisher Account with BAT</h3>
<p>Go to <a href="https://publishers.basicattentiontoken.org/">publishers.basicattentiontoken.org</a> and sign up to create a publisher account.
</p>
<h3>Add a new website/channel</h3>
<p>
Once you log in, you can easily create a new Brave channel.
</p>
<img src="pix/brave-01.png" alt="adding a brave channel">
<p>
As this will show you, you can add your website to the system to receive donations there,
but you can also add a YouTube or Twitch channel, a Github profile or even a R*ddit or Tw*tter account.
</p>
<img src="pix/brave-02.png" alt="channel choices">
<p>
Once you select what to add, you will have to verify that you own that website/channel via various methods.
You can add DNS settings to Epik/your registrar for a website, which is generally the most consistent way for websites.
</p>
<h2>Using Uphold or Gemini for payouts</h2>
<p>
In order to properly receive payouts, you will have to create an account either with Uphold or Gemini which again are custodial cryptocurrency wallets, meaning that while you have your money on their platform, it isn't <em>really</em> yours, so it's a good idea to transfer it off when you accumulate a decent amount.
</p>
<p>Choose either Gemini or Uphold, create an account with them and follow the directions on the BAT site to link them.<p>
Note that right now, Gemini might be the better choice here.
Uphold inexplicably can't send funds to a Segwit wallet as it is right now which is the type that Electrum uses.
So if you select to get your payouts in Bitcoin, this might be an issue.
</p>
<h2>What does this look like in Brave?</h2>
<h3>Donating to websites</h3>
<p>
Once you have your website connected, Brave users can click on the BAT icon (<img src="pix/bat.svg" alt="bat logo">) by their URL bar to donate to you.
Here is how this looks:
</p>
<a href="https://lukesmith.xyz"><img style=max-width:300px src="pix/brave-03.png" alt="website example"></a>
<h3>Donating to individual accounts</h3>
<p>Here is an example of what it looks like to have an individual social media site interfaced.
In the picture below, a "Tip" button appears in the bottom right of this image.
</p>
<a href="https://twitter.com/thefaceberg/status/1402502987742859264"><img style=max-height:400px src="pix/brave-04.gif" alt="example tweet"></a>
<p>
Tip buttons will appear on many other social media sites, for example Github commits, projects and comments by users.
</p>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

102
bitcoin.html Normal file
View File

@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Getting a Bitcoin Wallet &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Getting a Bitcoin Wallet</h1></header>
<nav></nav>
<main>
<p>Let's now get a Bitcoin wallet and become able to receive Bitcoin funds or donations.</p>
<h2>Wallets</h2>
<p>
One of the classical choices for a Bitcoin wallet is Electrum.
Go to <a href="https://electrum.org/#home">https://electrum.org</a> to download and install it,
or if you are a Linux user, it is probably included in your distribution's package repository.
</p>
<h3>Mobile version?</h3>
<p>
Note also that there are mobile/cell phone versions of Electrum for Android and iOS.
I generally advise against using a wallet on a cell phone for security reasons, but if you would like, you can.
</p>
<p>
If you are okay with a mobile wallet,
I recommend getting <a href="https://cakewallet.com/">Cake Wallet</a>, which can use Electrum-style Bitcoin wallets,
but also Monero and Litecoin.
</p>
<h2>Generating a Wallet</h2>
<p>Once you open Electrum (or Cake Wallet),
you can choose to create a new wallet.
Name it whatever you want and choose the "Standard Wallet" option.
</p>
<p>
I will also note that if you are paranoid, it is perfectly possible to generate a wallet without connection to the internet.
</p>
<h3>Your Seed is your money.</h3>
<p>
Now choose the "Create a new seed" option when creating the wallet.
That will randomly produce a "seed" of 12 words.
</p>
<img src="pix/bitcoin-01.png" alt="bitcoin seed">
<p>
<strong>These words are your money.</strong>
Once you are shown them, <strong>immediately</strong> write them down on physical paper, and you will be storing this somewhere it will not be lost or found.
You can memorize these tweleve words if you trust your memory.
</p>
<p>
These tweleve words unlock all of the funds/addresses you will have on this wallet.
Whoever has your seed has the ability to spend your money.
</p>
<p>Note obviously that I have included a picture of a seed phrase above in this tutorial.
I or anyone else would be stupid to ever send Bitcoin to the following addresses since the seed phrases are now public.
</p>
<p>
Once you have written down your seed, click "Next" and Electrum will have you input that seed again to ensure you've written it down.
</p>
<p>
You will also be asked to supply a password.
This password merely encrypts your wallet file on this computer so you don't have to retype your seed phrase each time you open Electrum.
Note that anyone with your seed phrase can still obtain your funds.
This password is only protection on your computer here.
</p>
<h2>Managing your Wallet</h2>
<p>
Once your wallet is generated and opened you will be at the wallet page.
First, I recommend opening the "View" menu and unhiding all the different tabs.
</p>
<img src="pix/bitcoin-02.png" alt="electrum options">
<h3>Addresses</h3>
<p>The address tab contains all the many Bitcoin addresses generated by your seed phrase.
In fact, as you use these up, the wallet will automatically add more.
</p>
<p>
These addresses (which will all be generated with <code>bc1</code> at the beginning can be used by others to send you Bitcoins.
Someone can just copy-and-paste the address into their wallet to send you funds.
</p>
<img src="pix/bitcoin-03.png" alt="bitcoin addresses">
<h3>Receive</h3>
<p>Click on the "Receive" tab and then click "New Address."
That will pick your first unused address which will appear on the right side.
You could copy this from the "Addresses" tab, but this tab also generates a QR code which will appear to the right as well if you click on the "QR Code" subtab.
</p>
<img src="pix/bitcoin-04.png" alt="receive qr code">
<h4>What is the QR code for?</h4>
<p>
In case you don't know, a QR code is a way of storing text information in a format that can be scanned by a phone.
If someone has a wallet program on a phone, then can easily scan the QR code on another screen to avoid having to copy your address over or even worse, write it manually.
</p>
<h3>Let's receive donations on our website.</h3>
<p>
Save the QR code and the wallet address it corresponds to (starting in <code>bc1</code>).
Now simply put these on your website and anyone can send Bitcoin to them.
Bitcoin users will know how to scan and use them.
</p>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

133
certbot.html Normal file
View File

@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Certbot and HTTPS &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Certbot and HTTPS</h1></header>
<nav></nav>
<main>
<p>
Once you have a website, it is extremely important to enable encrypted connections over HTTPS/SSL.
You might have no idea what that means, but it's easy to do how we've already <a href="nginx.html">set our server up</a>.
</p>
<p>
Certbot is a program that automatically creates and deploys the certificates that allow encrypted connections.
It used to be a pain (and often expensive) to do this, but now it's all free and automatic.
</p>
<h2>Why is encryption important?</h2>
<ul>
<li>With HTTPS, users' ISPs cannot snoop on what they are looking at on your website.
They know that they have connected, but the particular pages they visit are private as everything is encrypted. HTTPS increases user privacy.</li>
<li>If you later create usernames and passwords for any service on your site, lack of encryption can compromise that private data! Most well-designed software will automatically <em>prevent</em> any unencrypted connections over the internet.</li>
<li>Search engines like Google favor pages with HTTPS over unencrypted HTTP.</li>
<li>You get the official-looking green 🔒 symbol in the URL bar in most browsers which makes normies subtly trust your site more.</li>
</ul>
<h2>Let's do it!</h2>
<img src=pix/nginx-website.png>
<p>Note in this picture that a browser accessing your site will say "Not secure" or something else to notify you that we are using and unencrypted HTTP connection rather than an encrypted HTTPS one.</p>
<H2>Installation</h2>
<p>Just run:</p>
<pre><code>apt install python-certbot-nginx</code></pre>
<p>And this will install <code>certbot</code> and its module for <code>nginx</code>.</p>
<h2>Run</h2>
<p>
As I mentioned in the previous article, firewalls might interfere with certbot, so you will want to either disable your firewall or at least ensure that it allows connections on ports 80 and 443:
</p>
<pre><code>ufw allow 80
ufw allow 443</code></pre>
<p>
Now let's run certbot:
</p>
<pre><code>certbot --nginx</code></pre>
<p>
The command will ask you for your email.
This is so when the certificates need to be renewed in three months, you will get a email about it.
You can set the certificates to renew automatically, but it's a good idea to check it the first time to ensure it renewed properly.
You can avoid giving your email by running the command with the <code>--register-unsafely-without-email</code> option as well.
</p>
<p>Agree to the terms, and optionally consent to give your email to the EFF (I recommend against this obviously).
</p>
<p>
Once all that is done, it will ask you what domains you want a certificate for. You can just press enter to select all.
</p>
<img src=pix/certbot-01.png>
<p>
It will take a moment to create the certiticate, but afterwards, you will be asked if you want to automatically redirect all connections to be encrypted.
Since this is preferrable, choose 2 to Redirect.
</p>
<img src=pix/certbot-02.png>
<h3>Checking for success</h3>
<p>You should now be able to go to your website and see that there is a lock icon or some other notification that you are now on an encrypted connection.</p>
<img src=pix/certbot-03.png>
<h2>Setting up certificate renewal</h2>
<p>
As I mentioned in passing, the Certbot certificates last for 3 months.
To renew certificates, you just have to run <code>certbot --nginx renew</code> and it will renew any certificates close to expiry.
</p>
<p>
Of course, you don't want to have to remember to log in to renew them every three months, so it's easy to tell the server to automatically run this command.
We will use a cronjob for this. Run the following command:
</p>
<pre><code>crontab -e</code></pre>
<aside>
<p>
There might be a little menu that pops up asking what text editor you prefer when you run this command.
If you don't know how to use vim, choose <code>nano</code>, the first option.
</p>
</aside>
<p>
This <code>crontab</code> command will open up a file for editting.
A crontab is a list of commands that your operating system will run automatically at certain times.
We are going to tell it to automatically try to renew our certificates every month so we never have to.
</p>
<p>
Create a new line at the end of the file and add this content:
</p>
<pre><code>0 0 1 * * certbot --nginx renew</code></pre>
<p>
Save the file and exit to activate this cronjob.
For more information about cronjobs, see <a href="maintenance.html#cronjobs">the article on them</a>.
</p>
<span class=next><a href="html.html">Next: Use HTML to Make Simple Webpages</a></span>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

86
crypto.html Normal file
View File

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>The Case for Crypto for Normal People &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>The Case for Crypto for Normal People</h1></header>
<nav></nav>
<main>
<p>
A lot of people get nervous about cryptocurrency because it seems like a confusing world that requires risks.
I however, recommend that if you have your own website, you should absolutely allow people to send you tips/donations in the most important two currencies:
Bitcoin (the classic digital gold)
and Monero (the private and cheaper to use version of Bitcoin).
</p>
<p>
To accept donations costs you absolutely nothing.
It costs you nothing to hold this donations for years before you bother to figure out how it works.
You don't have to do anything now but create a wallet and put a public address up.
</p>
<h2>Cryptocurrency is the only open source and peer-to-peer currency</h2>
<p>
The whole point of being an Internet Landchad is that you do not have to rely on centralized platforms running privacy-violating proprietary software which can be used to censor you and others.
</p>
<p>
Cryptocurrency is the first every technology that secures digital scarcity and allows people to transact with one another digitally without any intermediary.
</p>
<p>
Cryptocurrency might be a wild west, but it is the monetary equivalent of free and open source software.
</p>
<p>
I will not give investment advice about it, but I will say this, independent of the possibility of a bitcoin being worth more than $1 million later this decade, it is a generally good idea for you to have a way to exchange value without some proprietary intermediary system.
</p>
<p>
It's a good idea for any person to put some spare money in Bitcoin and Monero and encourage their friends to do so for the mere fact that it can be used to exchange and store value you might owe someone.
It's easier than cash and Monero at least is cheap and easy to transact with.
</p>
<h2>Why Bitcoin and Monero?</h2>
<p>
Bitcoin obviously is the original cryptocurrency.
It is clunky, old, sometimes expensive to transact with for small amounts, but it is consistent and is coming to function as "digital gold":
a way of storing value over years.
As the Bitcoin network comes to be used by more and more people, companies, countries and others to store value, it also increases the price, which obviously has made many people very rich.
Bitcoin will surge and crash in cycles, but the long-term trend is unambiguously up and more people store value on the network.
</p>
<p>
Monero is a more recent cryptocurrency that better preserves privacy and fixes nearly all of Bitcoin's other flaws.
All Bitcoin transactions (and those of nearly all cryptocurrencies) are publicly visible on the blockchain.
That means that people can watch where wallets get and spend money, which can be a massive problem.
Monero, however, uses clever cryptography to avoid this.
This makes it the choice "dark web" currency, but because it has many other benefits (low transaction fees (unlike Bitcoin), ASIC resistance) it is now a staple of the internet.
</p>
<p>
There are many other coins and tokens used for technology projects, but Bitcoin and Monero are by far the most important.
</p>
<p>
Due to the difference in transaction fees (it is expensive to transact with Bitcoin), you are probably more likely to get more little tips via Monero.
Big donations might come in Bitcoin though.
</p>
<ul>
<li><a href="bitcoin.html">Get a Bitcoin wallet and accept Bitcoin donations.</a></li>
<li><a href="monero.html">Get a Monero wallet and accept Monero donations.</a></li>
</ul>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>

127
dns.html Normal file
View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Connect Your Domain and Server with DNS Records &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Connect Your Domain and Server with DNS Records</h1></header>
<nav></nav>
<main>
<h2>The Gist</h2>
<p>Now that we have a <a href=domain.html>domain</a> and a <a href="server.html">server</a>, we can connect the two using DNS records.
DNS (domain name system) records are usually put into your registrar and direct people looking up your website to the server where your website and other things will be.
</p>
<p>
Get your IPv4/IPv6 addresses from Vultr and put them into A/AAAA records on Epik.
Simple process, takes a minute, but here's a guide with a million images just so you know.
</p>
<h2>Open up your Registrar</h2>
<p>
As before, we will be using <a href="https://www.epik.com/?affid=we2ro7sa6">Epik</a> as a registrar and <a href="https://www.vultr.com/?ref=8384069-6G">Vultr</a> as a server host.
Go ahead and log into your accounts on both.
Open up Epik, or your registrar, and click on your domain and then a choice for "DNS records."
This is the screen you'll want to see on Epik.
</p>
<a href=pix/dns-epik.png><img src="pix/dns-epik.png" alt="Blank Epik DNS records"></a>
<p>
Note that we are on the "External Hosts (A, AAAA)" tab by default.
Epik sometimes adds records to this page once you buy a domain.
If they did, you can go ahead and delete them so they look clean like the picture above.
</p>
<p>
<strong>All we have to do now is get our IP addresses from Vultr and add new DNS records that will send connections to our server.</strong>
</p>
<p>
Keep the Epik tab open and open Vultr and we will copy-and-paste our IP addresses in.
</p>
<h2>Find your server's IP addresses</h2>
<p>
Looking at your server in the Vultr menu, you should see a number next to it.
Mine here is <code>104.238.126.105</code> as you can see below the server name (which I have named <code>landchad.net</code> after the domain I will soon attach to it).
That is my <strong>IPv4</strong> address.
</p>
<a href=pix/dns-ipv4.png><img src="pix/dns-ipv4.png" alt="See the IPv4 address?"></a>
<p>
Copy your IPv4 address and
on Epik, click the "Add Record" record button and add two A entries pasting in your IPv4 address like I've done for mine here.
</p>
<a href=pix/dns-ipv4-done.png><img src="pix/dns-ipv4-done.png" alt="IPv4 complete"></a>
<p>
I add two entries.
One has nothing written in the "Host" section. This will direct connections to <code>landchad.net</code> over IPv4 to our IP address.
The second has a <code>*</code> in the "Host" section.
This will direct connections to all possible subdomains to the right place too,
I mean <code>mail.landchad.net</code> or <code>blog.landchad.net</code> and any other subdomain we might want to add later.
</p>
<p>
Now let's get our IPv6 address, which is a little more hidden for some reason.
IPv6 are important because we are running our of IPv4 addresses so it is highly important to allow connections via IPv6 as it will be standard in the future.
Anyway, now back on Vultr, click on the server name.
</p>
<p>On the server settings, <strong>click on settings</strong>
and we will see we are on a submenu labeled "IPv4" where we see our IPv4 address again.
</p>
<a href=pix/dns-vultr.png><img src="pix/dns-vultr.png" alt="Looking for the IPv6"></a>
<p>
Now just click on <strong>IPv6</strong> submenu to reveal your IPv6 address.
</p>
<a href=pix/dns-ipv6.png><img src="pix/dns-ipv6.png" alt="The IPv6 address"></a>
<p>
That ugly looking sequence of numbers and letters with colons in between (<code>2001:19f0:5:ccc:5400:03ff:fe58:324a</code>) is my <strong>IPv6</strong> address.
Yours will look something like it.
Now let's put it into Epik, this time, be sure to select to put in AAAA records as below:
</p>
<a href=pix/dns-ipv6-done.png><img src="pix/dns-ipv6-done.png" alt="IPv6 complete"></a>
<p>
Now just click "Save Changes."
It might take a minute for the DNS settings to propgate across the internet.
</p>
<h2>Test it out!</h2>
<p>
Now we should have our domain name directing to our new server.
We can check by pinging our domain name, check this out:
</p>
<img src="pix/dns-ping.png" alt="Pinging landchad.net">
<p>
As you can see, our ping to <code>landchad.net</code> is now being directed to <code>104.238.126.105</code>.
That means we have successfully set up our DNS records!
You can also run the command <code>host</code> if you have it, which will list both IPv4 and IPv6 addresses for a domain name.
</p>
<span class=next><a href="nginx.html">Next: Setting up the Webserver</a></span>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

145
domain.html Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Get a Domain Name &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Get a Domain Name</h1></header>
<nav></nav>
<main>
<h2>Terms</h2>
<dl>
<dt>Domain name</dt><dd>The name of a website that you type in an address bar. This site's domain name is <code>LandChad.net</code>.</dd>
<dt>Top-level domain (TLD)</dt><dd>The extension of a domain name, like <code>.com</code>, <code>.net</code>, <code>.xyz</code>, etc.</dd>
<dt>Registrar</dt><dd>A service authorized to reserve a domain name for you.</dd>
</dl>
<p>
When domain names first sell, they usually sell for very cheap, but once someone buys one, they have the rights to it until they decide to sell it, often for much, much more money.
Therefore, it's a good idea to reserve a domain name ASAP, even if you didn't intend on doing anything big with it.
</p>
<p>
So let's register your domain name!
</p>
<h2>How</h2>
<p>Domains can be registered at any accredited <dfn>registrar</dfn>.
In this guide, I will use the registrar <a href="https://www.epik.com/?affid=we2ro7sa6">Epik</a> because it is one of the more high quality and easy to use.
The guides on this site will use Epik, but if you choose to register your domain with one of the <a href="https://www.icann.org/en/accredited-registrars">many, many other registrars</a>,
you can still do most of what Epik does, albeit options and settings might appear in different menus.
</p>
<h3>Basic info about domain names</h3>
<ul>
<li>Domain names usually require a <em>very</em> small year fee to keep registered, usually around $12 for most generic TLDs.
There are some "specialty" TLDs that are more expensive, but <code>.com</code>, <code>.xyz</code> and other basic TLDs are that cheap.</li>
<li>Once you own a domain, it is yours as long as you pay the yearly fee, but you can also sell it to someone for however much you want.</li>
<li>Domain names do not hold your data or your website, instead, you add "DNS settings" that direct people connecting to your domain to your IP address.
The purpose of a domain name is so that people don't have to remember your IP address to find your website!</li>
</ul>
<h3>Looking for domain names</h3>
<p>
Let's go to <a href="https://www.epik.com/?affid=we2ro7sa6">Epik's site</a> and you can search for domain names.
</p>
<p>
You can look for whatever domain name you want.
Domains that are already bought and owned by someone else might have the option to "Backorder," but it's always best to get one that is unowned, like these:
</p>
<a href="pix/domain-search.png"><img src="pix/domain-search.png" alt="Searching for a domain name"></a>
<p>
Note the differences in prices.
Some "specialty" TLDs like <code>.game</code> and <code>.io</code> charge a much larger fee, although you might want one.
Some domains above, like <code>.xyz</code> and <code>.org</code> have reduced prices for the first year.
</p>
<p>
Choose the domain you want and buy it.
These <code>.xyz</code> domains are a steal now on sale.
</p>
<a href="pix/domain-cart.png"><img src="pix/domain-cart.png" alt="Buying a domain name"></a>
<p>
That's all you have to do to own a domain name!
As you register a domain, you can also setup an automatic payment to pay your fee yearly to keep your domain.
Easy as pie.
</p>
<p>Now we will get a server to host your website on.</p>
<span class=next><a href="server.html">Next: Get a Server</a></span>
<hr>
<h2>More info on domains</h2>
<h3>Privacy</h3>
<p>
One worry people have when reserving a domain is that a domain registrar requires that you submit a home address!
In fact, it used to be even worse: You could easily look up the information of the owner of a website by looking them up in the public WHOIS database!
</p>
<p>
Firstly, you can easily register a domain under some other address you don't actually have access to.
The internet police does not go looking to see who lives where.
</p>
<p>
But more importantly, <em>every good registrar</em> like Epik now includes some kind of WHOIS guard, which is a service that logs a dummy address including a dummy email in the WHOIS database instead of your proper information.
By the way, if the registrar you're looking at requires an extra fee for this service, switch to another. All good registrars should do this for free nowadays.
</p>
<h3>Registrars to avoid</h3>
<p>
If you are picking a random registrar to use, it's best to avoid any registrar based in America or Europe.
They are more likely to (1) be under the tacit control or cooperation with the "Five Eyes" and other Western privacy-violating regimes
or (2) be staffed by political partisans who have now made a habit out of seizing domains they want to shut up.
</p>
<p>
(2) is a new, but much bigger problem, and even if you don't plan on posting any political content, there is really no predicting what their standards are going to be in the future.
I recommend <a href="https://www.epik.com/?affid=we2ro7sa6">Epik</a> because it is one of the only English-speaking registrars that does what registrars used to do: register domains without political curation, which is unfortunately now becoming more uncommon.
If you don't want to use Epik, use a registrar based in Russia or China or a country more sympathetic to political criticism.
</p>
<ul>
<li>GoDaddy &ndash; People always want to go here because it's so well advertized.
They have a long record of censorship and nickeling-and-diming accounts. Just avoid them.
They can be lazy because a lot of people use them because they are often the "default" registrar.
</li>
<li>NearlyFreeSpeech &ndash; People have signed up for this minor registrar because of its name that's actually tongue-and-cheek. I will let <a href="https://web.archive.org/web/20210121022350/https://blog.nearlyfreespeech.net/2021/01/19/free-speech-in-2021">this post of theirs</a> speak for itself.
Register a domain here only if you want to have it seized.</li>
<li>Google, Amazon &ndash; Maybe this is obvious, but if you are trying to escape the control of Google or Amazon, it is a very, self-defeating thing to register your domain with them.</li>
</ul>
<p>
If you use one of these registrars, be sure to remove your domains from it ASAP.
That is usually a very easy thing to do, although you can only move a domain to a new registrar once every several months.
Pick a good one and stay put.
Registrars without principled policies maintain the right to seize your domain name on their whim.
Don't think for a minute that this doesn't apply to you.
</p>
<!--TAGLIST-->
</main>
<!-- <footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer> -->
</body>
</html>

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

71
federation.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Federation &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Federation</h1></header>
<nav></nav>
<main>
<p>
The internet was supposed to be a place where everyone was an internet LandChad.
Everyone had their own website and email and own services.
Obviously, this site is all about getting back to that ideal.
</p>
<p>
That's why it's important to understand the concept of <dfn>Federation</dfn> in technology.
It's the idea that instead of one central "node" or site that everyone uses, like Facebook, Twitter, Insta, R*ddit,
people can run their own sites that can nonetheless <em>interact</em> with othersites as easily as if they were the same.
</p>
<p>
You already know one federated technology: email.
There is no one site for email, but many sites, and all people on all those sites can use email to talk to one another.
You can get censored on Facebook.
You can't get censored on "email."
You could have a Gmail account deleted, but you are not blocked out of the system, as you can go to any number of sites and get a new account or <a href="email.html">make your own server</a> and you can still talk to all your friends via email.
</p>
<h2>"Federated" Social Media</h2>
<p>
The idea of Federated Social Media is using that principle used in email, but for other things, like chatting or social media.
</p>
<p>
Here's an example.
There is some software <a href="pleroma.html">you can install on your server</a> called <a href="https://pleroma.social/">Pleroma</a>.
It can be installed on your site just like a web or email server, but what it does is creates a Twitter-like microblogging site.
You can then have your friends join and use it just like you use Twitter, with you as the admin and deciding policy and you can even format and decorate the site how you want.
</p>
<h3>It gets even better...</h3>
<p>
<strong>But here is the clincher.</strong>
Federated social media like Pleroma can interact with other Pleroma servers on the internet in the same way that Gmail's servers can send messages to any other email server.
So you might have 2 people on your Pleroma site, but you can interact with the many thousands of other Pleroma sites.
<p>
<p>
There is seamless interaction.
You can view, like, share and respond to their posts as if they were part of your own site.
</p>
<h3>And it gets even betterer...</h3>
<p>
Pleroma is based on a protocol called <a href="https://activitypub.rocks/">Activity Pub</a>.
This is also used by other software like <a href="https://joinpeertube.org/">PeerTube</a> (which is a self-hosted YouTube-equivalent), <a href="https://friendi.ca/">Friendica</a> (Facebook equivalent)
</p>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

219
html.html Normal file
View File

@ -0,0 +1,219 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Make a Simple Webpage &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Make a Simple Webpage</h1></header>
<nav></nav>
<main>
<p>
We now have a webpage that's actually on the real-live internet!
You've already made it!
Now the only issue is putting what you want on your website.
</p>
<p>
In this little series, we'll overview the basics of HTML and CSS,
the two important languages that will allow you to make a stylish multi-page website.
We will start with HTML.
</p>
<h2>HTML</h2>
<p>
HTML is the <strong>h</strong>yper<strong>t</strong>ext <strong>m</strong>arkup <strong>l</strong>anguage.
It is the "language" that all webpages are written in so that all browsers can read and display them properly.
</p>
<p>
A <dfn>markup language</dfn> <em>not</em> the same as a programming language:
Programming languages specify orders for a computer, while markup languages are ways of specifying the styling of text.
Markup languages are necessary because computers run on mere text, not colors, sizes, headers and other styling things.
</p>
<p>
Let's understand what HTML is.
In <a href="nginx.html">a previous article</a>, we put this text in your website's <code>index.html</code>.
</p>
<h3>Paragraphs</h3>
<p>
Note how this HTML file appears as a webpage:
</p>
<table>
<tr>
<td>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;h1&gt;My website!&lt;/h1&gt;
&lt;p&gt;This is my website. Thanks for stopping by!&lt;/p&gt;
&lt;p&gt;Now my website is live!&lt;/p&gt;</code></pre>
</td>
<td>
<img src=pix/nginx-website.png alt="The webpage as it appears.">
</td>
</tr>
</table>
<p>
The content between the <code>&lt;p&gt;</code> and <code>&lt;/p&gt;</code> tag(s) is formatted as different paragraphs.
If you don't use these <code>&lt;p&gt;</code> tags, the text will not be formatted as separate paragraphs even if you write it as
multiple lines.
Observe if we add lines to the end of this file:
</p>
<table>
<tr>
<td>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;h1&gt;My website!&lt;/h1&gt;
&lt;p&gt;This is my website. Thanks for stopping by!&lt;/p&gt;
&lt;p&gt;Now my website is live!&lt;/p&gt;
Here is some more text.
There are no paragraph tags on this stuff.
So it will all appear as one paragraph.
Despite being on multiple lines.
Even this!</code></pre>
</td>
<td>
<img src=pix/html-01.png alt="On p tags">
</td>
</tr>
</table>
<p>
This will seem strange at first, but this is the use of HTML as a markup
language: it allows you to style your document with tags and write it in whatever way is convenient.
</p>
<p>
Let's learn more about what HTML can do.
</p>
<h3>Headings</h3>
<p>
In addition to paragraphs (<code>&lt;p&gt;</code>), we can specify headings with inside <code>&lt;h1&gt;&lt;/h1&gt;</code> tags.
Heading tags are for your page's title and section headings in the document:
</p>
<ul>
<li><code>&lt;h<strong>1</strong>&gt;&lt;/h<strong>1</strong>&gt;</code> &ndash; Main and largest headings</li>
<li><code>&lt;h<strong>2</strong>&gt;&lt;/h<strong>2</strong>&gt;</code> &ndash; Subheadings (smaller)</li>
<li><code>&lt;h<strong>3</strong>&gt;&lt;/h<strong>3</strong>&gt;</code> &ndash; Sub-subheadings (yet smaller)</li>
<li><code>&lt;h<strong>4</strong>&gt;&lt;/h<strong>4</strong>&gt;</code> &ndash; Etc., etc.</li>
</ul>
<table>
<tr>
<td>
<pre><code>&lt;h1&gt;This is a top-level heading.&lt;/h1&gt;
&lt;p&gt;Here is some paragraph text.&lt;/p&gt;
&lt;p&gt;And here is some more...&lt;/p&gt;
&lt;h2&gt;This is a subheading (h2)&lt;/h2&gt;
&lt;p&gt;And another paragraph.&lt;/p&gt;
&lt;h2&gt;And here is another subheading (Also an h2)&lt;/h2&gt;
&lt;p&gt;Etc. etc...&lt;/p&gt;</code></pre>
</td>
<td>
<img src=pix/html-02.png alt="On p and h# tags">
</td>
</tr>
</table>
<h4>A preview to CSS</h4>
<p>
It is very imporant to use headings like this for your pages.
Notice that on this website, headings come in different colors, text-alignment and sizes for emphasis.
If we use these heading tags, when we clear CSS, we can easily style all <code>&lt;h2&gt;</code>, for example,
to be the size and color and alignment we want.
</p>
&lt;<++>&gt;
&lt;<++>&gt;
&lt;<++>&gt;
<h2>A look at a decent template</h2>
<p>
It's a good habit to include the same core things in every HTML page.
I have a template file that I use for this website that includes all the basics.
When I make a new page, I just copy the template and add the content.
Here is what the template looks like:
</p>
<code><pre>&lt;!DOCTYPE html&gt;
&lt;html lang=en&gt;
&lt;head&gt;
&lt;title&gt;<strong>Your page title</strong>&lt;/title&gt;
&lt;meta charset="utf-8"/&gt;
&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /&gt;
&lt;link rel='stylesheet' type='text/css' href='style.css'&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel='alternate' type='application/rss+xml' title='<strong>Site Title</strong> RSS' href='/rss.xml'&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;&lt;h1&gt;<strong>Your page title</strong>&lt;/h1&gt;&lt;/header&gt;
&lt;nav&gt;&lt;/nav&gt;
&lt;main&gt;
<strong>Put all your page content here in the &lt;main&gt; tag.</strong>
&lt;/main&gt;
&lt;footer&gt;&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3>The
</h3>
<h3>HTML can be broken...</h3>
<p>
HTML is interpreted by browsers very liberally.
If you make mistakes in HTML, browsers will do their best to be forgiving and try to figure out what you meant.
</p>
<p>
For example, paragraphs are formatted by the <code>&lt;p&gt;</code> tag and when the paragraph ends,
<code>&lt;/p&gt;</code> should be included.
However, if you forget or neglect to include a <code>&lt;/p&gt;</code> to close the tag, this isn't a big deal, as if your browser sees another <code>&lt;p&gt;</code> to start a new paragraph, it will consider the previous paragraphy closed and both paragraphs will be formatted correctly.
In fact, there are some people nowadays that only ever use the opening tag and never close them!
</p>
<h3>...but not always.</h3>
<p>
That works fine with <code>&lt;p&gt;</code>, but for other tags like <code>&lt;b&gt;</code>, it won't work.
Your browser can't guess where you want the bolding to end, so if you fail to close a <code>&lt;b&gt;</code> with <code>&lt;/b&gt;</code>,
the whole rest of your document will show up bold!
</p>
<span class=next><a href="html2.html">Next: Text formatting in HTML</a></span>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

29
html2.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Text formatting in HTML &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Text formatting in HTML</h1></header>
<nav></nav>
<main>
<p>
Now we know some basic concepts of HTML, including <code>&lt;<++>&gt;p&lt;<++>&gt;</code> and <code>&lt;<++>&gt;h1&lt;<++>&gt;</code>, so now we'll learn all the core formatting abilities of HTML in one brief sitting.
</p>
<h2>Semantic Tags</h2>
&lt;<++>&gt;
&lt;<++>&gt;
&lt;<++>&gt;
&lt;<++>&gt;
<span class=next><a href="<++>">Next:<++></a></span>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

99
html4.html Normal file
View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Doing HTML Right &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Doing HTML Right</h1></header>
<nav></nav>
<main>
<p>
We've noted that HTML is very forgiving
</p>
<h2>A look at a decent template</h2>
<p>
I have a template file that I use for this website that includes all the basics.
When I make a new page, I just copy the template and add the content.
Here is what the template looks like:
</p>
<code><pre>&lt;!DOCTYPE html&gt;
&lt;html lang=en&gt;
&lt;head&gt;
&lt;title&gt;<strong>Your page title</strong>&lt;/title&gt;
&lt;meta charset="utf-8"/&gt;
&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /&gt;
&lt;link rel='stylesheet' type='text/css' href='style.css'&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel='alternate' type='application/rss+xml' title='<strong>Site Title</strong> RSS' href='/rss.xml'&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;&lt;h1&gt;<strong>Your page title</strong>&lt;/h1&gt;&lt;/header&gt;
&lt;nav&gt;&lt;/nav&gt;
&lt;main&gt;
<strong>Put all your page content here in the &lt;main&gt; tag.</strong>
&lt;/main&gt;
&lt;footer&gt;&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3>Explanation of All These Important Things</h3>
<ul>
<li><code>&lt;head&gt;</code> contains page metadata, including:
<ul>
<li><code>&lt;title&gt;</code>, the page title that appears in a browser tab.</li>
<li>The <code>charset</code>, which tells the browser what encoding to use (this ensures unicode characters will display)</li>
<li>The <code>favicon</code> is the little site icon that open appears in the browser tab. Just create an <code>.ico</code> file and put it in <code>favicon.ico</code> and each page will read it.</li>
<li>The <code>stylesheet</code> is the CSS stylesheet, which is extremely important for making your site look good and we will get to <a href="css.html">in the CSS lessons</a>.</li>
<li>The <code>RSS</code> feed which is a file you can create to give users updates about your site. <a href="rss.html">We'll talk about making an RSS later too.</a></li>
</ul>
</li>
<li><code>&lt;body&gt;</code>, which usually designates what content will visibly display.</li>
<li><code>&lt;header&gt;</code>, which is a semantic tag that where we use to put the main page title in.</li>
<li><code>&lt;nav&gt;</code>, a place to store a navigation bar later. I use a script to automatically update the bar on all pages and it looks for this tag.</li>
<li><code>&lt;main&gt;</code>, designates where the main text of the document is.</li>
<li><code>&lt;footer&gt;</code>, the content appearing at the bottom of the document, I also manage this like nav, with a script.</li>
<li><code>&lt;<++>&gt;</code>, <++></li>
<li><code>&lt;<++>&gt;</code>, <++></li>
</ul>
<h2>The Importance</h2>
<p>
If you're new to this world, you might be wondering why you should use body and main and nav and header and all this seemingly confusing stuff!
(Especially when even bad HTML displays!)
</p>
<p>
Not only do many devices, especially mobile ones, specifically use these tags for their features, but
when using CSS, we can also style each of these elements the way you want them to appear without changing the HTML on all your pages.
</p>
<p>
With CSS, we can say that we might want the whole body to have a image background, but main should be floating over it semi-transparent.
We can tell nav to float off on the left or right and we can change footer and nav settings just by tweaking the CSS.
</p>
<p>
Speaking of which, we've been talking up CSS for a while, so now it's time to learn it!
</p>
<span class=next><a href="css.html">Next: Styling with CSS</a></span>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

162
index.html Normal file
View File

@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Chad's Guide to Starting Your Own Website &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Chad's Guide to Starting Your Own Website</h1></header>
<nav></nav>
<main>
<p>
This is LandChad.net, a site dedicated to turning internet peasants into Internet Landlords
by showing them how to setup websites, email servers, chat servers and everything in between.
</p>
<p>Starting a website is something that can be done in a lazy afternoon and costs pocket change.</p>
<p>Most of the internet's problems could be solved if more people had their own personal platforms,
so the objective of this site is to guide any normal person through the process of installing a website.</p>
<h2>All courses</h2>
<h3 id=basic>Basic Personal Website Setup</h3>
<p>
This is the basic "course." Follow these quick tutorials and you'll
have a fully functioning basic web page on the domain name of your
choice.
</p>
<p>
⏳ This "basic course" can take <strong>as little as an hour</strong> or even less.
</p>
<ol class=ll>
<li><a href="domain.html">Get a domain name.</a></li>
<li><a href="server.html">Get a server.</a></li>
<li><a href="dns.html">Set up DNS settings to connect your server and domain name.</a></li>
<li><a href="nginx.html">Set up your web server.</a></li>
<li><a href="certbot.html">Get a secure HTTPS connection with Certbot.</a></li>
</ol>
<h3 id=crypto>Accepting Cryptocurrency Tips</h3>
<ul class=ll>
<li><a href="crypto.html">The Case for Crypto for Normal People</a></li>
<li><a href="bitcoin.html">Accept <img src="pix/btc.svg" alt="btc logo">Bitcoin (BTC) donations</a></li>
<li><a href="monero.html">Accept <img src="pix/xmr.svg" alt="xmr logo">Monero (XMR) donations for superior privacy</a></li>
<li><a href="openalias.html">OpenAlias to make crypto easy</a></li>
<li><a href="bat.html"><img src="pix/bat.svg">Basic Attention Token (BAT)</a></li>
</ul>
<!-- RSYNC -->
<h2>In the Works...</h2>
<p>
These articles are still under construction.
Subscribe to our <a href="rss.xml"><img src="pix/rss.svg">RSS feed</a> for updates.
</p>
<h3>Editing and Styling Webpages</h3>
<p>
Now that we have a basic webpage up hosted on our own server, we can
look more directly about how to design and style your website to
contain the material you want in the way that you want.
</p>
<ol class=ll>
<li><a href="html.html">HTML Bare Basics</a></li>
<li><a href="html2.html">Text formatting in HTML</a></li>
<li><a href="html3.html">Links and Images in HTML</a></li>
<li><a href="html4.html">Doing HTML right.</a></li>
<li><a href="css.html">Use CSS to style webpages consistently.</a></li>
</ol>
<h3>Email server</h3>
<p>
The only truly private and way to use email is the host your own!
This is
</p>
<ul class=ll>
<li><a href="emailwiz.html">An email server the easy way.</a></li>
<li>Or, <a href="email-manual.html">email the longer way.</a></li>
<li><a href="spam.html">Filtering spam efficiently</a></li>
</ul>
<h3>Excellent Extras</h3>
<p>
There are also many one-off articles on other things you can add to your website.
</p>
<ul class=ll>
<li><a href="maintenance.html">How to maintain a server.</a></li>
<li><a href="sshkeys.html">Use your SSH keys to prevent hacking.</a></li>
<li><a href="rsync.html">Rsync is glorious.</a></li>
<li><a href="firewall.html">ufw as a Firewall</a></li>
</ul>
<h3>Make your own social media</h3>
<ul class=ll>
<li>Federation</li>
</ul>
<ul class=ll>
<li>XMPP</li>
<li>Matrix</li>
<li>Pleroma (like Twitter)</li>
<li>PeerTube (like YouTube)</li>
</ul>
<h2><img src="pix/rss.svg" alt="rss"> Subscribe for Updates</h2>
<p>
Subscribe to our <img src="pix/rss.svg" alt="rss logo">RSS feed <a href="rss.xml">here</a> to get updates and new articles on the site.
</p>
<h2>Support LandChad.net</h2>
<p>
No ads, trackers or trash on this site.
We are funded by doing good and earning gratitude.
Express your gratitude in the following ways:
</p>
<ul class=ll>
<li>When settings up a website, use our linked affiliate links, like <a href="https://www.vultr.com/?ref=8384069-6G">to Vultr</a>.</li>
<li>Donate cryptocurrencies:</li>
</ul>
<div class=cryptocontainer>
<div class=cryptoinfo>
<p><img style="max-height:1em;max-width:1em" src=pix/xmr.svg> Monero </br>
<code>84RXmrsE7ffCe1ADprxLMHRpmyhZuWYScDR4YghE8pFRFSyLtiZFYwD6EPijVzD3aZiEpg57MfHEr1pGJNPXyJgENMnWrSh</code> </br>
</p>
<a href=pix/xmr.png><img class=qr src=pix/xmr.png></a>
</div>
<div class=cryptoinfo>
<p><img style="max-height:1em;max-width:1em" src=pix/btc.svg> Bitcoin </br>
<code>bc1q9f3tmkhnxj8gduytdktlcw8yrnx3g028nzzsc5</code> </br>
</p>
<a href=pix/btc.png><img class=qr src=pix/btc.png></a>
</div>
</div>
<!--TAGLIST-->
</main>
<!-- <footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer> -->
</body>
</html>

148
maintenance.html Normal file
View File

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Maintaining a Server &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Maintaining a Server</h1></header>
<nav></nav>
<main>
<p>Here are some important topics you should be familiar with whenever you are managing a server.</p>
<h2>Keep packages up to date.</h2>
<p>All GNU/Linux distributions use package managers to easily be able to install and update packages without manually downloading them.
On Debian, which we use here for these tutorial the package manager is <code>apt-get</code> or <code>apt</code> for short.
</p>
<p>
It's a good idea to use <code>apt</code> to keep your software reasonably up to date.
</p>
<pre><code>apt update
apt upgrade</code></pre>
<p>
Not only do up-to-date packages often come with more features, but they can also fix any possible security bugs.
</p>
<h2>Troubleshooting general problems</h2>
<p>
Often when you are installing something new, you might miss a step and run into an error, so it's important to know how to check and see what errors have happened on your computer.
</p>
<p>On Debian and other GNU/Linux distributions that use systemd (most of them), you can use the command <code>journalctl</code> to look at the system's general log.
You will probably want to run <code>journalctl -xe</code> as the <code>-x</code> and <code>-e</code> as that gives the most information and starts you at the bottom of the log to see the most recent errors.
</p>
<p>
Some programs do not use this system log, but have their own logs stored in <code>/var/log/</code>, or sometimes it's more convenient to look at a specific program's log to see only its issues.
</p>
<p>For example, we can see that in <code>/var/log/nginx/</code>, nginx produces both <code>error</code> and <code>access</code> files.
The <code>access</code> files show you all the times people connect to files on your server and much more.
We can look at the most recent errors by running:
</p>
<pre><code>tail -n 25 /var/log/nginx/error.log</code></pre>
<p>
The command <code>tail -n 25</code> means "show me the last 25 lines of this file."
You can replace that with <code>less</code> to browse the whole file.
In <code>less</code>, navigate with arrows or vim-keys and exit with <code>q</code>.
</p>
<h3>systemctl</h3>
<p>
Another tool on systemd distributions is <code>systemctl</code>.
At a basic level, use <code>systemctl status put-service-name-here</code>
to see if a system service is running and its most recent log.
But there's much more to <code>systemctl</code>.
</p>
<p>
For example, you can run <code>systemctl stop nginx</code> to stop NginX and <code>systemctl start nginx</code> to start it back up (or use <code>restart</code> for both).
When you make changes to a program's configuration files, <code>reload</code> well make them reload them.
If you no longer want a service to start when the system is rebooted, use <code>disable</code>, or conversely, to make a service start on reboot use <code>enable</code>.
</p>
<h2 id=cronjobs>Cronjobs</h2>
<p>
You might want to have your server automatically run commands (like updating something) at a set time without having to tell it.
We can create a "cronjob" to schedule one of these regular commands.
To create a cronjob, simply run:
</p>
<pre><code>crontab -e</code></pre>
<aside>
<p>
It might ask you what editor you want to use if you run this for the first time.
Select <code>nano</code> if you don't know how to use vim.
</p>
</aside>
<p>
In this crontab file, we can add a line for a command.
Here is an example:
</p>
<p><strong>unfinished</strong></p>
<h2>Finding Files</h2>
<p>
Especially if you're new to how a GNU/Linux system is arranged, you might need help finding files.
To find program-related files, you can just use <code>whereis</code>:
</p>
<pre><code>$ whereis nginx
nginx: /usr/sbin/nginx /usr/lib/nginx /etc/nginx /usr/share/nginx /usr/share/man/man8/nginx.8.gz</code></pre>
<p>This command lists the directories related to that program. For example, <code>/etc/nginx</code> is where the configuration files are and <code>/usr/share/nginx</code> is where the library and module-like files are.</p>
<p>But <code>whereis</code> can be used only with installed programs.
A more general tool is the pair of <code>updatedb</code> and <code>locate</code>.
</p>
<p>
<code>updatedb</code> is a command that quickly indexes every file and directory on your computer.
Then you can run <code>locate</code> to find a file containing a given name.
After running <code>updatedb</code>, try running <code>locate nginx</code> to find all files with "nginx" in their name.
</p>
<p>
You can make your search more specific by chaining other Unix commands through pipes.
For example, <code>grep</code> takes input and returns only lines that match an extra argument.
In the example below, we <code>locate</code> all files with "nginx" in the name, but we use <code>grep</code> to only show us those with the word "available" in them.
</p>
<pre><code>root@landchad:~# locate <strong>nginx</strong> | grep <strong>available</strong>
/etc/nginx/modules-available
/etc/nginx/sites-available
/etc/nginx/sites-available/default
/etc/nginx/sites-available/landchad
/usr/share/nginx/modules-available
/usr/share/nginx/modules-available/mod-http-auth-pam.conf
/usr/share/nginx/modules-available/mod-http-dav-ext.conf
/usr/share/nginx/modules-available/mod-http-echo.conf
/usr/share/nginx/modules-available/mod-http-geoip.conf
/usr/share/nginx/modules-available/mod-http-image-filter.conf
/usr/share/nginx/modules-available/mod-http-subs-filter.conf
/usr/share/nginx/modules-available/mod-http-upstream-fair.conf
/usr/share/nginx/modules-available/mod-http-xslt-filter.conf
/usr/share/nginx/modules-available/mod-mail.conf
/usr/share/nginx/modules-available/mod-stream.conf</code></pre>
<p>
<code>updatedb</code> is an ideal candidate for a cronjob so you don't have to worry about running each time.
For example, adding the following to your crontab will run <code>updatedb</code> every 30 minutes:
</p>
<pre><code>*/30 * * * * /usr/bin/updatedb</code></pre>
<p>
</p>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

111
monero.html Normal file
View File

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Setting up a Monero wallet &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Setting up a Monero wallet</h1></header>
<nav></nav>
<main>
<p>
Monero (abbreviated XMR) is easily the cryptocurrency most actually used as such.
Unlike Bitcoin, Monero is actually private and has very low transaction fees.
That makes it a good idea to get a Monero wallet and add an address on your website where you can receive donations.
</p>
<h2>Generate a Monero wallet</h2>
<p>
Got to <a href="https://www.getmonero.org/downloads/">https://www.getmonero.org/downloads/</a> to Monero's official site and you can download either the GUI (graphical) or CLI (command-line wallet).
Some Linux distributions will have these packages in their repositories (<code>monero</code> and <code>monero-gui</code> on Arch-based distributions).
</p>
<aside>
<p>
If you are a Windows user, note that you will <em>probably</em> get some kind of warning that you are installing something malicious.
This is because many malicious pieces of software include crypto miners in them.
This wallet, obviously, does include one as well, because it has the ability to mine if you want.
You can disregard these messages and as that official site mentions, you can follow their directions to check the integrity of the download with SHA265.
</p>
</aside>
<p>
Once you install and run the wallet program, you will get a menu like this:
</p>
<img src="pix/monero-01.png" alt="simple mode">
<p>
Now if you want to start using Monero and using it as a pro, you can choose to download the whole blockchain which will maximize your transactional privacy,
however for this tutorial or setting up a wallet, we can just do the Simple Mode and save our bandwidth.
<strong>In fact, if you are paranoid, you can disconnect your computer from the internet while generating a wallet.</strong>
</p>
<p>Now we choose to create a wallet.</p>
<img src="pix/monero-02.png" alt="create wallet">
<p>
Now we get the most important and sensitive part, you private mneumonic seed.
<strong>These words are sacred! They are your money!</strong>
To be clear, they are randomly generated words that seed the randomness required to unlock whatever money you receive or hold.
Never show these words to anyone, don't even keep them on your computer, but write them down and store them securely in real life in a safe or somewhere where only you have access.
</p>
<img src="pix/monero-03.png" alt="seed">
<aside>
<p>
It goes without saying that the seed above that we generated for this tutorial should never be used by anyone since it is public on the internet and anyone could easily take the funds from the wallet.
</p>
</aside>
<p>
Finally, we get to the main wallet screen.
Now we see your public sharable wallet receiving address.
It is the thing that starts with <code>4</code> and is too long to be included in the image below labeled "Primary address."
</p>
<img src="pix/monero-04.png" alt="address">
<p>
Click the clipboard next to it to copy the whole sequence (which will be more than 90 letters and numbers) to your clipboard.
This is your address.
Put it on your website and you can receive donations!
</p>
<p>
You can also click to save that QR code image and you can put it up on your website and people will be able to scan it and send you Monero.
When scanned, that QR code will read as the public donation address.
</p>
<h2>What do I do now?</h2>
<p>
You can now receive Monero/XMR donations!
All you need to do is put either your full address or your QR code on your site and people can send you tips in Monero.
</p>
<p>
Here is the address we use for this site (i.e. not the compromised wallet generated above):
</p>
<p style=font-size:small>84RXmrsE7ffCe1ADprxLMHRpmyhZuWYScDR4YghE8pFRFSyLtiZFYwD6EPijVzD3aZiEpg57MfHEr1pGJNPXyJgENMnWrSh</p>
<img style="max-height:200px" src="pix/xmr.png" alt="monero donation qr">
<p>
It's now up to you how and where to display these on your site.
</p>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

237
nginx.html Normal file
View File

@ -0,0 +1,237 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Setting Up a Webserver &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Setting Up a Webserver</h1></header>
<nav></nav>
<main>
<p>At this point, we should have a domain name and a server and the domain name should direct to the IP address of the server with DNS records.
As I said in previous articles, the instructions I will give will be for <strong>Debian 10</strong>.
In this article, other distributions might work a little differently.</p>
<h2>Logging in the the server</h2>
<p>
We first want to log into our VPS to get a command prompt where we can set up the web server.
I am assuming you are using either MacOS or GNU/Linux and you know how to open a terminal.
On Windows, you can also use either PuTTY or the Windows Subsystem for Linux.
</p>
<p>
Now on Vultr's site, you can click on your VPS and you will see that there is an area that shows you the password for your server at the bottom here.
</p>
<img src="pix/nginx-password.png" alt="Find your password">
<p>
Now pull up a terminal and type:
</p>
<pre><code>ssh root@<strong>yourdomain.com</strong></code></pre>
<p>
This command will attempt to log into your server.
It should prompt you for your password, and you can just copy or type in the password from Vultr's site.
</p>
<aside>
<p>
If you get an error here, you might not have done your <a href="dns.html">DNS settings</a> right.
Double check those.
Note you can also replace the <code>yourdomain.com</code> with your IP address, but you'll want to fix your DNS settings soon.
</p>
</aside>
<h2>Installing the Webserver: NGINX</h2>
<p>
If the program runs without an error, <code>ssh</code> has now logged you into your server.
Let's start by running the following commands.
</p>
<pre><code>apt update
apt upgrade
apt install nginx</code></pre>
<p>
The first command checks for packages that can be updated and the second command installs any updates.
</p>
<p>
The third command installs <code>nginx</code> (pronounced Engine-X) which is the web server we'll be using,
along with some other programs.
</p>
<h3>Our nginx configuration file</h3>
<p>
<code>nginx</code> is your webserver.
You can make a little website or page, put it on your VPS and then tell <code>nginx</code> where it is and how to host it on the internet.
It's simple. Let's do it.
</p>
<aside>
<p>
<code>nginx</code> configuration files are in <code>/etc/nginx/</code>.
The two main subdirectories in there (on Debian and similar OSes) are <code>/etc/nginx/sites-available</code> and <code>/etc/nginx/sites-enabled</code>.
The names are descriptive.
The idea is that you can make a site configuration file in <code>sites-available</code> and when it's all ready,
you make a link/shortcut to it in <code>sites-enabled</code> which will activate it.
</p>
</aside>
<p>First, let's create the settings for our website. You can copy and paste (with required changes)
but I will also explain what the lines do.
</p>
<p>
Create a file in <code>/etc/nginx/sites-available</code> by doing this:
</p>
<pre><code>nano /etc/nginx/sites-available/mywebsite</code></pre>
<p>
Note that "nano" is a command line text editor.
You will now be able to create and edit this file.
By saving, this file will now appear.
Note also I name the file <code>mywebsite</code>, but you can name it whatever you'd like.
</p>
<p>
I'm going to add the following content to the file.
The content <strong>like this</strong> will be different depending on what you want to call your site.
</p>
<pre><code>server {
listen 80 ;
listen [::]:80 ;
server_name <strong>landchad.net</strong> ;
root /var/www/<strong>landchad</strong> ;
index index.html index.htm index.nginx-debian.html ;
location / {
try_files $uri $uri/ =404 ;
}
}</code></pre>
<aside>
<h4>Explanation of those settings</h4>
<p>
The <code>listen</code> lines tell <code>nginx</code> to listen for connections on both IPv4 and IPv6.
</p>
<p>
The <code>server_name</code> is the website that we are looking for.
By putting <code>landchad.net</code> here, that means whenever someone connects to this server and is looking for that address,
they will be directed to the content in this block.
</p>
<p>
<code>root</code> specifies the directory we're going to put our website files in.
This can theoretically be wherever, but it is conventional to have them in <code>/var/www/</code>.
Name the directory in that whatever you want.
</p>
<p>
<code>index</code> determine what the "default" file is;
normally when you go to a website, say <code>landchad.net</code>, you are actually going to a file at <code>landchad.net/index.html</code>.
That's all that is.
Note that that this in concert with the line above mean that <code>/var/www/landchad/index.html</code>, a file on our computer that we'll create
will be the main page of our website.
</p>
<p>
Lastly, the <code>location</code> block is really just telling the server how to look up files, otherwise throw a 404 error.
Location settings are very powerful, but this is all we need them for now.
</p>
</aside>
<h3>Create the directory and index for the site</h3>
<p>
We'll actually start making a "real" website later, but let's go ahead and create a little page that will appear on when someone looks up the domain.
</p>
<pre><code>mkdir /var/www/landchad</code></pre>
<p>
Now let's create and index file inside of that directory which will appear when the website is accessed:
</p>
<pre><code>nano /var/www/landchad/index.html</code></pre>
<p>
I'll add the following basic content, but you can add whatever you want.
This will appear on your website.
</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;h1&gt;My website!&lt;/h1&gt;
&lt;p&gt;This is my website. Thanks for stopping by!&lt;/p&gt;
&lt;p&gt;Now my website is live!&lt;/p&gt;</code></pre>
<h3>Enable the site</h3>
<p>
Once you save that file, we can enable it making a link to it in the <code>sites-enabled</code> directory:
</p>
<pre><code>ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled</code></pre>
<p>
Now we can just <code>reload</code> or <code>restart</code> to make <code>nginx</code> service the new configuration:
</p>
<pre><code>systemctl reload nginx</code></pre>
<h2>The Firewall</h2>
<p>
Vultr and some other VPS automatically install and enable <code>ufw</code>, a firewall program.
This will block bacsically everything by default, so we have to change that.
If you don't have <code>ufw</code> installed, you can skip this section.
</p>
<h3>Option 1: Disable the firewall entirely...</h3>
<p>It's usually easier to just entirely disable the firewall.
I recommend this in 99% of the cases.
</p>
<pre><code>systemctl stop ufw
systemctl disable ufw</code></pre>
<h3>Option 2: Or enable the proper ports.</h3>
<p>If you want to keep and customize the firewall for later, we can get away with just enabling the ports needed for a webserver:
</p>
<pre><code>ufw allow 80
ufw allow 443</code></pre>
<p>
Port number 80 is the canonical webserver port, while 443 is the port used for encrypted connections.
We will certainly need that for the next page.
</p>
<h2>We now have running website!</h2>
<p>
At this point you can now type in your website in your browser and this webpage will appear!
</p>
<img src=pix/nginx-website.png alt="The webpage as it appears.">
<p>
Note the "Not secure" notification.
The next brief step is securing encrypted connections to your website.
</p>
<span class=next><a href="certbot.html">Next: Enabling Encrypted Connections</a></span>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

123
openalias.html Normal file
View File

@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Open Alias &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Open Alias</h1></header>
<nav></nav>
<main>
<h2>The Problem</h2>
<p>
Cryptocurrency can be unintuitive.
After all, look at this annoying Monero address of ours:
</p>
<ul>
<li>84RXmrsE7ffCe1ADprxLMHRpmyhZuWYScDR4YghE8pFRFSyLtiZFYwD6EPijVzD3aZiEpg57MfHEr1pGJNPXyJgENMnWrSh</li>
</ul>
<p>
It breaks up pages and looks ugly. When you copy and paste it to send money, you might be paranoid that you somehow added an extra character in there.
That's all around a bad user experience.
</p>
<h3>It would be nice...</h3>
<p>
It would be nice if we could just input someone's email address or maybe a website and send Bitcoin or Monero to that instead.
So instead of that long jumble, it would be eaiser to just type in someone's website or email and sending them money that way.
</p>
<h2>The Solution</h2>
<p>The <a href="https://openalias.org/">OpenAlias</a> standards are just that.
It uses <a href="dns.html">DNS</a> settings, which you know something about, to link a website or an email address with a cryptocurrency address.
It allows someone to simply put <code>landchad.net</code> or <code>chad@landchad.net</code> as a payment recipient and that will direct to that long address above.
</p>
<p>
The default Monero wallet and Bitcoin's Electrum are already compatible with OpenAlias, as are a growing group of wallet software.
</p>
<h2>Let's do it.</h2>
<p>
Open up your domain registar (<a href="https://www.epik.com/?affid=we2ro7sa6">Epik</a>, if you have religiously followed our tutorials) and open up your DNS settings for the website you would like to add.
</p>
<p>
Open the <strong>TXT record</strong> section.
Now, create an entry with text like that below:
</p>
<pre><code>oa1:xmr recipient_address=<strong>84RXmrsE7ffCe1ADprxLMHRpmyhZuWYScDR4YghE8pFRFSyLtiZFYwD6EPijVzD3aZiEpg57MfHEr1pGJNPXyJgENMnWrSh</strong>; recipient_name=<strong>LandChad.net</strong>;</code></pre>
<p>Obviously change the address to your desired address and you may also give a proper name for yourself (this may be multiple words).
Note that the entry above is <strong>all one line</strong>.
</p>
<p>
Now create a new TXT entry and input this text into the <strong>TXT Value</strong> input box.
Note here that I have create two entries:
</p>
<img src="pix/openalias-01.png" alt="openalias">
<p>
One entry's "Host" is left empty, this will allow people to send Monero by merely typing <code>landchad.net</code>.
</p>
<p>
The second entry has "chad" as the "Host"; this will allow people to send money to <code>chad@landchad.net</code>, i.e.
this is how you allow people to connect a Monero address with an email address.
</p>
<h3>Checking to see if it works...</h3>
<p>
Let's check to see if it works.
In the Monero wallet, we can now type in <code>landchad.net</code> as a recipient:
</p>
<img src="pix/openalias-02.png" alt="checking">
<p>
And once we press the "Resolve" button, it automatically turns into that address we gave to the DNS!
</p>
<img src="pix/openalias-03.png" alt="It works!">
<p>
Now people can donate Monero to you without having to worry about QR codes or copying-and-pasting super-long public addresses!
</p>
<h3>Now with Bitcoin!</h3>
<p>
OpenAlias was originally developed for Monero, but since it's such a good idea, Bitcoin wallets have implemented it as well, so let's add some TXT entries for Bitcoin.
The OpenAlias TXT records have the same format, except for the <strong>xmr</strong> at the beginning is replaced with <strong>btc</strong> and obviously we use a Bitcoin address instead of Monero.
</p>
<pre><code>oa1:<strong>btc</strong> recipient_address=<strong>bc1q9f3tmkhnxj8gduytdktlcw8yrnx3g028nzzsc5</strong>; recipient_name=<strong>LandChad.net</strong>;</code></pre>
<p>Add the TXT entries in and save:</p>
<img src="pix/openalias-04.png" alt="bitcoin openalias entries">
<p>And we can then check that it's working by trying to send money to <code>landchad.net</code> in Electrum.
See that it automatically appends the address!
</p>
<img src="pix/openalias-05.png" alt="electrum resolves an openalias">
<p>
And that's it. Now users can easily send your website or email address Bitcoin or Monero without having to worry about hard to read addresses and QR codes.
</p>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

22
pix/bat.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 140.9 136.3" style="enable-background:new 0 0 140.9 136.3;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.3;enable-background:new ;}
.st1{fill:#662D91;}
.st2{fill:#9E1F63;}
.st3{fill:#FF5000;}
.st4{fill:#FFFFFF;stroke:#FF5000;stroke-width:0.83;stroke-miterlimit:10;}
</style>
<title>BAT_icon</title>
<g id="Layer_2">
<g id="Layer_1-2">
<polygon class="st0" points="97,132.6 140.9,133 64.2,0 1.2,110.2 "/>
<polygon class="st1" points="127.3,109.8 64.3,73.7 1.2,110.2 "/>
<polygon class="st2" points="64.2,0 63.8,73.7 127.3,109.8 "/>
<polygon class="st3" points="1.2,110.2 64,74.3 64.2,0 "/>
<polygon class="st4" points="63.8,44.8 38.4,88.5 89.9,88.5 "/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 990 B

BIN
pix/bitcoin-01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
pix/bitcoin-02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
pix/bitcoin-03.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

BIN
pix/bitcoin-04.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

BIN
pix/brave-01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
pix/brave-02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

BIN
pix/brave-03.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

BIN
pix/brave-04.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

BIN
pix/btc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 568 B

7
pix/btc.svg Normal file
View File

@ -0,0 +1,7 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" width="64" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g transform="translate(0.00630876,-0.00301984)">
<path fill="#f7931a" d="m63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z"/>
<path fill="#FFF" d="m46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
pix/certbot-01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

BIN
pix/certbot-02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

BIN
pix/certbot-03.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
pix/chad.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
pix/dns-epik.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

BIN
pix/dns-ipv4-done.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
pix/dns-ipv4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
pix/dns-ipv6-done.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

BIN
pix/dns-ipv6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

BIN
pix/dns-ping.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
pix/dns-vultr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

BIN
pix/domain-cart.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

BIN
pix/domain-search.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

15
pix/git.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="97px" height="97px" viewBox="0 0 97 97" enable-background="new 0 0 97 97" xml:space="preserve">
<g>
<path fill="#F05133" d="M92.71,44.408L52.591,4.291c-2.31-2.311-6.057-2.311-8.369,0l-8.33,8.332L46.459,23.19
c2.456-0.83,5.272-0.273,7.229,1.685c1.969,1.97,2.521,4.81,1.67,7.275l10.186,10.185c2.465-0.85,5.307-0.3,7.275,1.671
c2.75,2.75,2.75,7.206,0,9.958c-2.752,2.751-7.208,2.751-9.961,0c-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997
c0.67,0.332,1.303,0.774,1.861,1.332c2.75,2.75,2.75,7.206,0,9.959c-2.75,2.749-7.209,2.749-9.957,0c-2.75-2.754-2.75-7.21,0-9.959
c0.68-0.679,1.467-1.193,2.307-1.537V36.369c-0.84-0.344-1.625-0.853-2.307-1.537c-2.083-2.082-2.584-5.14-1.516-7.698
L31.798,16.715L4.288,44.222c-2.311,2.313-2.311,6.06,0,8.371l40.121,40.118c2.31,2.311,6.056,2.311,8.369,0L92.71,52.779
C95.021,50.468,95.021,46.719,92.71,44.408z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

3
pix/github.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
</svg>

After

Width:  |  Height:  |  Size: 967 B

BIN
pix/html-01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
pix/html-02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
pix/monero-01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

BIN
pix/monero-02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

BIN
pix/monero-03.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

BIN
pix/monero-04.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

BIN
pix/nginx-password.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
pix/nginx-website.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
pix/openalias-01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
pix/openalias-02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
pix/openalias-03.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
pix/openalias-04.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
pix/openalias-05.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

33
pix/rss.svg Normal file
View File

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="svg2" sodipodi:version="0.32" inkscape:version="0.47 r22583" inkscape:output_extension="org.inkscape.output.svg.inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" sodipodi:docname="rss-feed.svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<path fill="#E15A00" d="M9.496,210.008c0,19.6,15.888,35.486,35.486,35.486h164.034c19.604,0,35.487-15.889,37.487-34.82 l-0.001-164.013c-1.999-20.266-17.888-36.155-37.484-36.155H44.982c-19.599,0-35.486,15.889-35.486,35.487V210.008z"/>
<g id="layer1" transform="translate(-373.642,-318.344)" inkscape:groupmode="layer" inkscape:label="Layer 1">
<path id="path5270" sodipodi:cy="200.64285" sodipodi:type="arc" sodipodi:cx="360.35715" sodipodi:rx="24.642859" sodipodi:ry="23.928572" fill="#FFFFFF" d=" M469.09,505.078c0,11.498-9.598,20.817-21.438,20.817c-11.84,0-21.438-9.319-21.438-20.817c0-11.496,9.599-20.816,21.438-20.816 C459.491,484.262,469.09,493.582,469.09,505.078z"/>
<path id="path5805" sodipodi:nodetypes="ccccc" fill="#FFFFFF" d="M426.835,455.057l-0.073-30.273 c64.706,3.375,100.618,49.674,101.5,101.939h-30.318C497.441,480.781,466.204,456.728,426.835,455.057z"/>
<path id="path5807" sodipodi:nodetypes="ccccc" fill="#FFFFFF" d="M427.202,404.572l-0.879-30.758 c99.428,4.616,152.676,76.769,153.348,152.909l-31.197-0.439C549.839,477.58,513.808,406.017,427.202,404.572z"/>
</g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="102.5" y1="-491.002" x2="102.5" y2="-598.5135" gradientTransform="matrix(1 0 0 -1 25.5 -353)">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.15"/>
<stop offset="0.6626" style="stop-color:#000000;stop-opacity:0"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M9.496,115.402v94.606c0,19.6,15.888,35.486,35.487,35.486h164.033 c19.604,0,35.488-15.889,37.488-34.82v-95.952c-36.779,15.182-77.074,23.577-119.337,23.577 C85.542,138.299,45.825,130.154,9.496,115.402z"/>
</g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="102.4995" y1="-364.168" x2="102.4995" y2="-491.7969" gradientTransform="matrix(1 0 0 -1 25.5 -353)">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.85"/>
<stop offset="0.66" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M209.018,10.505H44.983c-19.599,0-35.487,15.889-35.487,35.487v69.409 c36.33,14.751,76.046,22.897,117.671,22.897c42.263,0,82.558-8.396,119.336-23.577v-68.06 C244.504,26.395,228.615,10.505,209.018,10.505z"/>
<path fill="none" stroke="#E15A00" stroke-width="2" stroke-miterlimit="10" d="M246.503,114.721V46.66 c-1.999-20.266-17.888-36.155-37.485-36.155H44.982c-19.599,0-35.486,15.889-35.486,35.487v69.409"/>
<g>
<g>
<g>
<path fill="none" stroke="#B34700" stroke-width="2" stroke-miterlimit="10" d="M9.496,115.401v94.605 c0,19.6,15.888,35.486,35.486,35.486h164.034c19.604,0,35.487-15.889,37.487-34.819v-95.952"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
pix/server-features.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
pix/server-location.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
pix/server-size.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

BIN
pix/server-type.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
pix/ssh-01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

26
pix/xmpp.svg Normal file
View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" viewBox="0 0 200 200" width="200px" height="200px" x="0px" y="0px" enable-background="new 0 0 200 200">
<linearGradient id="SVGID_right_" y2="1.279e-13" gradientUnits="userSpaceOnUse" x2="-1073.2" gradientTransform="translate(1196.604,37.368977)" y1="126.85" x1="-1073.2">
<stop stop-color="#1b3967" offset=".011" />
<stop stop-color="#13b5ea" offset=".467" />
<stop stop-color="#002b5c" offset=".9945" />
</linearGradient>
<linearGradient id="SVGID_left_" y2="1.279e-13" gradientUnits="userSpaceOnUse" x2="-1073.2" gradientTransform="matrix(-1,0,0,1,-994.78801,37.367977)" y1="126.85" x1="-1073.2">
<stop stop-color="#1b3967" offset=".011" />
<stop stop-color="#13b5ea" offset=".467" />
<stop stop-color="#002b5c" offset=".9945" />
</linearGradient>
<path d="m 151.80512,51.557978 c 0.077,1.313 -1.787,0.968 -1.787,2.293 0,38.551002 -46.558,97.366012 -91.687985,108.730012 v 1.639 C 118.28313,158.69999 186.89012,96.41998 188.40012,37.369977 l -36.599,14.189001 z" style="fill:url(#SVGID_right_)" />
<path d="m 133.67312,56.300978 c 0.076,1.313 0.12,2.63 0.12,3.957 0,38.551002 -30.69898,90.497012 -75.826985,101.860012 v 1.639 c 59.044005,-2.79 105.809995,-63.02401 105.809995,-109.200012 0,-2.375 -0.128,-4.729 -0.371,-7.056 l -29.73,8.798 z" style="fill:#e96d1f" />
<path d="m 163.69112,46.951978 -7.61699,2.722 c 0.041,0.962 0.066,2.254 0.066,3.225 0,41.219002 -37.271,98.204012 -87.271995,107.120012 -3.24501,1.088 -7.53801,2.077 -10.932,2.931 v 1.638 C 123.19013,159.02799 169.03613,92.72198 163.69612,46.947978 Z" style="fill:#d9541e" />
<path d="m 50.011,51.556978 c -0.077,1.313 1.787,0.968 1.787,2.293 0,38.551002 46.558007,97.366012 91.68799,108.730012 v 1.639 C 83.533,158.69899 14.926,96.41898 13.416,37.368977 l 36.599,14.189001 z" style="fill:url(#SVGID_left_)" />
<path d="m 68.143,56.299978 c -0.076,1.313 -0.12,2.63 -0.12,3.957 0,38.551002 30.698995,90.497012 75.82699,101.860012 v 1.639 C 84.806,160.96599 38.04,100.73198 38.04,54.555978 c 0,-2.375 0.128,-4.729 0.371,-7.056 l 29.73,8.798 z" style="fill:#a0ce67" />
<path d="m 38.125,46.950978 7.617,2.722 c -0.041,0.962 -0.066,2.254 -0.066,3.225 0,41.219002 37.271,98.204012 87.27199,107.120012 3.245,1.088 7.538,2.077 10.932,2.931 v 1.638 C 78.626,159.02699 32.78,92.72098 38.12,46.946978 Z" style="fill:#439639" />
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
pix/xmr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 768 B

7
pix/xmr.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<path d="M127.9983,0.0005 C57.3183,0.0005 0.0003,57.3155 0.0003,127.9975 C0.0003,142.1255 2.2893,155.7145 6.5183,168.4275 L44.7993,168.4275 L44.7993,60.7335 L127.9983,143.9335 L211.1973,60.7335 L211.1973,168.4275 L249.4793,168.4275 C253.7103,155.7145 256.0003,142.1255 256.0003,127.9975 C256.0003,57.3155 198.6813,0.0005 127.9983,0.0005" fill="#FF6600"></path>
<path d="M108.8673,163.0617 L72.5573,126.7507 L72.5573,194.5157 L58.6773,194.5157 L44.7973,194.5157 L18.6233,194.5157 C41.0923,231.3787 81.6743,255.9967 127.9963,255.9967 C174.3183,255.9967 214.9033,231.3787 237.3703,194.5157 L211.1933,194.5157 L186.3673,194.5157 L183.4373,194.5157 L183.4373,126.7507 L147.1263,163.0617 L127.9963,182.1897 L108.8693,163.0617 L108.8673,163.0617 Z" fill="#4C4C4C"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1022 B

51
rss.xml Normal file
View File

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>LandChad.net: Web Guides for Internet Landchads!</title>
<description>Tutorials on minimalist webpage creation and server maintenance.</description>
<language>en-us</language>
<link>https://landchad.net/rss.xml</link>
<atom:link href="https://landchad.net/rss.xml" rel="self" type="application/rss+xml" />
<image>
<title>LandChad.net Web Guides for Internet LandChads</title>
<url>https://landchad.net/pix/chad.gif</url>
<link>https://landchad.net/rss.xml</link>
</image>
<item>
<title>Cryptocurrency Tutorials Completed</title>
<guid>https://landchad.net/index.html#crypto</guid>
<link>https://landchad.net/index.html#crypto</link>
<pubDate> Tue, 29 Jun 2021 08:10:31 -0400</pubDate>
<description><![CDATA[<p>There is now a set of basic tutorials on cryptocurrency wallets and concepts up.
The goal here is to allow people to receive tips for sites using all free and open source and peer-to-peer technology.</p>
<p>More tutorials on crypto management and exchanging may be added later, but these focus simply on basic concepts and setting up wallets. They include:</p>
<ul>
<li><a href="https://landchad.net/crypto.html">The Case for Crypto for Normal People</a></li>
<li><a href="https://landchad.net/bitcoin.html">Accepting Bitcoin</a></li>
<li><a href="https://landchad.net/monero.html">Accepting Monero</a></li>
<li><a href="https://landchad.net/openalias.html">Setting up OpenAlias for your site</a></li>
<li><a href="https://landchad.net/bat.html">Enrolling in the Basic Attention Token project</a></li>
</ul>]]></description>
</item>
<item>
<title>Welcome to LandChad.net!</title>
<guid>https://landchad.net</guid>
<link>https://landchad.net</link>
<pubDate> Mon, 28 Jun 2021 08:21:44 -0400</pubDate>
<description><![CDATA[<p>Welcome to LandChad.net!</p>
<p>This website is for step-by-step tutorials that allow people to host and maintain their own website and other web services on the cheap or free.</p>
<p>There is already a full basic tutorial on website creation on the site <a href="https://landchad.net/index.html#basic">here</a>.
Following the tutorials can take as little as an hour, but will help you set up a VPS, and NginX server and encrypt your new webpage with Certbot.</p>
<p>Next I plan adding general info on HTML and CSS and how to manage a website.</p>
<p>More stuff like running your own email server and more will be added shortly as more articles are finalized.</p>
]]></description>
</item>
</channel>
</rss>

145
server.html Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Get a Server &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Get a Server</h1></header>
<nav></nav>
<main>
<p>
Once you have a <a href=domain.html>domain name</a>, you'll need a server to host all your website files on.
In general, a server is just a computer that is constanly broadcasting some services on the internet.
</p>
<p>
Servers connected to the internet can be extremely useful with or without proper websites attached to them.
You can be your own website, email, file-sharing service and much more.
</p>
<h2>Getting a VPS</h2>
<p>
A Virtual Personal Server (VPS) is a very cheap and easy way to get a
web server. Without you having to buy expensive equipment. There are a
lot of online businesses that have massive server farms with great
internet connection and big power bills that allow you to rent a VPS in
that farm for pocket change.
</p>
<p>
A VPS usually costs $5 a month. Sometimes slightly more, sometimes slightly less.
That's a good price for some internet real-estate, but in truth, you can host a huge number of websites and services on a single VPS, so you get a lot more.
I might have a dozen websites, an email server, a chat server and a file-sharing services on one VPS.
</p>
<p>
The VPS provider that I'll be using for this guide is Vultr, since that is what I use.
Vultr provides a free one-month $100 credit to anyone who starts an account through <a href="https://www.vultr.com/?ref=8384069-6G">this referral link of mine</a>
so you can play around with their servies with impunity.
</p>
<h2>Starting your server in two minutes or less</h2>
<p>
<a href="https://www.vultr.com/?ref=8384069-6G">Start an account on Vultr</a> and let's get started.
</p>
<p>
Vultr (and other VPS providers) usually give you a choice in where and what exactly your VPS is.
</p>
<h4>Server Location</h4>
<p>
In general, it doesn't <em>hugely</em> matter what physical location
you have your server in. You might theoretically want it close to
where you or your audience might be, but if you host a server in
Singapore for an American audience, they won't have to be waiting a
perceptibly longer time to load the site.
</p>
<a href="pix/server-location.png"><img src="pix/server-location.png" alt="Pick your servers's locatio"></a>
<p><strong>Some locations might have different abilities and plans than others.
For example, in Vultr, their New York location has optional DDOS protection and also has some cheaper $3.50 servers.</strong></p>
<h4>Operating System/Server Type</h4>
<a href=pix/server-type.png><img src="pix/server-type.png" alt="server type"></a>
<p>
I especially recommend <strong>Debian 10</strong> for an operating system for your server.
Debian is the "classic" server OS and as such, <strong>I make my guides on this site for Debian 10</strong>.
If you use another OS, just know that your milage may vary in terms of you might need to change some instructions here minorly.
</p>
<h4>Server size</h4>
<a href=pix/server-size.png><img src="pix/server-size.png" alt="server size"></a>
<p>
You finally have a choice in how beefy a server you want.
On Vultr, I recommend getting the cheapest option that is not IPv6 only.
</p>
<p>
Web hosting and even moderately complicated sites do not use huge amounts of RAM or CPU power.
If you start doing more intensive stuff than hosting some webpages and an email server and such,
you can always bump up your plan on Vultr without data loss (it's not so easy to bump down).
</p>
<h4>Additional features</h4>
<a href=pix/server-features.png><img src="pix/server-features.png" alt="additional features"></a>
<p>
On Vultr, there are some final checkboxes you can select additional options.
<strong>You will want to check <em>Enable IPv6</em> and also <em>Block Storage Compatible</em>.</strong>
</p>
<p>
We will be setting up IPv6 because it's important for future-proofing your website as more of the web moves to the IPv6 protocol.
Block storage is the ability (if you want) to later rent large storage disks to connect to your VPS if desired.
You just might want that as an option, so it's worth activating now.
</p>
<h3>Done!</h3>
<p>
Once you select those settings, your server will automatically be deployed.
Momentarily, you will be able to see your server's IP addresses which will be used for the next brief step:
</p>
<span class=next><a href="dns.html">Next: Connect Your Domain and Server</a></span>
<hr>
<h2>More info</h2>
<h3>VPS vs. Self-hosting</h3>
<p>
It is very possible instead of using a VPS, hooking up an old computer to the internet and attempting to host a website from that.
That can be a valid option if you can do it if you have a great internet connection and can do so without draining your power bill.
I don't recommend it because I don't (and can't) do it given my bandwidth needs.
For newbs, there are also some extra steps you have to take care of with DNS and setting up static IPs and such.
</p>
<p>
I might write a guide on this in the future, but I don't do it myself.
</p>
<h3>Backups</h3>
<p>
Vultr and other VPS providers often provide the ability to make backup snapshots of your server in case of dataloss or their own error.
Backups on Vultr are free right now.
When we learn how to use <code>rsync</code>, I will recommend you to also keep your own backup of your site, or at least an offline version of it.
There's a low chance of their whole system collapsing or something, but I say it's a good idea to be hyper-precautious.
</p>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

157
sshkeys.html Normal file
View File

@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Log on with SSH Keys &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Log on with SSH Keys</h1></header>
<nav></nav>
<main>
<p>
Let's generate and use SSH keys on our computer.
This allows us to ensure our identity better than a password ever could.
This allows us to do two main things:
</p>
<ol>
<li><strong>Password-less login</strong>: With SSH keys, we can permanently designate our profile on our local computer as safe for hour server, allowing us to bypass password verification when logging into our server.</li>
<li><strong>Prevent hacking</strong>: Since we no longer need a password to log in, we can simply deactivate password logins on our server altogether, which prevents hacking from people who may be so lucky as to guess our password!</li>
</ol>
<p>
In order words, using an SSH key to login is <strong>both safer, faster and easier</strong>.
</p>
<p>
This is especially better once you start making scripts on your computer that interact with your server.
You can upload files in the background, edit your spam filters or anything else from your local computer without having to input
your password each time you touch the server.
</p>
<h2>Generate an SSH key pair</h2>
<p>
Generating an SSH key is simple. Just run:
</p>
<pre><code>ssh-keygen</code></pre>
<p>
It will prompt you for several options and you can generally chose the default options in each case.
It will ask you to optionally include a password on your SSH key.
I generally recommend against this unless you happen to be using a computer where you don't have root access but someone else does (it does minimize the ease of using an SSH key in our case).
</p>
<h3>What does this SSH key do?</h3>
<p>
Now whenever you use <code>ssh</code> to log into a server, you have the public key of this SSH key pair as your identifier.
You can tell your server to trust this key and it will automatically allow password-less logins from this computer.
</p>
<h3>Backing up your key</h3>
<p>
We will do that momentarily, but first, I recommend you backup your newly generated key if you plan to use it.
If we disable logins to this one key and then lose the key, we might be locked out of our server.
</p>
<p>
I suggest copying your entire <code>~/.ssh/</code> directory (user-specific) to a USB drive and storing it securely.
You may also copy it to the same place on another computer to use the key there.
</p>
<h2>Making your server trust your key.</h2>
<p>
Now that you have an SSH key generate, just run the following:
</p>
<pre><code>ssh-copy-id root@yourdomain.com</code></pre>
<p>
That will ask for your server's root password and will log you in briefly.
What this does is that it puts your public SSH key fingerprint on your server in a file <code>/root/.ssh/authorized_keys</code>.
What this does is that it allows approved SSH keys to login without passwords.
</p>
<aside>
<p>
Note that you can also replace <strong>root</strong> with a username of an account on the server if you had made a non-root user that you'd like to easily log into as well.
For the username <strong>user</strong>, it will also store the key in <code>/home/user/.ssh/authorized_keys</code>.
</p>
</aside>
<p>
To test if this has worked, now try logging in normally to your server with ssh:
</p>
<pre><code>ssh root@yourdomain.com</code></pre>
<p>
It should now let your log in without a password prompt!
</p>
<h2>Disabling Password Logins for Security</h2>
<p>
Once we have authorized ssh keys for all the devices we need, we can actually just disable password logins.
If you've ever looked at your system logs (<code>journalctl -xe</code>) you will find that there are always hundreds of random Chinese computers trying to brute force every server connected to the internet with random passwords.
They usually always are unsuccessful, but let's make it <strong>impossible</strong> for them.
</p>
<p>
Log into your server and open the <code>/etc/ssh/sshd_config</code> file.
Here we can set settings for our SSH daemon that receives SSH requests.
</p>
<p>
Now find, uncomment or create the following three lines and set them all to <strong>no</strong>:
</p>
<pre><code>PasswordAuthentication <strong>no</strong>
ChallengeResponseAuthentication <strong>no</strong>
UsePAM <strong>no</strong></code></pre>
<p>
Once we've done that, we will reload hour SSH daemon:
</p>
<pre><code>systemctl reload sshd</code></pre>
<h3>We're done!</h3>
<p>
Now you can log in quickly and password-less-ly to your server, despite the fact that it is now more secure than ever!
</p>
<p>
With these settings, even if a hacker steals or perfectly guesses an account password, they still cannot log in without an approved SSH key!
</p>
<h2>What if I lose my SSH key?!</h2>
<p>
Firstly, don't do this. Make every precaution that you have a backup.
</p>
<p>
If this does happens, Vultr and most other VPS providers will have one little out.
Log onto their website and select the server you want to log into.
</p>
<img src="pix/ssh-01.png" alt="vultr login">
<p>
In the image above, to the right of your VPS name are a series of icons.
Click on the computer screen-like icon which is the leftmost one.
</p>
<p>
This will open up a browser window emulating a terminal and you can always login with your password here,
since logins here count as being local and they do not use SSH and therefore can indeed validate with your password even if you have disabled it over SSH.
</p>
<p>
From here, simply reverse the settings we set above and you can login via SSH with a password and you can reapprove a newly created SSH key or whatever you want to do.
</p>
<span class=next><a href="<++>">Next:<++></a></span>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

195
style.css Normal file
View File

@ -0,0 +1,195 @@
/* Since this site is about teaching web concepts, even this file is a learning
* opportunity. */
@-webkit-keyframes next {
0% {color: yellow ;}
100% {color: lightblue}
}
.next a {
color: inherit ;
}
.next {
color: red ;
-webkit-animation:next 1s infinite alternate ;
font-size: xx-large ;
text-align: center ;
margin: auto ;
display: block ;
font-weight: bold ;
padding: 1em ;
}
.next:before {
content: "👉" ;
}
body {
color: beige ;
background: #222 ;
}
h1 {
text-align: center ;
color: lightgreen ;
}
header h1 {
font-size: 40px ;
}
h2 {
text-align: center ;
color: deeppink ;
font-variant: small-caps;
font-size: 24pt ;
border-bottom: dashed #ddd 1px ;
max-width: 500px ;
margin: 1em auto ;
}
h3 {
color: gold ;
}
/* "a" is for links. */
a {
color: lightblue ;
}
/* The "hover" option, which can be used with pretty much anything, allows you
* to set different settings if someone hovers over something with their mouse.
* */
a:hover {
color: white ;
}
dt {
font-weight: bold ;
}
/* code and pre are for formatting monospace text commands. Use code generally,
* but pre is for separate code blocks. pre is also sensitive to whitespace,
* unlike most of HTML. */
code {
color: lime ;
border-radius: 5px ;
}
pre {
background: #111222 ;
border: 1px solid lime ;
border-radius: 20px ;
padding: 1em ;
white-space: pre-wrap;
overflow-wrap: break-word ;
max-width: 600px ;
margin: auto ;
}
p img, li img, h1 img, h2 img, h3 img, h4 img {
vertical-align: middle ;
max-width: 1em;
border: none ;
display: inline ;
}
img {
max-width: 90% ;
margin: auto ;
display: block ;
border: solid 5px beige ;
}
strong {
color: orange ;
}
footer {
text-align: center ;
font-variant: small-caps ;
clear: both ;
padding: 2em 0 ;
}
footer li {
display: inline-block ;
padding: 0 .5em ;
font-size: x-large ;
}
footer li:hover {
background: lightblue ;
}
nav { font-size: small ;}
footer { font-size: large ; }
nav ul, footer ul, #taglist {
padding: 0;
}
main {
margin: auto ;
}
/* asides are used for minor tangential notes. I have them shrunk down in
* softer colors in a box with soft corners (border-radius). */
aside {
border: solid 1px black ;
border-radius: 20px ;
padding: 0 1em 0 1em ;
font-size: small ;
}
aside p {
color: gray ;
}
aside code {
color: green ;
}
/* This "@media" block defines rules that will only be applied when the minimum
* width of the screen is 55em or greater. In essence, they are settings that
* only apply on normal weide screens, but *not* phones and low res monitors.
* Since we have more room on widescreens, we change a couple things. */
@media (min-width: 55em) {
aside {
margin: 0 30px 0 30px;
}
.resright, .disappear {
display: block ;
float: right;
padding: 20px ;
clear: both ;
max-height: 400px ;
max-width: 300px ;
}
header { max-width: 900px ; margin: auto;}
main { max-width: 850px ; }
}
.ll { font-size: large ; line-height: 1.3em ; max-width: 600px; margin: auto ; }
/* These settings are for the cryptocurrency donation QR codes and info on the
* main page. */
.qr { max-width: 150px ; padding: 10px; border: none; }
.cryptocontainer {
display: flex ;
flex-wrap: wrap ;
justify-content: center ;
}
.cryptoinfo {
max-width: 350px ;
text-align: center ;
padding-left: 10px ;
padding-right: 10px ;
}
.cryptoinfo code {
font-size: small ;
overflow-wrap: break-word ;
}

20
template.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title><++> &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1><++></h1></header>
<nav></nav>
<main>
<++>
<span class=next><a href="<++>">Next:<++></a></span>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>

189
xmpp.html Normal file
View File

@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>XMPP Server (Prosody) &ndash; LandChad.net</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel='stylesheet' type='text/css' href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>XMPP Server (Prosody)</h1></header>
<nav></nav>
<main>
<p>XMPP is a fantastically simple protocol that's usually used as a messenger.
It's highly extensible,
better than IRC,
lighter and more decentralized and Matrix
and Telegram and normie social media can't hold a candle to it.
</p>
<p>
XMPP is so decentralized and extensible that there are many <em>different</em> XMPP servers.
Here, let's set up an <a href="https://prosody.im/">Prosody</a> XMPP server.
</p>
<h2>Installation</h2>
<p>
Prosody is in the Debian repositories, so we can easily install it on our server with the following command:
</p>
<pre><code>apt install prosody</code></pre>
<h2>Configuration</h2>
<p>
The Prosody configuration file is in <code>/etc/prosody/prosody.cfg.lua</code>.
To set it all up, we will be changing several things.
</p>
<h3>Setting Admins</h3>
<p>
Let's go ahead and set who our admin(s) will be.
Find the line that says <code>admins = { }</code> and to this we can specify one or more server admins.
</p>
<pre><code># To add one admin:
admins = { "chad@landchad.net" }
# We can add more than one by separating them by commas. (This file is written in Lua.)
admins = { "chad@landchad.net", "chadmin@landchad.net" }</code></pre>
<p>
Note that we have not created these accounts yet, we will do this <a href=#user>below</a>.
</p>
<h3>Set the Server URL</h3>
<p>
Find the line <code>VirtualHost "localhost"</code> and replace <code>localhost</code> with your domain.
In our case, we will have <code>VirtualHost "landchad.net"</code>
</p>
<h3>Multi-User Chats</h3>
<p>
Most people will probably want the ability to have chats with more than two users.
This is easily enough to enable.
In the config file, add the following:
</p>
<pre><code>Component "<strong>chat.landchad.xyz</strong>" "muc"
restrict_room_creation = "admin"</code></pre>
<p>
On the first line, you must have a separate subdomain for your multi-user chats.
I use the <code>chat.</code> subdomain, but some use <code>muc.</code>.
Anything if possible.
</p>
<p>
The second line is important because it prevents non-admins from creating and squatting rooms on your server.
The only situation where you might not want that is if you indend to open a general public chat system for people you don't know.
</p>
<aside>
<p>
Read more about the <code>muc</code> plugin on the Prosody documentation page <a href="https://prosody.im/doc/modules/mod_muc">here</a>.
</p>
</aside>
<h3>End-to-end Encryption</h3>
<p>
Importantly, we'll want end-to-end encryption enabled for user privacy.
</p>
<p>
Find the array beginning with <code>modules_enabled</code>.
This includes a list of modules to be used.
Add
<code>"omemo_all_access";</code> to that list.
</p>
<p>
This module is not installed by default,
but you can easily download it by running the following command on the command prompt
to download and install the module to the correcy directory.
</p>
<pre><code style=font-size:x-small>curl -sL https://hg.prosody.im/prosody-modules/raw-file/785389a2d2b3/mod_omemo_all_access/mod_omemo_all_access.lua &gt; /usr/lib/prosody/modules/mod_omemo_all_access.lua</code></pre>
<h3>Other things to check</h3>
<p>Check the config file for other settings you might want to change.
For example, if you want to run a general public XMPP server, you can allow anyone to create an account by changing <code>allow_registration</code> to <code>true</code>.
</p>
<h2>Certificates</h2>
<p>
Obviously, we want to have client-to-server and server-to-server encryption.
Nowadays, use can use Certbot to generate certificates and use a convenient command below <code>prosodyctl</code> to import them.
</p>
<p>
<strong>If you have multi-user chat enabled, be sure to get a certificate for that subdomain as well.</strong>
I usually just create a dummy nginx site for each and run it with the <code>--nginx</code> option.
This makes auto-renewal a little easier.
</p>
<!-- <pre><code>server { -->
<!-- listen 80 ; -->
<!-- listen [::]:80 ; -->
<!-- root /var/www/html; -->
<!-- index index.html index.htm index.nginx-debian.html; -->
<!-- server_name <strong>muc.landchad.net</strong> ; -->
<!-- location / { -->
<!-- try_files $uri $uri/ =404; -->
<!-- } -->
<!-- }</code></pre> -->
<pre><code>certbot --nginx</code></pre>
<p>
Once you have the certificates for encryption, run the following to import them into Prosody.
</p>
<pre><code>prosodyctl --root cert import /etc/letsencrypt/live/</code></pre>
<p>
Note that you might get an error that a certificate has not been found if your <code>muc</code> subdomain and your main domain share a certificate.
It should still work, this is just notifying you that no specific
</p>
<p>
For user privacy, we will definitely want to install and enable encryption with OMEMO.
</p>
<h2 id=user>Creating users/admins manually</h2>
<p>
Let's manually create the admin user we prepared for above.
Note that you can indeed do this in your XMPP client if you have not disabled registration, but this is how it is done on the command line:
</p>
<pre><code>prosodyctl adduser chad@landchad.net</code></pre>
<p>This will prompt you to create a password as well.</p>
<h2>Make changes active</h2>
<p>
With any system service, use <code>systemctl reload</code> or <code>systemctl restart</code> to make the new settings active:
</p>
<pre><code>systemctl reload prosody</code></pre>
</main>
<footer><a href="https://landchad.net">LandChad.net</a></br>Because Everyone should be an Internet LandChad.</br><li><a href="index.html"><img src="pix/chad.gif" alt="chad"></a></li><li><a href="rss.xml"><img src="pix/rss.svg" alt="RSS"></a></li><li><a href="pix/btc.png"><img src="pix/btc.svg" alt="BTC"></a></li><li><a href="pix/xmr.png"><img src="pix/xmr.svg" alt="XMR"></a></li><li><a href="https://github.com/lukesmithxyz/landchad"><img src="pix/git.svg" alt="Github"></a></footer>
</body>
</html>