ben/diyhosting
ben
/
diyhosting
1
0
Fork 1
Code Issues 1 Pull Requests Projects Releases Wiki Activity

cleanup for publication

This commit is contained in:
Luke Smith 2021-06-29 09:50:40 -04:00
parent 825282fea9
commit 342d70ecde
No known key found for this signature in database
GPG Key ID: 4C50B54A911F6252
7 changed files with 110 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
certbot.html
View File

@ -123,7 +123,6 @@ ufw allow 443</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>

93
html.html
View File

@ -49,7 +49,7 @@ Note how this HTML file appears as a webpage:
<table>
<table class=cnp>
<tr>
<td>
<pre><code>&lt;!DOCTYPE html&gt;
@ -70,7 +70,7 @@ multiple lines.
Observe if we add lines to the end of this file:
</p>
<table>
<table class=cnp>
<tr>
<td>
<pre><code>&lt;!DOCTYPE html&gt;
@ -116,7 +116,7 @@ Heading tags are for your page's title and section headings in the document:
</ul>
<table>
<table class=cnp>
<tr>
<td>
<pre><code>&lt;h1&gt;This is a top-level heading.&lt;/h1&gt;
@ -149,69 +149,50 @@ If we use these heading tags, when we clear CSS, we can easily style all <code>&
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>
<h2>Text formatting</h2>
<p>
HTML can also be used to do text formatting.
We can make bold, italic, underlined or struck through text with more HTML tags:
</p>
<table class=cnp>
<tr>
<td>
<pre><code>&lt;p&gt;This is &lt;b&gt;bold text&lt;/b&gt;.&lt;/p&gt;
&lt;p&gt;This is &lt;i&gt;italic text&lt;/i&gt;.&lt;/p&gt;
&lt;p&gt;This is &lt;u&gt;underlined&lt;/u&gt;.&lt;/p&gt;
&lt;p&gt;This is &lt;s&gt;struck through&lt;/s&gt;.&lt;/p&gt;</code></pre>
</td>
<td>
<img src="pix/html2-01.png" alt="formatted text">
</td>
</tr>
</table>
<h2>Semantic Tags</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.
While <code>&lt;b&gt;&lt;/b&gt;</code> and <code>&lt;i&gt;&lt;/i&gt;</code>
do exist, it's actually better <em>not</em> to use them directly in text.
</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!
Try using <code>&lt;strong&gt;&lt;/strong&gt;</code> instead of <code>&lt;b&gt;&lt;/b&gt;</code> and <code>&lt;em&gt;&lt;/em&gt;</code> instead of <code>&lt;i&gt;&lt;/i&gt;</code>.
By default, they will look exactly the same.
You complain that they require more key presses, but it's thought to be a very bad idea to modify lower-level tags with CSS directly.
</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!
Note that some bold words on this site have <strong>different color for emphasis</strong>.
This is a setting set via CSS for all <code>&lt;strong&gt;</code> tags.
It would not be a good idea for us to use this for <code>&lt;b&gt;</code>, since there might be a non-colored situation we want to occasionally use it in.
</p>
<span class=next><a href="html2.html">Next: Text formatting in HTML</a></span>
<span class=next><a href="html2.html">Next: Images and Links 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>

10
html2.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Text formatting in HTML &ndash; LandChad.net</title>
<title>Images and Links 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'>
@ -9,15 +9,13 @@
<link rel='alternate' type='application/rss+xml' title='Land Chad RSS' href='/rss.xml'>
</head>
<body>
<header><h1>Text formatting in HTML</h1></header>
<header><h1>Images and Links in HTML</h1></header>
<nav></nav>
<main>
<h2>Links</h2>
<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.
We need to create links
</p>
<h2>Semantic Tags</h2>
&lt;<++>&gt;
&lt;<++>&gt;
&lt;<++>&gt;

82
index.html
View File

@ -54,7 +54,11 @@
<li><a href="bat.html"><img src="pix/bat.svg">Basic Attention Token (BAT)</a></li>
</ul>
<!-- RSYNC -->
<h3 ol=other>Excellent Extras</h3>
<ul>
<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>
</ul>
<h2>In the Works...</h2>
@ -63,67 +67,40 @@
Subscribe to our <a href="rss.xml"><img src="pix/rss.svg">RSS feed</a> for updates.
</p>
<h3>Editing and Styling Webpages</h3>
<h3>Articles and Tutorials in Progress...</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>
<li>Full HTML tutorial</li>
<li>Full CSS tutorial</li>
<li>Setting up an Email server</li>
<li>Using rsync for websites and servers.</li>
<li>XMPP (federated chat)</li>
<li>Matrix (federated chat)</li>
<li>SearX (search engine)</li>
</ul>
<h3>Excellent Extras</h3>
<h3>On the look out for...</h3>
<p>
There are also many one-off articles on other things you can add to your website.
There are other articles not currently under construction which we would like to add the LandChad.net.
If you have experience with any of these, you may submit an article for review on <a href="https://github.com/lukesmithxyz/landchad">the Github</a>.
Please include directions for Debian 10 as default.
Abstain from using containization.
Attempt to follow the same settings as other articles here.
</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>
<ul>
<li>Cronjobs</li>
<li>IRC servers</li>
<li>Email webclients</li>
<li>NextCloud (file hosting)</li>
<li>Calibre (library server)</li>
<li>Nitter</li>
<li>Pleroma (like Twitter)</li>
<li>PeerTube (like YouTube)</li>
<li>Using ufw as a firewall.</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>
@ -135,7 +112,8 @@
<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>
<li>If you enjoy a guest article, the author's donation links may be included at the bottom of the page.</li>
<li>Donate crypto to the long-term LandChad maintenance and expansion fund:</li>
</ul>
<div class=cryptocontainer>

23
maintenance.html
View File

@ -69,29 +69,6 @@ apt upgrade</code></pre>
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>

BIN
pix/html2-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

69
style.css
View File

@ -1,33 +1,10 @@
/* 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 ;
background: #111 ;
margin-bottom: 200px ;
}
h1 {
@ -44,9 +21,9 @@ h2 {
color: deeppink ;
font-variant: small-caps;
font-size: 24pt ;
border-bottom: dashed #ddd 1px ;
max-width: 500px ;
margin: 1em auto ;
border-bottom: dashed #ddd 1px ;
max-width: 500px ;
margin: 1em auto ;
}
h3 {
@ -66,14 +43,14 @@ a:hover {
}
dt {
font-weight: bold ;
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 ;
color: lime ;
border-radius: 5px ;
}
pre {
@ -149,6 +126,11 @@ aside code {
color: green ;
}
.cnp {
width: 100% ;
}
/* 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.
@ -193,3 +175,30 @@ aside code {
font-size: small ;
overflow-wrap: break-word ;
}
/* The "Next Article" Button changes color and also has a 👉 automatically
* added to its front. */
@-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: "👉" ;
}