Compare commits
No commits in common. 'master' and 'release/0.3.0' have entirely different histories.
master
...
release/0.
@ -1,3 +0,0 @@
|
|||||||
# Ignore files
|
|
||||||
files/
|
|
||||||
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="Oops, something went wrong">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>404!</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Error 404</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<h2>You broke the internet</h2>
|
|
||||||
<p>This page probably doesn't exist, but if it's supposed to a developer will be looking into why it's borked.</p>
|
|
||||||
<p>Use the navigation above, or below to head to somewhere a little more, functional</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">Home</a></li>
|
|
||||||
<li><a href="/guides/guide-to-server-hosting.php">Guide to server hosting</a></li>
|
|
||||||
<li><a href="/projects.html">My projects</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="An introduction to who I am, and what I do.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>About me</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>About me</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<h2>Who are you</h2>
|
|
||||||
<p>I'm Aney, a developer, and self-hoster that enjoys art/design, automation, Unix, and those pesky Japanese cartoons. Yes, that's a straight up rip from the homepage, why re-invent the wheel right?</p>
|
|
||||||
|
|
||||||
<p>I set this website up as a means to share information to educate, and help people, as well as to easily point people to my answers for common questions.</p>
|
|
||||||
|
|
||||||
<h2>What do you do?</h2>
|
|
||||||
<p>I'm currently taking some time away from work, but looking for places I believe I'd be a good fit. I love solving problems, optimising sites, and creating designs/experiences, so I'm kind of a developer at heart.</p>
|
|
||||||
<p>Outside of work I practise minimalism, frugalism (to an extent), and work towards Financial Independance (FI/RE). I also love the idea of OneBagging, self-sufficiency, and travelling, so these are things I'm trying to work towards.</p>
|
|
||||||
|
|
||||||
<h2>What else do you do?</h2>
|
|
||||||
<p>Ok sure, I'm (extremely) slowly working on the basic infrastructure, and website for <a href="https://anetwork.uk" target="_blank" rel="noopener">aNetwork</a>, a gaming community, and public game server host. I'm also working on writing <a href="/guides/">guides</a> on <a href="/guides/guide-to-server-hosting.html">server hosting</a>, and <a href="/guides/web-dev-101.html">web development</a>.</p>
|
|
||||||
<p>If there's ever anything else, you can find out more on my <a href="/projects.html">projects</a> page, or on my <a href="/blog/">blog</a>.</p>
|
|
||||||
|
|
||||||
<h2>What do you own?</h2>
|
|
||||||
<p>Following up on the minimalism, it seem you've almost got to do an "everything I own" to prove you only have 6 items in your possession. I'm not that bad, yet, but I honestly feel like that's like my little hidden goal.</p>
|
|
||||||
<p>I've got a few pages about this on the site, so if you do want to know, check out:</p>
|
|
||||||
<ul>
|
|
||||||
<li>My <a href="/equipment.html">hardware/tech</a></li>
|
|
||||||
<li>My kitchen</li>
|
|
||||||
<li>Living Room and Bedroom</li>
|
|
||||||
<li>Collectables and Sentimental</li>
|
|
||||||
<li>Misc</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Why are you telling me this?</h2>
|
|
||||||
<p>I figured it'd make for an easy introduction for anyone who stumbles across my site.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="Some open thoughts about how this blog may/may not change">
|
|
||||||
<meta name="keywords" content="Blog, articles, thoughts">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Blog Thoughts</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Blog Thoughts</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">I've been having some thoughts about potential changes to the blog, including layouts, moving existing content, and such.</p>
|
|
||||||
|
|
||||||
<h2>Seperate article types?</h2>
|
|
||||||
<p>This was something I thought about when initially adding this blog, "what do I want on the blog". It was a thought due to wanting to add different variations of post, e.g. Traditional Article, Guide/Tutorial, Reviews, Thoughts (think twitter length posts), Recipes, etc. and I wondered how to do them. Did I want to have seperate /guides/, /blog/, /recipes/ sections, or lump them all together?</p>
|
|
||||||
<p>The easiest option was just to lump everything together into /blog/, and then start writing what I wanted to put onto the site, and slowly get some content in. I'm glad I did this as it's tricked my little pea-brain into getting at least some content up, but most of it sits in guide territory, and that makes it more difficult to find my actual articles/thoughts (very few as of now, but eh).</p>
|
|
||||||
<p>I have two trains of though in this matter. Which are: </p>
|
|
||||||
<ul>
|
|
||||||
<li>Migrate content to new categories on the site (/guides/, /blog/, /recipes/)</li>
|
|
||||||
<li>Add tags (like on the <a href="/projects.html">projects</a>, and <a href="/cv.html">CV</a> pages</li>
|
|
||||||
<li>Add tags v.2. By this I mean, potentially change the bullet point colour to match the article types together (in concept I like this)</li>
|
|
||||||
</ul>
|
|
||||||
<p>If I do the former here, I can 301 (into 302 if 100%) the articles to their new locations, but I'm unsure for now, so experimentation is in order.</p>
|
|
||||||
|
|
||||||
<h2>Pagination</h2>
|
|
||||||
<p>I honestly haven't put any thought into this at all, but as the blog page gets slowly filled with article links, I feel it's a little much for one page. If for instance I write 10,000 articles, that's a lot of searching, and more importantly a lot of page size that doesn't need to exist.</p>
|
|
||||||
<p>I am not using a blogging platform, nor a server-side language, or even a framework like <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> currently, each page is entirely hand-written, so pagination will be a pain in the backside. For this reason it's on this list, as I need to figure out a decent way to do it, with it nightmare to do, and keep up to date.</p>
|
|
||||||
|
|
||||||
<h2>Featured/Pinned</h2>
|
|
||||||
<p>A short thought. I could simply leave the pinned articles as-is, with a few articles in a seperate list without styling, or I could style them a little.</p>
|
|
||||||
<p>If the styling option is gone for, it'd be nothing hugely fancy, probably just 3 boxes with the title, and maybe even a background colour. I'm not sure how I feel about it though, as adding ~100 bytes or so to the CSS is unneeded, and the styling could posiblity redact from the rest of the blog page.</p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="Burger menu, who dis? I've added a burger menu to the site, and figured I'd write a piece about it as it's currently the only 'advanced' piece of funtionality that exists here.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Hello, Burger menu!</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Hello, Burger menu!</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">On Friday 18th of November 2022, I released version 0.8.0 of this website. With that a large, and very noticable change occured. The addition of a burger menu.</p>
|
|
||||||
|
|
||||||
<h2>What is a burger menu?</h2>
|
|
||||||
<p>A burger menu is simply a type of navigational menu. It's typically hidden by default with just a visible icon, but when (the icon is) clicked the navigational content becomes visible, and accessible.</p>
|
|
||||||
<h3>Why is it called a burger menu?</h3>
|
|
||||||
<p>The name burger/hamburger comes from the appearance of the icon. It consists of 3 horizontal lines, ordered vertically, so at a glance it sort of looks like the top of a bun, a patty, and the bottom of a bun.</p>
|
|
||||||
|
|
||||||
<h2>Why add a burger menu?</h2>
|
|
||||||
<p>Simple, I wasn't a fan of how the site showed the navigational menu on mobiles. I felt it took up too much of the screen real estate, and the requirement for some users to scroll down to get to the content is terrible design. With the implimentation of the burger menu I believe the site looks much cleaner, with a better user-experience on mobiles. So an overall great success, all without losing any navigational control.</p>
|
|
||||||
|
|
||||||
<h2>CSS only</h2>
|
|
||||||
<p>Unlike many of the burger menus you'll spot in the wild, the burger menu on my site is written with pure CSS. It makes use of a checkbox input for toggling, so those of you with Javascript disabled can still benefit from the better user experience.</p>
|
|
||||||
<p>The only downside to this is in the case that CSS doesn't load, as there will be a random visible checkbox atop of the navigation.</p>
|
|
||||||
|
|
||||||
<h2>What? I don't see it?</h2>
|
|
||||||
<p>This could be one of two reasons, your browser isn't small enough (try resizing it), or you've got the old CSS cached. If you've got the old CSS you'll notice the random checkbox I mentioned, try hitting CTRL+F5 to perform a hard-reload.</p>
|
|
||||||
|
|
||||||
<h2>Inspiration</h2>
|
|
||||||
<p>Like many things, I started by googling similar implementations, and found this <a href="https://codepen.io/alvarotrigo/pen/MWEJEWG" target="_blank" rel="noopener">snippet by Alvaro</a>. I used this as the starting point, stripping it down, and making my own changes to make it work for my site in a way I liked.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A collection of typically tech related articles, authored by Aney.">
|
|
||||||
<meta name="keywords" content="Blog, articles, news">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Aney's Blog</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Aney's Blog</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>You may be looking for my <a href="/guides/">guides</a>, or <a href="/recipes/">recipes</a>.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
|
|
||||||
<h2>2022</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/blog/release-0.9.0.html">Release 0.9.0</a> - 21/02/2023</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>2022</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/blog/burger-menu.html">Hello, Burger menu!</a> - 21/11/2022</li>
|
|
||||||
<li><a href="/blog/reducing-homelab.html">Reducing my Homelab</a> - 26/09/2022</li>
|
|
||||||
<li><a href="/blog/blog-thoughts-220822.html">Blog Thoughts (Layout/Articles)</a> - 22/08/2022</li>
|
|
||||||
<li><a href="/blog/my-steamdeck-arrived.html">My SteamDeck Arrived!</a> - 22/08/2022</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>2021</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/blog/ive-started-a-blog.html">I've started a blog</a> - 20/11/2021</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A new step for aney.co.uk, there's now a blog.">
|
|
||||||
<meta name="keywords" content="Blog, articles, news">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>I've started a blog</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>I've started a blog</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>To preface, I am not an author. In fact my skill with the pen was much more proficient when I was a youngling, but alas I have returned to write.</p>
|
|
||||||
<h2>Why?</h2>
|
|
||||||
<p>There are many reasons, although I don't believe there even needs to be one. If you want to blog, blog!</p>
|
|
||||||
<h3>To improve my writing skills</h3>
|
|
||||||
<p>I'd love to get back into writing. The ability to convey, and pass information to others is a valuable skill that I very much wish to posses. If I'm able to help another understand, learn, or just discover something, I see this as a massive benefit.</p>
|
|
||||||
<h3>Gain a better understanding of the blogosphere</h3>
|
|
||||||
<p>What goes on behind the scenes for blogs? How do people network? How can you tell you're doing a good job? I could easily find these through research (and likely another person's blog), however I want to learn the answer to these, and more first hand.</p>
|
|
||||||
<h3>Learn SEO, and keyword research</h3>
|
|
||||||
<p>I want to help others get on, and use the web with a good chance to find, or have likeminded people find them. SEO, and keywords are a large factor in this, as a good portion of the web is now found through search engines.</p>
|
|
||||||
<h3>Get an alternate income stream</h3>
|
|
||||||
<p>The least likely of the bunch, but if I could pocket even a little from this blog, I'd be a happy chap.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="After many moons, it has arrived. My SteamDeck is within my hands, a glorious day">
|
|
||||||
<meta name="keywords" content="Blog, articles, template">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>My SteamDeck Arrived!</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>My SteamDeck Arrived!</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">The title does not decieve you, my SteamDeck has in fact arrived! Well actually it arrived on the 15th of August, and I've been using it since.</p>
|
|
||||||
|
|
||||||
<h2>Why order the SteamDeck?</h2>
|
|
||||||
<p>I liked the concept, I loved that Valve opted for, and have aided in the development of the Linux kernel (notably for gaming), I wanted to untether from my desktop PC, and I wanted to emulate handheld games on a, well, a handheld.</p>
|
|
||||||
<p>I also figured buying this device puts a little money in Valve's pocket, and shows that there's a want, for both Valve, and other game developers.</p>
|
|
||||||
|
|
||||||
<h2>Which did I order?</h2>
|
|
||||||
<p>I ordered the 256GB model (the middle tier), as I figured Valve made nothing on the model before, and I couldn't justify to myself (at the time) the model after.</p>
|
|
||||||
|
|
||||||
<h2>How long did it take to get?</h2>
|
|
||||||
<p>It took a bit over a year for me to recieve my order email (check Steam for your estimated dates though!). I ordered on the 16th of July (2021) after much hesitation, and got the email on the 8th of August (2022), but after the order was placed, it was around a week for it to get delivered to my house. It did take a little over a week for me to receive it though, as I missed the Friday delivery due to being at work, and had to take the day off on Monday, to ensure I recieved it next working day.</p>
|
|
||||||
|
|
||||||
<h2>Worth?</h2>
|
|
||||||
<p>I've only been using it for around a week, but it has been my daily driver so I can give a current thought which is <strong>yes</strong>.</p>
|
|
||||||
<p>Using it in both gaming mode, and desktop mode (with external peripherals) has been great, and if you enjoy handhelds I wholely recommend grabbing one once they're more readily available.</p>
|
|
||||||
<p>With my thought on its worth (strongly worth), I've still written this article unbiased, with any qualms I have with entire honesty, because I cannot stand when people lie about products they like</p>
|
|
||||||
|
|
||||||
<h2>Desktop Mode</h2>
|
|
||||||
<p>Desktop mode with peripherals works as any Arch desktop would, there are a few hoops to jump through on first use, but after that it's a neat PC. Most of my desktop use is gaming with friends on Discord, or SSHing into servers to work on them, and the SteamDeck does them both.</p>
|
|
||||||
<h3>Problems</h3>
|
|
||||||
<p>Sometimes when tabbing between programs, and more often when new media starts to play, my audio will stop, which is annoying as I need to use volume controls to change back to the correct device each time this occurs. It's probably an issue with Pulseaudio itself, but none-the-less it's annoying.</p>
|
|
||||||
<p>Maybe not a problem, as many laptops are heading this way, but I needed to buy an adapter (USB-C splitter) to plug in my USB-As, HDMI, Ethernet, etc.</p>
|
|
||||||
|
|
||||||
<h2>Gaming Mode</h2>
|
|
||||||
<p>This is how most of my time with the SteamDeck has been spent. I've played a bunch of Hades, some (emulated) Pokémon Legends Arceus, Minecraft, and tried some mid 2010 AAAs. Within this short stint, it's been a fantastic experience, the screen's splendid indoors, audio is great (for a non-audiophile like me at least), and the controls feel balanced, and responsive, can't ask for much else.</p>
|
|
||||||
<h3>Problems</h3>
|
|
||||||
<p>I feel like there's room for improvement with the Steam GUI, such as hotkeys to get to the top bar, etc. but I'm a tiling window manager guy, so of course I want the efficiency of hotkeys.</p>
|
|
||||||
<p>After a few hours of play, I get some pain in my right arm, and thumb, although if you don't have RSI already, this likely won't affect you.</p>
|
|
||||||
<p>The screen is very reflective on my model, and is annoying to use outside. I went for a walk while playing Pokémon, and even at full brightness I couldn't see the gameplay very well whilst in the sunlight.</p>
|
|
||||||
<p>My joysticks make a very quiet clicking noise when I tap them upwards, which most people probably don't notice, but unfortunately I do. Thankfully with the speakers on it's non-noticable.</p>
|
|
||||||
<p>Battery life is a bit lacking for me, with ~2-5 hours or so depending on the games played (even with GPU clocked down). I knew what I was getting into, but still hope the next iteration has a lil' more juice.</p>
|
|
||||||
|
|
||||||
<h2>Any Regrets?</h2>
|
|
||||||
<p>Actually yes, I regret not purchasing the 512GB model with the reflective screen. As mentioned I've tried using the device outside, and the reflection is annoying (could just be the 'tism), but not entirely unusable especially at higher brightnesses (and definitely usable outside of sunlight). I'll likely purchase a screen protector to try to fix this problem.</p>
|
|
||||||
<p>I've also noticed that I've used a lot of storage already, and the extra 256GB from the SSD would have been majorly useful (especially since I may well have installed some larger, 100GB+ titles if I had it). This can be solved with a larger SD card, or by switching the SSD, but it'd have been nice to have from the start.</p>
|
|
||||||
<p>Not a regret per se, but something I've spotted. In this ~week of usage my battery health has dropped from 100% to 96%. It may be a calculation issue, but still that's spooky, and I don't like that it's already gone down. I'm going to get a 20k mAh battery pack to allow me to use it during travel, etc.</p>
|
|
||||||
|
|
||||||
<h2>Last thoughts</h2>
|
|
||||||
<p>Yea, the SteamDeck's pretty good. I'll be investing in a reflective screen protector, and a powerbank to hopefully cover up its flaws, but besides that it's definitely worth the buy so far.<p>
|
|
||||||
<p>If you don't own a PC, this is a good starting point, as it's an affordable in, and unlike traditional PC gaming, you don't need to sit at a desk the whole time!</p>
|
|
||||||
<p>I'm looking forwards to some LAN-esk ventures with the 'Deck, and if a new version is announced in the next couple years, I'll definitely be hopping onto that pre-order queue.</p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,113 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="I've taken down my homelab during the energy crisis in the UK, and have mitigated the loss of this by migrating services to alernate locations, and low power hardware.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Reducing my Homelab</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Reducing my Homelab</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>Homelabbing, and with it self-hosting, has been a great exploration into server maintance, dabbling with new technologies, and has overall (sometimes it's been a hassle, but it comes with the territory) been an enjoyable little hobby.</p>
|
|
||||||
<p>As the title implies, however, I have reduced the amount of services, and horsepower in my homelab, at least for the time being, starting from 24/09/2022.</p>
|
|
||||||
|
|
||||||
<h2>Why?</h2>
|
|
||||||
<h3>Energy costs a lot now</h3>
|
|
||||||
<p>With the increase of gas/electric prices many households (including my own), have been looking at ways of reducing their bills, especially with Winter approaching, and the knowledge that there will be more usage in the coming months.</p>
|
|
||||||
<p>Couple this with the already inflated cost-of-living, this is making it less, and less sustainable for me to run devices 24/7, as I cannot justify the expenditure.</p>
|
|
||||||
<h3>I want to go nomadic</h3>
|
|
||||||
<p>Looking on the brighter-side, a big thing in my mind at the moment, is wanting to travel around one-bagging for as long a period as I can. So paring down my belongings is already something I'm doing, as ideally I only own what I need, and what can be easily stored for when I get back into renting a place. Storing multiple PCs is much harder than a couple of Raspberry Pis.</p>
|
|
||||||
<h3>Reliability of my public services is iffy</h3>
|
|
||||||
<p>With my in-home self-hosting there were always a couple of pitfalls, but I was happy to deal with these.</p>
|
|
||||||
<p>First, my IP isn't static, so when the ISP decides it's time for a new IP, boom. I've then got to change my DNS settings for my domains to keep things up.</p>
|
|
||||||
<p>Second, it's not a fantastic connection as-is. I will randomly get hit by blips of no internet throughout the day, which takes the services offline for however-long, sometimes multiple times a day.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<h2>What does this actually entail?</h2>
|
|
||||||
|
|
||||||
<p>I've taken lilman, my last remaining server, out-of-comission for the time being (just after upgrading to 32GB RAM...), and have popped two RPIs in my shed in it's stead to cover my in-home needs for hosted services. I've also migrated services that are exposed to the web to the VPSs I already owned, and I'm also looking at Oracle's Always Free tier to migrate some of my game servers to (although credit card validation is playing with me).</p>
|
|
||||||
|
|
||||||
<h2>What's happened with services?</h2>
|
|
||||||
<p>So you may be wondering what's to happen with the services I was previously self-hosting at home. Some things, such as virtualisation, and any testing environments have been taken away, but for others they've been migrated around.</p>
|
|
||||||
|
|
||||||
<h3>In-home</h3>
|
|
||||||
<p>Of course there are some things that I want/need to keep at home, these services primarily come down to those that deal with files, and don't require internet access, however there are some outliers to this rule.</p>
|
|
||||||
|
|
||||||
<h4>NAS (OMV)</h4>
|
|
||||||
<p>To maintain access to my files needed to work, my ISOs, my media collection, etc. I've setup a RPI3B+ (nasberrypi) as a NAS, connected to my 4TB HDD via an externally powered SATA hub. This is the only real "essential", as I can access these files on a laptop, and easily watch, edit, etc.</p>
|
|
||||||
<h4>VPN</h4>
|
|
||||||
<p>If I want to access my services, and namely my NAS from outside of my network, I need a VPN. This is on the RPI3B+, as the only thing alongside the NAS in case I opt to just maintain the NAS.</p>
|
|
||||||
<h4><s>Jellyfin</s></h4>
|
|
||||||
<p><s>I watch media, and Jellyfin was the best option I found quite a while back. I've read it works well on RPIs, so I'm giving it a go on a seperate RPI3B (mediapi). So far though, it's not performing very well, but I'll struggle with it for the time being.</s></p>
|
|
||||||
<h4><s>Adguard</s></h4>
|
|
||||||
<p><s>Whilst I still have an internet connection, I'd like to keep blocking wanky ads. This is on the 3B.</s></p>
|
|
||||||
<h4><s>Nginx</s></h4>
|
|
||||||
<p><s>Not for websites, but for the proxy-pass functionality, so that I can safely share my Jellyfin, etc. instances over the web. On the 3B.</s></p>
|
|
||||||
<h4><s>AirSonic (New)</s></h4>
|
|
||||||
<p><s>Trying out AirSonic, as I'd like to play my own music when, and wherever, whilst having the actual files stored in case of no interwebs. On the 3B.</s></p>
|
|
||||||
<h4>OSMC (instead of Jellyfin)</h4>
|
|
||||||
<p>My second Pi will likely just be an OSMC box, with media mounted from the NAS, as it seems like the best way to get anything to work. I don't really need to stream to my laptop/phone, just using the TV in the living room seems a better option for an intential lifestyle. Although, I do still want to see about music streaming.</p>
|
|
||||||
|
|
||||||
<h3>VPSed</h3>
|
|
||||||
<p>The services I've migrated to my already exisitng VPSes (to go along with what they already hosted), are those which are internet accessed, and need additional reliability.</p>
|
|
||||||
|
|
||||||
<h4>Webserver</h4>
|
|
||||||
<p>I've migrated <a href="https://aney.co.uk" target="_blank" rel="noopener">aney.co.uk</a> and <a href="https://anetwork.uk" target="_blank" rel="noopener">anetwork.uk</a> to my American VPS that hosts my node applications, obviously this makes my sites slower (in the UK), but I'll take what I can get for now, and maybe get a new UK based VPS in the future.</p>
|
|
||||||
<h4>Git</h4>
|
|
||||||
<p>Git has been migrated to my off-site backup server. The logic behind this is that I'll have my repos checked-out, and with more up to date code than on the server, so this is alright. The performance difference here isn't noticable to me currently, which is nice.</p>
|
|
||||||
|
|
||||||
<h3>Oracle VM (Maybe)</h3>
|
|
||||||
<p>As I stated, this still isn't a guarantee, but if I opt to get game servers back online, the Oracle always free tier will be my first option. Who knows, when you're reading this I could have <a href="https://anetwork.uk" target="_blank" rel="noopener">aNetwork</a> entirely running on an Oracle VM instead of offline, like it is without lilman.</p>
|
|
||||||
|
|
||||||
<h2>Possible Changes</h2>
|
|
||||||
|
|
||||||
<p>Two come to mind right at the beginning of this "experiment".</p>
|
|
||||||
<ol>
|
|
||||||
<li>Putting lilman back in the driver seat. I've moved some services off of the device, but for my media consumption the 3B isn't cutting it. With this, getting lilman set back up is probably the idea, either that or setting up a thinkpad as a server that's not always on.</li>
|
|
||||||
<li>Just having a NAS. I may just keep the 3B+ as a NAS, and set the other Pi up as a client, with OSMC. This way I can mount the files, and watch them on the TV. A little annoying that I won't be able to stream from laptops/phones, but it could be better like that anyway. This has been opted for currently.</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<p>If I remember to do so, I'll make a new post, or some edits to this, in regards to how this downsizing is going, and if it's overall a positive, or negative experience.</p>
|
|
||||||
|
|
||||||
<h2>Will you go back to hosting at home?</h2>
|
|
||||||
|
|
||||||
<p>Yes (most probably, I could find I love the low-end setup though), assuming one of two things.</p>
|
|
||||||
<ol>
|
|
||||||
<li>That energy gets decoupled from gas prices, and/or gets reduced to a non-stupid amount, so that I can keep multiple servers running without breaking bank.</li>
|
|
||||||
<li>I can build a super efficient lab, probably with "mobile" hardware, and a little additional undervolting. This one is also a lead into wanting to be more self-sufficient, so it'd ideally pair with solar panels, etc. to keep the lab going.</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="green">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Release 0.9.0</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Release 0.9.0</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<h2>Accessibility and Design</h2>
|
|
||||||
<p>Release 0.9.0 was a non-functionality release, as I focussed my lil' brain on Accessibility, the User Experience (UX), and the design of the website. Also this is my first publicised "patch note" so go easy, ok.</p>
|
|
||||||
|
|
||||||
<h2>Accessiblity</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Fix burger menu's accessiblity issues
|
|
||||||
<ul>
|
|
||||||
<li>Add label content, but make hidden for non screen-readers.</li>
|
|
||||||
<li>Make top of burger clickable. The burger wasn't fitting to its elements container, as a negative margin was used.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>Add "Skip nav" functionality
|
|
||||||
<ul>
|
|
||||||
<li>Added a hidden button for keyboard tab-targetting that skips over the navigation, straight to the content.</li>
|
|
||||||
</ul></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>User Experience</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Styled <code><code></code> tags
|
|
||||||
<ul>
|
|
||||||
<li>So they can be used in-line to aid with any development guides.</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Make mobile nav/burger fixed
|
|
||||||
<ul>
|
|
||||||
<li>This allows the navigation to be opened/closed and visible from anywhere on the page, not just the top.</li>
|
|
||||||
</ul>
|
|
||||||
</li></ul>
|
|
||||||
|
|
||||||
<h2>Design/User Interface</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Font<ul>
|
|
||||||
<li>Increase the font-size.</li>
|
|
||||||
<li>Increase the whitespace used around the site.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>Colours<ul>
|
|
||||||
<li>Altered colours to improve the visual hierarchy of the elements.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>Remove hr above navigation<ul>
|
|
||||||
<li>Due to the nav now being atop the page, this wasn't needed to seperate the content.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>Restyle mobile nav<ul>
|
|
||||||
<li>Instead of having the nav just pop-up atop the page, it now displays as a sidebar.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>Add background and border to burger<ul>
|
|
||||||
<li>As it's not fixed it needed to be visually differentiated from content.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>Scrollable table<ul>
|
|
||||||
<li>Super basic overflow-x on a parent of table so tables fit on screen, but all content can still be accessed.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>Add <code>&nbsp;</code> to tags<ul>
|
|
||||||
<li>Multiple word tags were breaking, and looked pretty bad, so made them non-breakable.</li>
|
|
||||||
</ul></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Dev</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Colour simplification<ul>
|
|
||||||
<li>I changed the colours to all be 3 digit HEX values, saving a few bytes for the CSS.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>Add test.html page<ul>
|
|
||||||
<li>For <a href="/test.html">testing elements</a> without navigating through the site, it's public too because why not.</li>
|
|
||||||
<li>Side note: This got me thinking about writing a lil' CSS framework.</li>
|
|
||||||
</ul></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Known Issues</h2>
|
|
||||||
<ul>
|
|
||||||
<li>When the burger menu is active, the page is still scrollable<ul>
|
|
||||||
<li>Easily fixed with JS (and a basic overflow), however I want to stay away from JS as much as possible. I believe the approach I took is the best-case scenario, as users at least know if they're scrolling with the sidebar styled nav.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>Burger nav animation<ul>
|
|
||||||
<li>Changes to clickable area of burger icon meant the animation needed tweaking, and it looks worse. It's not really important though.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>h1 in nav<ul>
|
|
||||||
<li>I was contemplating moving this into the main, but have yet to do so. Not sure if this is technically an issue, but will need to look into it.</li>
|
|
||||||
</ul></li>
|
|
||||||
<li>Scrollable table<ul>
|
|
||||||
<li>I'd like a better solution than this, preferably one that doesn't require an additional element.</li>
|
|
||||||
</ul></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Final words</h2>
|
|
||||||
<p>This release should offer better accesibility, and a nicer look and feel all around.</p>
|
|
||||||
<p>All changes were made as semantic as possible, and the site has been kept accessible, and usable for those not running CSS/JS at all (for instance terminal browsers, and neo-luddites with everything disabled).</p>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
Binary file not shown.
@ -1 +0,0 @@
|
|||||||
google-site-verification: google8a330c8201b08f7e.html
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="To avoid using an IP, this guide will help you point your domain name at your server.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Link your domain name to your server</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Link your domain name to your server</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">To avoid needing to remember an IP, this guide will help to link your domain name to your server. It assumes you have already <a href="/guides/get-a-domain-name">attained a domain name</a>.</p>
|
|
||||||
|
|
||||||
<h2>Login to your domain name registrar</h2>
|
|
||||||
<p>Login to the registrar, and select the domain name you want to point at your server.</p>
|
|
||||||
|
|
||||||
<h2>Find the section for DNS</h2>
|
|
||||||
<p>The domain name should have a section named, "DNS", "Custom DNS records", or something similar to this. Find, and open it, there should be a bunch of boxes and an option to add a new record.</p>
|
|
||||||
|
|
||||||
<h2>Add the A record</h2>
|
|
||||||
<p>Find the box that allows you to "Add a new record" and input the below, changing <IP> and <DOMAIN> with your IP address, and domain name.</p>
|
|
||||||
|
|
||||||
<pre><code><DOMAIN> A 86400 <IP></code></pre>
|
|
||||||
|
|
||||||
<h2>Wait for propagation</h2>
|
|
||||||
<p>Now there's a bit of a waiting game, as you need to wait for the new DNS record to propagate (get updated) for all nameservers. This can be anywhere from instantly to 72 hours, but typically takes an hour or two.</p>
|
|
||||||
|
|
||||||
<h3>Check your domain has propagated</h3>
|
|
||||||
<p>Pinging the domain name will let you know when the IP has propagated, as when the ping command shows your IP, you're all set.</p>
|
|
||||||
|
|
||||||
<pre><code>ping -c 3 domainname.com</code></pre>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, guide, php, nginx">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Adding PHP to NGINX server</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Adding PHP to NGINX server</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">PHP is one of the highest used programming languages for websites, and it allows you to add practically any functionality you'd ever want to your sites.</p>
|
|
||||||
|
|
||||||
<h2>Install</h2>
|
|
||||||
<pre><code>sudo apt install php-fpm</code></pre>
|
|
||||||
<p>If you want to work with mysql, then you also need to install <strong>php-mysql</strong>.
|
|
||||||
|
|
||||||
<h2>Add to Website's NGINX conf</h2>
|
|
||||||
<p>For each website you want to use php, you'll need to edit the config file.</p>
|
|
||||||
<pre><code>sudo vim /etc/nginx/sites-available/<WEBSITE></code></pre>
|
|
||||||
<p>The following code needs adding within the <strong>server</strong> block.</p>
|
|
||||||
<pre><code>location ~ \.php$ {
|
|
||||||
include snippets/fastcgi-php.conf;
|
|
||||||
fastcgi_pass unix:/run/php/php<VERSION>-fpm.sock;
|
|
||||||
}</pre></code>
|
|
||||||
<p>This will use nginx's fastcgi-php.conf snippet which is more secure by default than many other php/nginx configs because it 404s if the requested file doesn't exist. Read Neal Poole's <q><a href="https://nealpoole.com/blog/2011/04/setting-up-php-fastcgi-and-nginx-dont-trust-the-tutorials-check-your-configuration/" target="_blank" rel="noopener">Don't trust the tutorials</a></q> for more info.</p>
|
|
||||||
|
|
||||||
<h2>Reload NGINX</h2>
|
|
||||||
<pre><code>sudo systemctl reload nginx</code></pre>
|
|
||||||
|
|
||||||
<h2>Test it works</h2>
|
|
||||||
<p>Create a PHP file e.g. <strong>filename.php</strong> in the website's directory, and add the snippet below into it.</p>
|
|
||||||
<pre><code><?php phpinfo(); ?></code></pre>
|
|
||||||
<p>Go to that webpage in your browser e.g. <strong>domain.co.uk/filename.php</strong>, and if php is working you should see a dump of your PHP's version, headers, etc.</p>
|
|
||||||
|
|
||||||
<h2>Make nginx use index.php as homepage/root</h2>
|
|
||||||
<p>Now we'll set nginx to load up index.php as the root of the website, if it exists. Open the site's config with an editor.</p>
|
|
||||||
<pre><code>vim /etc/nginx/sites-available/<WEBSITE></code></pre>
|
|
||||||
<p>Change the index line to read as below. This will then tell the server to load index.php, and if it doesn't exists, load index.html in its stead.</p>
|
|
||||||
<pre><code>index index.php index.html</code></pre>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a>.</p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,88 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, guide, mysql, mariadb, database">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Adminer Setup</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Adminer Setup</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>Adminer is a simple front-end for your database server that can be access through the browser</p>
|
|
||||||
<h2>Pre-Requirements</h2>
|
|
||||||
<p>To run adminer, you'll need a webserver with php set up. Thankfully I'm a great guy, and have written about these topics before.</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/guides/nginx-install.html">Nginx Webserver Setup</a></li>
|
|
||||||
<li><a href="/guides/add-php-to-nginx.html">PHP setup for NGINX</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Download the latest release</h2>
|
|
||||||
<p>This will download the latest release to your default web directory, this can be changed, by altering the path following <strong>-O</strong>.</p>
|
|
||||||
<pre><code>wget "http://www.adminer.org/latest.php" -O /var/www/html/adminer.php</code></pre>
|
|
||||||
|
|
||||||
<h2>Set permissions for your web server</h2>
|
|
||||||
<pre><code>chown -R www-data:www-data /var/www/html/adminer.php
|
|
||||||
chmod 755 /var/www/html/adminer.php</code></pre>
|
|
||||||
|
|
||||||
<h2>Access it</h2>
|
|
||||||
<p>Head to your <strong><WEBSITE/IP>/adminer.php</strong>, and you should load into the adminer login. Using your mysql/mariaDB credentials, you can then login, and use the GUI to manage your database(s)</p>
|
|
||||||
|
|
||||||
<h2>Make it a directory, not a file</h2>
|
|
||||||
<p>Instead of accessing <strong>/adminer.php?<ARGUMENTS></strong>, we can make it look like <strong>/adminer/<ARGUMENTS></strong></p>
|
|
||||||
<pre><code>location /adminer/ {
|
|
||||||
root /var/www/html ;
|
|
||||||
try_files $uri $uri/ /adminer/index.php/$is_args$args ;
|
|
||||||
}</code></pre>
|
|
||||||
|
|
||||||
<h2>Password Protect</h2>
|
|
||||||
<p>An additional level of security, just in case. Using Htaccess, any file, or directory can be password protected</p>
|
|
||||||
<pre><code>sudo apt install apache2-utils
|
|
||||||
htpasswd -c /home/<USER>/.htpasswd admin</code></pre>
|
|
||||||
|
|
||||||
<h3>Add to location</h3>
|
|
||||||
<p>Add the location of the auth file to the adminer location block</p>
|
|
||||||
<pre><code>auth_basic "Adminer" ;
|
|
||||||
auth_basic_user_file /home/<USER/>.htpasswd ;</code></pre>
|
|
||||||
<p>They block should look like below</p>
|
|
||||||
<pre><code>location /adminer/ {
|
|
||||||
auth_basic "Adminer" ;
|
|
||||||
auth_basic_user_file /home/<USER>/.htpasswd ;
|
|
||||||
root /var/www/html ;
|
|
||||||
try_files $uri $uri/ /adminer/index.php/$is_args$args ;
|
|
||||||
}</code></pre>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, guide, mysql, mariadb, database">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Backup MySQL/MariaDB</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Backup MySQL/MariaDB</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>A database if a huge part of many projects, services, and servers. If something goes wrong, data is wrongly updated/deleted there could be many problems. Thankfully we can make backups to make sure our data is safe.</p>
|
|
||||||
<h2>Manual Backup of a DB</h2>
|
|
||||||
|
|
||||||
<h2>Backup all DBs</h2>
|
|
||||||
<p>This follows on from the manual backup, so assumes you have the backup directory created</p>
|
|
||||||
<h2>Automate hourly backups</h2>
|
|
||||||
|
|
||||||
<h2>My backup script</h2>
|
|
||||||
<p>I follow the 3-2-1 backup approach, so I want to keep the files in multiple locations</p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,116 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="Backups are fantastic, and can save hours upon hours of work if they're done. So we want to make sure they're done, and PCs are good with that, with automation.">
|
|
||||||
<meta name="keywords" content="Blog, articles, template">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Automating Backups with Cronjobs</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Automating Backups with Cronjobs</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">Backups are wonderful things that save hours upon hours of work, and stress, so long as they're actually made in the first place!</p>
|
|
||||||
<p>Automatically taking backups allows for peace of mind that your work won't be lost forever whilst you go about your normal workflow..</p>
|
|
||||||
|
|
||||||
<h2>Create a backup script</h2>
|
|
||||||
<p>You can just call rsync, etc. in cron, but I recommend making a backup script (or a few) for each specific type of backup you want to make.</p>
|
|
||||||
<p>Create the file where-ever you want to keep them, for the sake of this, it'll be a scripts directory in your home directory</p>
|
|
||||||
<pre><code>vim ~/scripts/backup_script.sh</code></pre>
|
|
||||||
<p>And add whatever your backup scripts wants to do. If you've no idea, check out my <a href="/guides/backup-with-rsync.html" target="_blank">rsync</a>, and <a href="/guides/backup-with-rdiff.html" target="_blank">rdiff</a> articles first.</p>
|
|
||||||
<pre><code>rdiff-backup $DIRECTORY_TO_BACKUP $DIRECTORY_TO_BACKUP_TO
|
|
||||||
rdiff-backup --force --remove-older-than 2W $DIRECTORY_TO_BACKUP_TO</code></pre>
|
|
||||||
<p>The above example will backup a directory, and remove any changes from 2 weeks ago.</p>
|
|
||||||
<p>Now make the script executable</p>
|
|
||||||
<pre><code>chmod +x ~/scripts/backup_script.sh</code></pre>
|
|
||||||
|
|
||||||
<h2>Add a cronjob</h2>
|
|
||||||
<p>Now for the automation part. Using cron we can set this script to run at many time variations. I recommend <a href="https://crontab.guru/" target="_blank" rel="noopener">crontab guru</a> to learn more about the expressions used for cron.</p>
|
|
||||||
<p>Edit the cron table (crontab)</p>
|
|
||||||
<pre><code>crontab -e</code></pre>
|
|
||||||
<p>And add the following</p>
|
|
||||||
<pre><code>* */2 * * * /home/$USERNAME/scripts/backup_script.sh</code></pre>
|
|
||||||
<p>This will run the backup script every 2 hours, every day</p>
|
|
||||||
|
|
||||||
<h2>An advanced backup script</h2>
|
|
||||||
<p>An advantage of using a script for backups, is that it allows for more intricate functionality, you may not need to use this functionality, but it's greatly useful.</p>
|
|
||||||
<p>The script below is something I wrote to backup my home directories for each of my servers. It's used to make hourly backups, and send these backups to a remote server daily at midnight.</p>
|
|
||||||
<pre><code>#!/bin/bash
|
|
||||||
|
|
||||||
# Set locations to backup/backup to from the flags
|
|
||||||
while getopts s:d:b:r:R:n: flag
|
|
||||||
do
|
|
||||||
case "${flag}" in
|
|
||||||
d) DATA=${OPTARG};;
|
|
||||||
b) BACKUPDIR=${OPTARG};;
|
|
||||||
r) REMOTE=${OPTARG};;
|
|
||||||
R) REMOTEBACKUP=${OPTARG};;
|
|
||||||
n) NOW=${OPTARG};;
|
|
||||||
esac
|
|
||||||
done
|
|
||||||
|
|
||||||
# If the backup directory doesn't exist, make it
|
|
||||||
mkdir -p $BACKUPDIR
|
|
||||||
|
|
||||||
# Incremental backup of the directory locally
|
|
||||||
rdiff-backup $DATA $BACKUPDIR
|
|
||||||
# Don't keep changes from over 1W ago
|
|
||||||
rdiff-backup --force --remove-older-than 1W $BACKUPDIR
|
|
||||||
|
|
||||||
# Backup to remote
|
|
||||||
# Get the hour/minute time
|
|
||||||
TIME=$(date +%H%M)
|
|
||||||
|
|
||||||
# If it's a midnight backup, or a manual backup with -n 1 flag set
|
|
||||||
if [ "$TIME" = 0000 ] || [ "$NOW" = 1 ]
|
|
||||||
then
|
|
||||||
# Create the remote directory for backup if it doesn't exist
|
|
||||||
ssh $REMOTE mkdir -p $REMOTEBACKUP
|
|
||||||
|
|
||||||
# Copy the backup to the remote location
|
|
||||||
# -e ssh makes it secure
|
|
||||||
rsync -azh -e ssh \
|
|
||||||
--delete \
|
|
||||||
$BACKUPDIR \
|
|
||||||
$REMOTE:$REMOTEBACKUP
|
|
||||||
fi
|
|
||||||
</code></pre>
|
|
||||||
<p>Which is called in the crontab like so</p>
|
|
||||||
<pre><code># Hourly rdiff-backup of $DIRECTORY_TO_BACKUP
|
|
||||||
0 */1 * * * $SCRIPT_LOCATION -d $DIRECTORY_TO_BACKUP -b $LOCATION_TO_SAVE_BACKUP -r $EXTERNAL_SERVER_SSH -R $EXTERNAL_SERVER_BACKUP_LOCATION</code></pre>
|
|
||||||
|
|
||||||
<p>This script can easily be used for many different directories, on each server without needing to change the script itself. All that's needed is to change the cronjob, and/or add another cronjob changing the values it takes.</p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, template">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Backup with rdiff-backup</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Backup with rdiff-backup</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">Like rsync, rdiff-backup is a tool used for incremental backups. Unlike rsync however, rdiff keeps the most-recent file change, along with any previous changes, deletions, etc.</p>
|
|
||||||
<h2>Install</h2>
|
|
||||||
<pre><code>sudo apt install rdiff-backup</code></pre>
|
|
||||||
<h2>Backup</h2>
|
|
||||||
<pre><code>rdiff-backup $dir $backup</code></pre>
|
|
||||||
<h2>Restore</h2>
|
|
||||||
<pre><code>rdiff-backup -r 2D $backup $restore_dir</code></pre>
|
|
||||||
<h2>Advanced</h2>
|
|
||||||
<h3>Only keep backups for a certain time period</h3>
|
|
||||||
<pre><code>rdiff-backup --force --remove-older-than 2M $backup</code></pre>
|
|
||||||
<p>This will remove all backups older than 2 months from $backup.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, template, rsync, backup">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Backup with rsync</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Backup with rsync</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">Rsync is a program that allows for incremental backups. This means that rsync will not create an additional copy of the data when backing up, it will only backup changes to the files/directories, saving bandwidth and storage space.</p>
|
|
||||||
|
|
||||||
<h2>Installation</h2>
|
|
||||||
<pre><code>sudo apt install rsync</code></pre>
|
|
||||||
|
|
||||||
<h2>Backup</h2>
|
|
||||||
<pre><code>rsync -azh $ORIGINAL $BACKUP</code></pre>
|
|
||||||
<p>Replace $ORIGINAL with the file/directory to backup, and $BACKUP with the location for the backup to reside.</p>
|
|
||||||
<p>The $BACKUP destination must be a blank directory, an rsync directory, or not currently exist.</p>
|
|
||||||
|
|
||||||
<h3>Remote rsync backup</h3>
|
|
||||||
<p>If you need to rsync from one PC to another, it's essential the same command, but with the additional layer of ssh</p>
|
|
||||||
<pre><code>rsync -azh -e ssh $ORIGINAL $BACKUP</code></pre>
|
|
||||||
<p>$BACKUP here will be an ssh connection pointed to a location, much like when using scp, so the command will look like</p>
|
|
||||||
<pre><code>rsync -azh -e ssh $ORIGINAL $USER@$HOST:$LOCATION</code></pre>
|
|
||||||
<p>Replacing $USER and $HOST with the username and hostname/IP for the server</p>
|
|
||||||
|
|
||||||
<h2>Restore</h2>
|
|
||||||
<p>A restore in rsync doesn't require any rsync code per-se, as you can just copy individual files from the backup location to the restore location.</p>
|
|
||||||
<p>Alternatively to restore the entire directory, keeping files that haven't changes, and those that have to the time of the last backup, rsync can do that as below</p>
|
|
||||||
<pre><code>rsync -auv $BACKUP $RESTORE</code></pre>
|
|
||||||
<h3>Over the internet</h3>
|
|
||||||
<p>Like with backups, these restores can be done over the network/internet too</p>
|
|
||||||
<pre><code>rsync -auv $USER@$HOST:$BACKUP $RESTORE</code></pre>
|
|
||||||
|
|
||||||
<h2>Notes/Advanced</h2>
|
|
||||||
<pre><code>-r recursive. All files/directories in the path will be backed up
|
|
||||||
-a archive mode. Recursive, but with file permissions, symlinks, etc retained.
|
|
||||||
-z compress
|
|
||||||
-b backups
|
|
||||||
-R relative
|
|
||||||
-u update - copy only changed files
|
|
||||||
-P progress
|
|
||||||
-c compress
|
|
||||||
-p preserve permissions
|
|
||||||
-h human readable. Make the output readible by humans
|
|
||||||
</code></pre>
|
|
||||||
|
|
||||||
<h2>Downsides</h2>
|
|
||||||
<p>Rsync only keeps one copy of the data, and doesn't keep the changes that were made, making it impossible* to restore a file's contents from the day previous. If this is what you're after, look at <a href="/guides/backup-with-rdiff.html">rdiff-backup</a>.</p>
|
|
||||||
<p>* Not impossible, as you <em>can</em> set rsync to do this, but it requires a bit of scripting, and isn't as easy as just running the program</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A guide to adding a free SSL certificate to your website(s) using cerbot, and automatically renewing them">
|
|
||||||
<meta name="keywords" content="Blog, articles, guide, certbot, SSL, secure certificate, website">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Setup SSL with Certbot</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Setup SSL with Certbot</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>An SSL certificate is used to secure a domain, preventing people from seeing many things, including those entered into forms (username, password, etc.).</p>
|
|
||||||
<h2>Install Certbot</h2>
|
|
||||||
<pre><code>sudo apt install python3-certbot</code></pre>
|
|
||||||
<p>or</p>
|
|
||||||
<pre><code>sudo apt install python3-certbot-nginx</code></pre>
|
|
||||||
|
|
||||||
<h2>Run Certbot</h2>
|
|
||||||
<pre><code>sudo certbot --nginx</pre></code>
|
|
||||||
<p>or</p>
|
|
||||||
<pre><code>sudo certbot --nginx -d <DOMAIN-NAME></pre></code>
|
|
||||||
<p>I recommend the former command, as it will ask which domain you'd like to setup for, where the latter should be used if you know for certain the domain-name is configured in nginx</p>
|
|
||||||
<p>The first time you run certbot you'll need to enter an email (for alerts), and agree to T&Cs</p>
|
|
||||||
<h3>Configure HTTPS</h3>
|
|
||||||
|
|
||||||
<h2>Auto renew</h2>
|
|
||||||
<p>Certificates attained via Certbot are valid for 90 days, so to keep it up indefinitely we'll need to auto-renew before it expires</p>
|
|
||||||
<p>To do this we'll set up a cronjob to run on... . This crontab needs to be run by root, so we'll open the crontab with sudo.</p>
|
|
||||||
<pre><code>sudo crontab -e</code></pre>
|
|
||||||
<p>If it's your first time editing the crontab (as root), it'll ask for your editor of choice</p>
|
|
||||||
<p>When the crontab is open, add a line to the bottom with the following</p>
|
|
||||||
<pre><code>0 0 * * * certbot --nginx renew</code></pre>
|
|
||||||
<p>Exit and save, you'll be imformed the crontab has been changed, and every day the cronjob will auto renew SSL certificates that are due to expire in the next 30 days.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A basic guide on how to purchase a domain name">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Get a domain name</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Get a domain name</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>A domain name, as many will know is what you type into a browser to access a website. Without a domain name, everyone accessing your server/website would need to be entering the IP address.</p>
|
|
||||||
|
|
||||||
<h2>Choose a registrar</h2>
|
|
||||||
<p>First thing is to choose a registrar (who you are leasing the domain from). You can search for "domain name registrars" and find who is cheapest. So long as they handle DNS (which most do) you're good.</p>
|
|
||||||
<p>I'm currently using <a href="https://tsohost.com" target="_blank" rel="noopener" >tsohost.com</a>, as they're pretty cheap, and besides a few little issues, it works for me.</p>
|
|
||||||
|
|
||||||
<h2>Choose a domain name</h2>
|
|
||||||
<p>On the registrar's website there will be a section to purchase a domain. Upon clicking this you'll likely be greeted with a searchbar, search for whatever domain you'd like here, and they'll let you know if it's available, and what similar domains there are.</p>
|
|
||||||
<p>Select the domain(s) you wish, and add it/them to your cart.</p>
|
|
||||||
|
|
||||||
<h2>Purchase your domain name</h2>
|
|
||||||
<p>Simply checkout, and make your way through the process. Tada, you now have a domain name!</p>
|
|
||||||
<p>Next up you'll need to <a href="/guides/add-domain-to-server">link your server and domain name</a> with DNS.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,112 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="Learn to host a public/private server with a bunch of great services">
|
|
||||||
<meta name="keywords" content="Blog, server, hosting, website, guide, admin, homelab, self-host">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Aney's guide to server hosting</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Aney' guide to server hosting</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">If you want to start getting into server hosting, system administration, or just want to get a basic minecraft/web server up for you and your friends, then welcome. We all start somewhere, and I would love if I could get your foot in the door.</p>
|
|
||||||
|
|
||||||
<h2>Basic Server setup</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Get a server and <a href="/guides/server-install-debian.html">Install Debian</a></li>
|
|
||||||
<li><a href="/guides/initial-server-setup.html">Basic Debian Server setup (with some security)</a></li>
|
|
||||||
<li><a href="/guides/get-a-domain-name.html">Get a domain name</a></li>
|
|
||||||
<li><a href="/guides/add-domain-to-server.html">Connect your server and domain name</a></li>
|
|
||||||
<li>TODO:Port Forwarding (home server)</li>
|
|
||||||
</ul>
|
|
||||||
<p>Now you officially own, and have setup a server. Currently all you can do is SSH into it though, so let's get some services on there</p>
|
|
||||||
|
|
||||||
<h2>Virtualisation</h2>
|
|
||||||
<p>Virtual machines allow you to use your server as multiple servers at once, with different operating systems, services, files, etc. If you're self-hosting this is a great way to separate concerns, having one system for each distinct task.</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/guides/setup-qemu-kvm.html">Setup Qemu/KVM</a></li>
|
|
||||||
<li><a href="/guides/setup-kvm-bridge.html">Setup a bridged adapter</a></li>
|
|
||||||
<li>TODO:<a href="/guides/install-kvm-virtual-machine.html">Install a virtual machine</a></li>
|
|
||||||
<li>TODO:<a href="/guides/kvm-optimisation.html">Optimisate KVM Virtual Machines</a></li>
|
|
||||||
<li>TODO:<a href="/guides/virsh-cheatsheet.html">Virsh cheatsheet</a></li>
|
|
||||||
<li><a href="/guides/vm-seperation-of-concerns">Example of Separation of Concerns (SoC)</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Nginx Webserver</h2>
|
|
||||||
<p>A great first service for any server is a website, even if it's just a little page to let people know you own the server/domain name</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/guides/nginx-install.html">Install nginx</a></li>
|
|
||||||
<li><a href="/guides/setup-nginx-website.html">Setup an nginx website</a></li>
|
|
||||||
<li><a href="/guides/certbot-ssl.html">Add an SSL certificate w/Certbot</a></li>
|
|
||||||
<li>TODO:<a href="/guides/nginx-web-optimisation.html">Nginx web optimisation</a></li>
|
|
||||||
<li><a href="/guides/add-php-to-nginx.html">(Optional) Add PHP to your webserver</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>MariaDB Database</h2>
|
|
||||||
<p>A database is a great tool to store, access, and filter data. Typically used alongside a website, or other services, but can be useful standalone if you know what you're doing</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/guides/install-mysql-mariadb.html">Install mariaDB</a></li>
|
|
||||||
<li>TODO:<a href="/guides/sql-cheatsheet.html">SQL cheatsheet</a></li>
|
|
||||||
<li><a href="/guides/adminer-setup.html">(Optional) Adminer setup</a></li>
|
|
||||||
<li>TODO:<a href="/guides/backup-mysql-mariadb.html">(Optional) Backup databases</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Backup your server!</h2>
|
|
||||||
<p>Backups are super useful. If something breaks, or gets accidentally deleted you can always use a backup to get it back</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/guides/backup-with-rsync.html">Backup with rsync</a></li>
|
|
||||||
<li>TODO:<a href="/guides/backup-with-rdiff.html">Backup with rdiff-backup</a></li>
|
|
||||||
<li><a href="/guides/backup-with-cron.html">Setup backup cronjob(s)</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Additional services/potential guides</h2>
|
|
||||||
<p>Unless there is an anchor, these are all "TODO", and may just be omitted from this list</p>
|
|
||||||
<h3>Useful tidbits</h3>
|
|
||||||
<ul>
|
|
||||||
<li>TODO:<a href="/guides/nginx-proxy.html">Proxy services with NGINX proxy pass</a></li>
|
|
||||||
<li>TODO:<a href="/guides/password-protect-webpage.html">Password protect webpages</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3>Additional Services</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/guides/setup-git-server.html">git</a></li>
|
|
||||||
<li>Uptime Kuma</li>
|
|
||||||
<li>torrentbox</li>
|
|
||||||
<li>Jellyfin</li>
|
|
||||||
<li>VPN</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A collection of typically tech related guides, authored by Aney.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Aney's Guides</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Aney's Guides</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
|
|
||||||
<h2>Pinned</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/guides/guide-to-server-hosting.html">Guide to server hosting</a></li>
|
|
||||||
<li><a href="/guides/web-dev-101.html">Web Development 101</a></li>
|
|
||||||
</ul>
|
|
||||||
<h2>2022</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/guides/webpage-to-website.html">Webpage to website</a> - 22/11/2022</li>
|
|
||||||
<li><a href="/guides/your-first-webpage.html">Your first webpage</a> - 18/11/2022</li>
|
|
||||||
<li><a href="/guides/web-dev-101.html">Web Development 101</a> - (WIP)18/11/2022</li>
|
|
||||||
<li><a href="/guides/password-protect-webpage.html">Password protect webpages</a> - (WIP)14/09/2022</li>
|
|
||||||
<li><a href="/guides/nginx-proxy.html">Proxy services with Nginx</a> - (WIP)14/09/2022</li>
|
|
||||||
<li><a href="/guides/install-kvm-virtual-machine.html">Install a KVM Virtual Machine</a> - (WIP)14/09/2022</li>
|
|
||||||
<li><a href="/guides/setup-git-server.html">Setup git server</a> - 13/09/2022</li>
|
|
||||||
<li><a href="/guides/backup-with-cron.html">Automate Backups with Cron</a> - 26/08/2022</li>
|
|
||||||
<li><a href="/guides/server-install-debian.html">Debian Install Guide (for Server)</a> - 22/08/2022</li>
|
|
||||||
<li><a href="/guides/set-static-ip.html">How to set a static IP</a> - 22/08/2022</li>
|
|
||||||
<li><a href="/guides/vm-seperation-of-concerns.html">VM Seperation of Concerns</a> - 29/07/2022</li>
|
|
||||||
<li><a href="/guides/setup-kvm-bridge.html">Setup a KVM bridge</a> - 29/07/2022</li>
|
|
||||||
<li><a href="/guides/virsh-cheatsheet.html">Virsh Cheatsheet</a> - 29/07/2022</li>
|
|
||||||
<li><a href="/guides/setup-qemu-kvm.html">Install KVM for virtualisation</a> - 29/07/2022</li>
|
|
||||||
<li><a href="/guides/backup-with-rdiff.html">Backup files with rdiff</a> - 17/07/2022</li>
|
|
||||||
<li><a href="/guides/backup-with-rsync.html">Backup files with rsync</a> - 17/07/2022</li>
|
|
||||||
<li><a href="/guides/add-php-to-nginx.html">PHP on Nginx setup</a> - 10/06/2022</li>
|
|
||||||
<li><a href="/guides/sql-cheatsheet.html">SQL Cheatsheet</a> - 09/06/2022</li>
|
|
||||||
<li><a href="/guides/adminer-setup.html">Adminer Setup</a> - 09/06/2022</li>
|
|
||||||
<li><a href="/guides/backup-mysql-mariadb.html">Backing Up MySQL/MariaDB</a> - 09/06/2022</li>
|
|
||||||
<li><a href="/guides/install-mysql-mariadb.html">MySQL/MariaDB Setup Guide</a> - 09/06/2022</li>
|
|
||||||
<li><a href="/guides/nginx-web-optimisation.html">NGINX web optimisation</a> - 30/05/2022</li>
|
|
||||||
<li><a href="/guides/certbot-ssl.html">Setup SSL with Certbot</a> - 30/05/2022</li>
|
|
||||||
<li><a href="/guides/setup-nginx-website.html">How to setup an nginx website</a> - 30/05/2022</li>
|
|
||||||
<li><a href="/guides/nginx-install.html">How to install an nginx webserver</a> - 30/05/2022</li>
|
|
||||||
<li><a href="/guides/get-a-domain-name.html">How to purchase a domain name</a> - 30/05/2022</li>
|
|
||||||
<li><a href="/guides/add-domain-to-server.html">Link your domain name to your server</a> - 24/05/2022</li>
|
|
||||||
<li><a href="/guides/initial-server-setup.html">Debian Server Setup</a> - 24/05/2022</li>
|
|
||||||
<li><a href="/guides/guide-to-server-hosting.html">Aney's guide to server hosting</a> - 24/05/2022</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,201 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A guide for the first steps following a new debian server install">
|
|
||||||
<meta name="keywords" content="Blog, articles, news">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Initial Server Setup</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Initial Server Setup</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>This section assumes you have a fresh Debian install on a server (either physical or VPS)</p>
|
|
||||||
<p>It will cover installing the essentials for access, and basic security so you don't need to worry in the future. This section may seem a little daunting for a first-time linux user, but most of it is copy/paste, hopefully with enough description to understand what is being done.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<p>This first section will be done on the physical PC, or on the VPS via their website, or SSH'd as root if that's the option given.</p>
|
|
||||||
|
|
||||||
<h2>Login</h2>
|
|
||||||
<p>Perhaps silly, but login as your user with root priveleges or the root user if a user isn't currently setup.</p>
|
|
||||||
<p>For the first few steps it's written as if you're logged in as root, if you followed my <a href="/guides/server-install-debian.html" target="_blank" rel="noopener">install guide</a>, this won't have a password, so we'll change user with the following command</p>
|
|
||||||
<pre><code>sudo su -</code></pre>
|
|
||||||
<p>Now just follow along with the remainder of the guide. If you wish not to change users you could also just add sudo in-front of the commands to run them as root that way.</p>
|
|
||||||
|
|
||||||
<h2>Update the OS</h2>
|
|
||||||
<p>Even with a fresh install of Debian from the latest ISO, there may be some updates you're missing, and it's a good idea to have these, especially in case they're security updates.</p>
|
|
||||||
|
|
||||||
<pre><code>apt update && apt upgrade</code></pre>
|
|
||||||
|
|
||||||
<h2>Install essential packages</h2>
|
|
||||||
<p>These are packages that are needed for accessing, and controlling the server</p>
|
|
||||||
|
|
||||||
<pre><code>apt install sudo ssh -y</code></pre>
|
|
||||||
|
|
||||||
<h3>Some useful packages too</h3>
|
|
||||||
<pre><code>apt install vim htop wget curl tmux -y</code></pre>
|
|
||||||
|
|
||||||
<h2>Add a user, and give super user privilleges</h2>
|
|
||||||
<p>This can be ignored if my guide was followed, or you already have a user setup. Some VPS just have root however, so I believe this should be included.</p>
|
|
||||||
<p>The reason for a new account instead of using root, basically comes down to security. If you want multiple people on the server too, it's best to have a unique account for each.</p>
|
|
||||||
|
|
||||||
<pre><code>adduser $USERNAME$
|
|
||||||
usermod -aG sudo $USERNAME$</code></pre>
|
|
||||||
|
|
||||||
<p>*replace $USERNAME$ with the user you want to create, e.g. nathan</p>
|
|
||||||
|
|
||||||
<h2>(Local server) Set static IP</h2>
|
|
||||||
<p>If the server is a physical PC in your home you will need to set a static IP, otherwise your router could assign a different IP on reboot, and this would mess with port forwarding, and internal DNS.</p>
|
|
||||||
<p>If you're using a VPS, this step can be ignored.</p>
|
|
||||||
<p><a href="#" target="_blank" rel="noopener">Set static IP for local server</a></p>
|
|
||||||
|
|
||||||
<h2>Secure ssh</h2>
|
|
||||||
<p>Although this is optional, I recommend it, as SSH (secure shell) will likely be the primary means of access to the server. You don't want to be next to it whenever you've got a change to make.</p>
|
|
||||||
|
|
||||||
<p>Open the following file with your editor of choice, I use vim.</p>
|
|
||||||
<pre><code>vim /etc/ssh/sshd_config</code></pre>
|
|
||||||
|
|
||||||
<p>Within the editor you will need to search for <strong>PermitRootLogin</strong> and set it to <strong>no</strong>, this prevents ssh as root</p>
|
|
||||||
<p>Search for <strong>Port</strong> and set it to a different port than 22, a port over 1024 prevents basic nmap scans, and therefor a lot of bruteforcing, so let's go with 2020 as it's easy to remember</p>
|
|
||||||
<p>Below the <strong>Port</strong> line, add a new line and write <strong>Protocol 2</strong> this enables ssh2, which is more secure than the standard ssh protocol.</p>
|
|
||||||
<p>(Optional) Comment/Add a <strong>#</strong> to the beginning of the <strong>passwordlogin</strong> line. This will prevent sshing to the server from any PC that doesn't have it's SSH key on the server already. I recommend only doing this if your sshkeys are on the server, or you're comfortable adding them.</p>
|
|
||||||
|
|
||||||
<pre><code>systemctl reload sshd</code></pre>
|
|
||||||
|
|
||||||
<p>This reloads the ssh daemon, and enables all the changes we've made</p>
|
|
||||||
|
|
||||||
<h2>Setup UFW</h2>
|
|
||||||
<p>UFW (Uncomplicated Firewall) is a simple to use firewall, that can be used to easily open/close ports on your server.</p>
|
|
||||||
<p>We'll install ufw, deny access inwards to all ports, but allow our server to access any ports outwards. We will then manually allow traffic to the SSH port we set, in this case 2020.</p>
|
|
||||||
|
|
||||||
<pre><code>apt install ufw</code></pre>
|
|
||||||
<pre><code>ufw default deny incoming &&
|
|
||||||
ufw default allow outgoing &&
|
|
||||||
ufw allow 2020 &&
|
|
||||||
ufw enable</code></pre>
|
|
||||||
<p>If there are any other ports that need to be opened in the future this can be done with:</p>
|
|
||||||
<pre><code>ufw allow $PORT</code></pre>
|
|
||||||
|
|
||||||
<h2>Set hostname</h2>
|
|
||||||
<p>Setting the name for a server is not an important step, but it's nice to have each server easily identifable.</p>
|
|
||||||
<p>Simply change the hostname within the two files below. Ensure they share the same name between files.</p>
|
|
||||||
|
|
||||||
<pre><code>vim /etc/hosts</code></pre>
|
|
||||||
<p>and</p>
|
|
||||||
<pre><code>vim /etc/hostname</code></pre>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<hr>
|
|
||||||
<p>This next section is to be done via a terminal, or an SSH client e.g. PuTTY for Windows. This part of the guide is written for a Unix terminal.</p>
|
|
||||||
|
|
||||||
<h2>SSH into the server</h2>
|
|
||||||
<p>This is a two part section, and I recommend using this every time you SSH into a server from a new PC.</p>
|
|
||||||
<pre><code>ssh $USER$@$HOST$ -p 2020</code></pre>
|
|
||||||
|
|
||||||
<p>This will likely display a message asking to verify the key for the server. This is to prevent man-in-the-middle attacks, so I recommend verifying this whenever asked.</p>
|
|
||||||
|
|
||||||
<h3>Verify SSH</h3>
|
|
||||||
<p>To verify, you'll need to run the following command on the server.</p>
|
|
||||||
|
|
||||||
<pre><code>ssh-keygen -l -f /etc/ssh/ssh_host_ed25519_key.pub</code></pre>
|
|
||||||
|
|
||||||
<p>Then if the key the server shows matches that on your PC's SSH prompt, type <strong>yes</strong> and hit enter from your PC.</p>
|
|
||||||
|
|
||||||
<h2>SSH without a password</h2>
|
|
||||||
<p>To be more secure, and to SSH faster we can setup an SSH key, and use that for user authentication.</p>
|
|
||||||
<h3>Create an SSH key</h3>
|
|
||||||
<p>We'll create an ed25519 ssh-key, as it's more secure, and performant than the default rsa.</p>
|
|
||||||
<pre><code>ssh-keygen -t ed25519</code></pre>
|
|
||||||
|
|
||||||
<h3>Copy the SSH key onto the server</h3>
|
|
||||||
<p>From the terminal there's a nifty command to copy ssh keys to a server.</p>
|
|
||||||
<pre><code>ssh-copy-id -p 2020 -i ~/.ssh/id_ed25519 USER@HOST</code></pre>
|
|
||||||
|
|
||||||
<p>Alternatively you can add the key to the server manually. This is recommended, especially when adding other users.</p>
|
|
||||||
<p>First on your PC you need to run the following, and take note of the output.</p>
|
|
||||||
<pre><code>cat ~/.ssh/id_ed25519.pub</pre></code>
|
|
||||||
<p>Then on the server, open the following file, and add the output to a new line.</p>
|
|
||||||
<pre><code>vim /home/USER/.ssh/authorized_keys</code></pre>
|
|
||||||
|
|
||||||
<h3>SSH again</h3>
|
|
||||||
<p>Now simply run the same ssh command as before, and you shouldn't get a password prompt.</p>
|
|
||||||
<pre><code>ssh $USER$@$HOST$ -p 2020</code></pre>
|
|
||||||
|
|
||||||
<h2>(Optional) Fail2Ban</h2>
|
|
||||||
<p>Fail2ban is used to periodically check server logs, and bans IPs that appear to be trying to brute-force into your server. It's only "required" for servers exposed to the internet.</p>
|
|
||||||
<pre><code>apt install fail2ban -y</code></pre>
|
|
||||||
<pre><code>systemctl enable fail2ban</code></pre>
|
|
||||||
<p>There's a lot of options for fail2ban, this just installs it. For a little more detail checkout <a href="https://wiki.crowncloud.net/?How_To_Protect_SSH_With_Fail2Ban_on_Debian_12" target="_blank" rel="noopener">Crownclouds fail2ban guide</a>.</p>
|
|
||||||
|
|
||||||
<h2>TODO:(Optional) Unattended Upgrades</h2>
|
|
||||||
<p>Updates to a server typically want to be done by a human in case things go wrong, but smaller updates can be set to be done automatically.</p>
|
|
||||||
<pre><code>apt install unattended-upgrades</pre></code>
|
|
||||||
<p>The above downlads, and starts unattended-upgrades with some good defaults, but if you want a some more details check cyberciti's<a href="https://www.cyberciti.biz/faq/how-to-keep-debian-linux-patched-with-latest-security-updates-automatically/" target="_blank" rel="noopener">unattended upgrades guide</a>.</p>
|
|
||||||
|
|
||||||
<h2>(Optional) Setup User preferences</h2>
|
|
||||||
<p>These are a few things I personally like to have on a basic server. If you have your own preferences, dotfiles, or intend to use oh-my-zsh fell free to skip over this.</p>
|
|
||||||
|
|
||||||
<h3>Vi mode bash</h3>
|
|
||||||
<p><strong>Warning</strong> this is a preference you may not want to use if you're a beginner, and/or don't use VIM (text editor), as it sets the terminal to work more like VIM</p>
|
|
||||||
<p>Open your .bashrc file in your editor of choice<p>
|
|
||||||
<pre><code>vim ~/.bashrc</code></pre>
|
|
||||||
<p>Add the following to the bottom of the file</p>
|
|
||||||
<pre><code>set -o vi</code></pre>
|
|
||||||
|
|
||||||
<h3>Aliases</h3>
|
|
||||||
<p>Instead of typing out long commands you can alias them, and type a shorthand version. I've written an <a href="#">article about aliases</a> that explains setting up, and aliases I use. Below are some essentials for those that don't want to jump to another article.</p>
|
|
||||||
<pre><code>alias ll="ls -lhtr"
|
|
||||||
alias df="df -h"
|
|
||||||
alias ta="tmux attach || tmux new"
|
|
||||||
alias ipe="curl ifconfig.co"</code></pre>
|
|
||||||
|
|
||||||
<h2>Reads shouldn't write!</h2>
|
|
||||||
<p>Another personal opinion, and change is to enable noatime, and nodiratime. Be careful with this change! And ignore if you followed my Debian install guide, as they're already enabled.</p>
|
|
||||||
<p>Basically without these, when a file is opened (read) on your filesystem, a write is invoked to update the time it was opened, which causes unwanted writes, and CPU cycles.</p>
|
|
||||||
<p>Open your fstab file</p>
|
|
||||||
<pre><code>sudo vim /etc/fstab</code></pre>
|
|
||||||
<p>And edit your mounted drive(s) to include these flags</p>
|
|
||||||
<pre><code>UUID=<YOUR-UUID> / ext4 noatime,nodiratime 0 1</code></pre>
|
|
||||||
<p>The above uses an example, make your EXISTING lines look kinda like the above. Essentially just adding <strong>noatime, nodiratime</strong></p>
|
|
||||||
|
|
||||||
<h2>Server maintance notes</h2>
|
|
||||||
<p>Keep the server up-to date as much as possible</p>
|
|
||||||
<p>Only install things that you need. If this is a server for learning, half ignore this, but for production servers only install services, and make changes that are required.</p>
|
|
||||||
<p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, template">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Template for Blog</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Template for Blog</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">This is an intro, you gotta believe me</p>
|
|
||||||
<h2>Heading</h2>
|
|
||||||
<p>Yea, you're probably wondering how I got here.</p>
|
|
||||||
|
|
||||||
<h2>Install with virt (CLI)</h2>
|
|
||||||
|
|
||||||
<h2>Install with virt-manager (GUI)</h2>
|
|
||||||
|
|
||||||
By default virsh lists vms belonging to user
|
|
||||||
virsh --connect qemu:///system list --all
|
|
||||||
The above run as root shows all vms
|
|
||||||
|
|
||||||
|
|
||||||
For virtmanager, etc to controll vms from an remote host
|
|
||||||
It needs ssh-key shared
|
|
||||||
|
|
||||||
If a different port, then use virt-manager -c 'qemu+ssh://myuser@192.168.1.139:2222/system?keyfile=id_rsa'
|
|
||||||
|
|
||||||
e.g.
|
|
||||||
virt-manager -c 'qemu+ssh://nathan@aney.co.uk:2020/system?keyfile=id_rsa'
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, guide, mysql, mariadb, database">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>MySQL (actually MariaDB) Setup Guide</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>MySQL (actually MariaDB) Setup Guide</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>MySQL is a well known free, open-source relational database service, and it's great. MariaDB is just MySQL (a fork of it), but better.</p>
|
|
||||||
|
|
||||||
<h2>Install MariaDB</h2>
|
|
||||||
<pre><code>sudo apt install mariadb-server</code></pre>
|
|
||||||
|
|
||||||
<h2>Secure Install/Setup</h2>
|
|
||||||
<pre><code>sudo mysql_secure_installation</code></pre>
|
|
||||||
<p>Run the above command, and follow the instructions, if you don't want to then follow mine.</p>
|
|
||||||
<p>Press enter for the current password, and again when asked if you want to set a root password. Enter the password, then press enter for everything else.
|
|
||||||
|
|
||||||
<h2>Create Admin user</h2>
|
|
||||||
<pre><code>sudo mysql</code></pre>
|
|
||||||
|
|
||||||
<pre><code>GRANT ALL ON *.* TO 'admin'@'localhost' IDENTIFIED BY '<DESIRED_PASSWORD>' WITH GRANT OPTION;</code></pre>
|
|
||||||
<pre><code>FLUSH PRIVILEGES;</code></pre>
|
|
||||||
<pre><code>exit;</code></pre>
|
|
||||||
|
|
||||||
<h2>Test it works</h2>
|
|
||||||
<p>Simply try logging in as the admin account.</p>
|
|
||||||
<pre><code>mysql -u admin -p</code></pre>
|
|
||||||
<p>It should ask for a password, so enter your <strong>DESIRED_PASSWORD</strong>, and if you get mysql access, it's successful.</p>
|
|
||||||
|
|
||||||
<h2>(Optional) Make it easier to access on command line</h2>
|
|
||||||
<p>If you're working with a terminal, when calling <code>mysql</code> you'll need to enter a password each time. You can store the passwordwith a special .cnf file, making it faster to get into writing SQL.</p>
|
|
||||||
<p>Create/Edit the file with your editor of choice (mine's vim)</p>
|
|
||||||
<pre><code>vim ~/.my.cnf</code></pre>
|
|
||||||
<p>Add the following, with your credentials</p>
|
|
||||||
<pre><code>[mysql]
|
|
||||||
user=<USERNAME>
|
|
||||||
password=<PASSWORD></code></pre>
|
|
||||||
<p>The above can be used for mysqldump, mysqladmin, and others too, by replacing the <code>[mysql]</code> block, with the related. e.g. <code>[mysqldump]</code>.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>KVM Optimisation</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>KVM Optimisation</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<h2>KVM Optimisations</h2>
|
|
||||||
|
|
||||||
transmit queue
|
|
||||||
virsh domiflist <vm>
|
|
||||||
# this is then the txqueuelen change below ???
|
|
||||||
# changing to 4096
|
|
||||||
ifconfig <interface_name> txqueuelen <length>
|
|
||||||
|
|
||||||
txqueuelen (iwbcman comment)
|
|
||||||
defaults to 1000, apparently 200 is good
|
|
||||||
|
|
||||||
ip link set eth0 txqueuelen 200
|
|
||||||
vim /etc/network/interfaces
|
|
||||||
add
|
|
||||||
post-up /sbin/ip link set eth0 txqueuelen 200
|
|
||||||
to the end
|
|
||||||
|
|
||||||
If virtual hdd is slow can try
|
|
||||||
Cache mode: none (not default!)
|
|
||||||
I/O mode: native<Paste>
|
|
||||||
https://unix.stackexchange.com/a/48584
|
|
||||||
|
|
||||||
non caching on dirves?
|
|
||||||
https://blog.jdpfu.com/2012/07/30/improving-kvm-performance
|
|
||||||
://documentation.suse.com/smart/linux/html/concept-virtual-disk-cache-modes/concept-virtual-disk-cache-modes.html#:~:text=A%20disk%20cache%20is%20a,example%2C%20by%20setting%20its%20type.
|
|
||||||
On VM turning cache off essentially acts like accessing the drive itself. No exactly a passthrough, but decent enough
|
|
||||||
|
|
||||||
http://www.linux-kvm.org/page/Tuning_KVM
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A guide to installing an NGINX web server">
|
|
||||||
<meta name="keywords" content="Blog, articles, news, NGINX, web server, guide">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>How to install an NGINX web server</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>How to install an NGINX web server</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>NGINX (engine X) is one of the top webservers. It has relatively easy learning curve, is fast, and <a href="">secure</a>. It's a great step into web hosting, and a good first service for many servers.</p>
|
|
||||||
<h2>Install</h2>
|
|
||||||
<pre><code>sudo apt install nginx</code></pre>
|
|
||||||
|
|
||||||
<h2>Enable, and start</h2>
|
|
||||||
<pre><code>sudo systemctl enable nginx --now</code></pre>
|
|
||||||
<p>or</p>
|
|
||||||
<pre>
|
|
||||||
<code>sudo systemctl enable nginx
|
|
||||||
sudo systemctl start nginx</code></pre>
|
|
||||||
|
|
||||||
<h2>Enable the http port</h2>
|
|
||||||
<p>If you have UFW installed ala the <a href="/guides/initial-server-setup.html">initial server setup</a> guide you'll need to open the http port on the server</p>
|
|
||||||
<pre><code>sudo ufw allow 80</code></pre>
|
|
||||||
<p>or</p>
|
|
||||||
<pre><code>sudo ufw allow http</code></pre>
|
|
||||||
|
|
||||||
<h2>Check it's working</h2>
|
|
||||||
<p>Open your browser, and head over to your IP address, or domain name. With any luck you should see the default NGINX page, with a "Welcome to NGINX"</p>
|
|
||||||
|
|
||||||
<h3>Basic checks in case it's not</h3>
|
|
||||||
<p>Check nginx is actually running</p>
|
|
||||||
<pre><code>sudo systemctl status nginx</code></pre>
|
|
||||||
<p>In the active section, this should show "Active", if not try starting nginx again</p>
|
|
||||||
<pre><code>sudo systemctl start nginx</code></pre>
|
|
||||||
<p>Check UFW port is enabled<p>
|
|
||||||
<pre><code>sudo ufw status</code></pre>
|
|
||||||
<p>This should show port 80, and 80 (v6) with ALLOW. If not, run ufw allow again</p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Next...</h2>
|
|
||||||
<p><a href="/guides/setup-nginx-website.html">Setup an nginx website</a></p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, template">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Template for Blog</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Template for Blog</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">This is an intro, you gotta believe me</p>
|
|
||||||
<h2>Install</h2>
|
|
||||||
<p>.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="Learn how to Secure, and optimise your NGINX server with an easy guide">
|
|
||||||
<meta name="keywords" content="Blog, articles, news">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>NGINX web optimisation</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>NGINX web optimisation</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>Optimisations for the nginx configs will increase both the security, and performance of your website
|
|
||||||
<h2>TODO: Headers</h2>
|
|
||||||
<p>These headers tell nginx what, and how things can be served. They need to be added to each site-available that intends to use them</p>
|
|
||||||
<pre><code>sudo vim /etc/nginx/sites-available/<DOMAIN></code></pre>
|
|
||||||
<p>Within the server block. If certbot/SSL is setup, add into the block listening to port 443 (HTTPS)</p>
|
|
||||||
<pre><code>add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload';
|
|
||||||
add_header Content-Security-Policy "default-src 'self';" always;
|
|
||||||
add_header X-Frame-Options SAMEORIGIN always;
|
|
||||||
add_header "X-XSS-Protection" "1";
|
|
||||||
add_header X-Content-Type-Options nosniff ;</code></pre>
|
|
||||||
|
|
||||||
<h2>Gzip Compression</h2>
|
|
||||||
<p>Compressing data that is sent to the client is a simple way to save some bandwidth, and gain a bit of speed</p>
|
|
||||||
<pre><code>sudo vim /etc/nginx/nginx.conf</code></pre>
|
|
||||||
<p>This goes within the http block, there is likely already a gzip section, so find it and replace with the below. Otherwise just add to the http block.</p>
|
|
||||||
<pre><code>##
|
|
||||||
# Gzip Settings
|
|
||||||
##
|
|
||||||
|
|
||||||
gzip on ;
|
|
||||||
gzip_disable "msie6" ;
|
|
||||||
gzip_min_length 256 ;
|
|
||||||
|
|
||||||
gzip_vary on ;
|
|
||||||
gzip_proxied any ;
|
|
||||||
gzip_comp_level 6 ;
|
|
||||||
gzip_buffers 16 8k ;
|
|
||||||
gzip_http_version 1.1 ;
|
|
||||||
|
|
||||||
gzip_types
|
|
||||||
application/atom+xml
|
|
||||||
application/geo+json
|
|
||||||
application/javascript
|
|
||||||
application/x-javascript
|
|
||||||
application/json
|
|
||||||
application/ld+json
|
|
||||||
application/manifest+json
|
|
||||||
application/rdf+xml
|
|
||||||
application/rss+xml
|
|
||||||
application/xhtml+xml
|
|
||||||
application/xml
|
|
||||||
font/eot
|
|
||||||
font/otf
|
|
||||||
font/ttf
|
|
||||||
image/svg+xml
|
|
||||||
text/css
|
|
||||||
text/javascript
|
|
||||||
text/plain
|
|
||||||
text/xml
|
|
||||||
;</code></pre>
|
|
||||||
|
|
||||||
<h3>TODO: Brotli Compression</h3>
|
|
||||||
<p>Brotli is a new less used contender in the web compression space, but I've heard good things. I'll add this section once I've tested performance vs gzip myself</p>
|
|
||||||
|
|
||||||
<h2>TODO: SSL Tweaks</h2>
|
|
||||||
|
|
||||||
<h2>HTTP/2</h2>
|
|
||||||
<p>The newer standard of HTTP. It allows for parallel downloading, and other niceities. I believe Certbot does this for you when setting up SSL for a site, but if that changes, or you've used a different SSL cert, you can set this manually.</p>
|
|
||||||
<pre><code>sudo vim /etc/nginx/sites-available/<WEBSITE_CONFIG></code></pre>
|
|
||||||
<p>Alter the existing listen lines to append http2</p>
|
|
||||||
<pre><code>listen 443 ;</pre></code>
|
|
||||||
<p>to</p>
|
|
||||||
<pre><code>listen 443 http2 ;</pre></code>
|
|
||||||
<p>After an nginx reload, this can be checked, by looking for HTTP/2 being returned by the below curl command</p>
|
|
||||||
<pre><code>curl -I -L https://<WEBSITE></code></pre>
|
|
||||||
|
|
||||||
<h2>TODO: Cache Files, and Images</h2>
|
|
||||||
<p></p>
|
|
||||||
|
|
||||||
<h2>TODO: Limit requests</h2>
|
|
||||||
<p>To prevent potential DOS attacks, and web scrapers the amount of requests/connections per IP can be reduced</p>
|
|
||||||
|
|
||||||
<h2>TODO: Redirect www/non-www to each other</h2>
|
|
||||||
<p>People still type www. before a domain, even if it's not required. Cringe</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, template">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Template for Blog</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Template for Blog</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">This is an intro, you gotta believe me</p>
|
|
||||||
<h2>Heading</h2>
|
|
||||||
<p>Yea, you're probably wondering how I got here.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,139 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A guide on how do a fresh install of Debian, with some personal bias from me">
|
|
||||||
<meta name="keywords" content="Blog, articles, debian, install, linux">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Debian Install Guide (for Servers)</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Debian Install Guide for Servers</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">Debian is a fantastic linux distrubution that works, and rarely causes issues. Due to this, it is a common canditate for a server OS, and is what this guide will walkthrough how to install on a PC.</p>
|
|
||||||
<h2>Assumptions</h2>
|
|
||||||
<p>You have a PC/laptop with an internet connection<p>
|
|
||||||
<p>You have a PC/laptop/VM to install Debian to<p>
|
|
||||||
<p>You have a USB that can be rewritten with the debian ISO<p>
|
|
||||||
<p>You're on a network with DHCP (the typical home network will be)</p>
|
|
||||||
<p>Currently assumes you boot via BIOS, not UEFI (Will be updated for UEFI too)</p>
|
|
||||||
|
|
||||||
<h2>Download and Burn the ISO</h2>
|
|
||||||
<p>First thing is to get the install media setup. If you know how to burn an ISO, go ahead and get that done, I'll wait for you in the next section. If not follow below.</p>
|
|
||||||
<p>Download the latest debian ISO from the <a href="https://www.debian.org/distrib/" target="_blank" rel="noopener">debian distrubution page</a>, at the time of writing it's <a href="https://cdimage.debian.org/debian-cd/current/amd64/iso-cd/debian-12.2.0-amd64-netinst.iso" target="_blank" rel="noopener">this release</a> (assuming you're installing on a 64bit PC), but get it from their page.</p>
|
|
||||||
<p>Download <a href="https://etcher.balena.io/" target="_blank" rel="noopener">Balena Etcher</a> for your device (Windows, MacOS, Linux), and install it</p>
|
|
||||||
<p>Then open Etcher (with an empty USB plugged in), select the USB, and the downloaded ISO image, then hit run.</p>
|
|
||||||
<p>When finished remove the USB and plug it into the PC you want to install Debian to</p>
|
|
||||||
|
|
||||||
<h2>Boot from the USB</h2>
|
|
||||||
<p>You may be able to just plug the USB in, boot the PC, and be greeted with the installer. If so great! If not, then read on.</p>
|
|
||||||
<h3>BIOS boot order</h3>
|
|
||||||
<p>When your PC boots you should see a screen with a logo (a splash screen), hit a one of the button it tells you (Normally Esc, Del, F2, F3, or F12) to enter the bios. Find your bios's boot section, and move the USB to boot priority 1. After a reboot your PC will now always attempt to boot from your USB first, and from your internal drive if it cannot.</p>
|
|
||||||
<h3>One time boot</h3>
|
|
||||||
<p>Like above, press the key to get into either a one-time boot menu, or the bios. From there select your USB as a boot override. This will boot from the USB just this time, and then revert to the normal boot order.</p>
|
|
||||||
|
|
||||||
<h2>Start install</h2>
|
|
||||||
<p>When you're greeted by a debian boot page, select "Install" (that's what I'll be using) but "Graphical Install" is also fine, as it's essentially the same thing, but you can use a mouse.</p>
|
|
||||||
|
|
||||||
<h2>Localisation</h2>
|
|
||||||
<p>As if you are filling out an online form, simply ensure the boxes are correct to your language, location (sets time, and download servers), and keyboard layout.</p>
|
|
||||||
|
|
||||||
<h3>Hostname</h3>
|
|
||||||
<p>What you wish to call your server, I like to give names that are quirky, but still kinda explain what they do. For example, some names I've used are "spiderverse" for a web server, and "lilnas" for a NAS, etc.</p>
|
|
||||||
<h3>Domain name</h3>
|
|
||||||
<p>Leave this as default "home", and hit continue.</p>
|
|
||||||
|
|
||||||
<h2>Set up users and password</h2>
|
|
||||||
<p>The first thing you'll see is a screen asking for a root password.</p>
|
|
||||||
<h3>Don't set a root password</h3>
|
|
||||||
<p>Simply hit the <strong><kbd>Enter</kbd></strong> key, then again when it asks for the password the second time. A root user with a password is a vulnerability, so we're avoiding this.</p>
|
|
||||||
<h3>Create your user (admin account)</h3>
|
|
||||||
<p>Now enter your username, and password as the installer requests.</p>
|
|
||||||
<p>This account will be added to the sudo group, making it an admin with that can act as the root user.</p>
|
|
||||||
|
|
||||||
<h2>Disk Partitioning</h2>
|
|
||||||
<p>For this I am assume you're using a new drive, or at least one that you don't want any of the data on it</p>
|
|
||||||
<h3>Guided/Auto-partitioning</h3>
|
|
||||||
<p>You can do this, and it's recommended if you're new to linux. Once you've got the hang of it, you can always re-install your server from scratch (I recommend this a couple of times if it's non-integral).</p>
|
|
||||||
<p>Select <em>Guided - use entire disk</em> then select the drive you want to boot from.</p>
|
|
||||||
<p>Then select <em>All files in one partition (recommended for new users)</em>, as it's the simplest option.</p>
|
|
||||||
|
|
||||||
<h3><del>Manual Partitioning</del></h3>
|
|
||||||
<p>I've opted to leave this out, as it's a beginner guide. If you're reading this though I typically don't create a swap partition, but the guided installer does. It's no problem, but following this guide makes it redundant.</p>
|
|
||||||
|
|
||||||
<h3>(Optional) Preferences</h3>
|
|
||||||
<p>With your disk partitioned select the partion that has a <strong>/</strong> at the far right, and hit <kbd>Enter</kbd>.</p>
|
|
||||||
<p>Go to <em>Mount Options</em>, and select (using <kbd>Space</kbd>) <em>noatime</em>, and <em>nodiratime</em>. Then hit <kbd>Enter</kbd>, and select <em>Done setting up the partition</em>.</p>
|
|
||||||
|
|
||||||
<h3>Finalising Partitioning</h3>
|
|
||||||
<p>Simply hit <kbd>Enter</kbd> on <em>Finish partitioning and write changes to disk</em> at the bottom of the page.</p>
|
|
||||||
<p>Another screen will appear to verify you wish to partition, hit <em>Yes</em>, and it'll begin partitioning. Give it a little time.</p>
|
|
||||||
|
|
||||||
<h3>Configure the package manager</h3>
|
|
||||||
<p>A simple one, select your country, hit enter to the top selection, hit enter again when it asks for a proxy (unless you know what you're doing), and sorted.</p>
|
|
||||||
|
|
||||||
<h2>Popularity Contest</h2>
|
|
||||||
<p>I typically select <em>No</em> here, but read what it is and select for yourself.</p>
|
|
||||||
|
|
||||||
<h2>Software Selection</h2>
|
|
||||||
<p>Now tasksel will load up, and ask if you want any software installed during setup.</p>
|
|
||||||
<p>I choose to deselect everything pre-selected (the ones with asterisks), however for a new setup keeping <em>standard system utilities</em> is a-ok.</p>
|
|
||||||
<p>If you're after a GUI experience you can select <em>Xfce</em> as it's pretty lightweight, however I'd recommend going with no GUI for a server.</p>
|
|
||||||
<p>Once you've selected what to install, hit <kbd>Enter</kbd>.</p>
|
|
||||||
|
|
||||||
<h2>Reboot, and enjoy!</h2>
|
|
||||||
<p>Reboot your server, and tada!</p>
|
|
||||||
|
|
||||||
<h2>Setup Swap</h2>
|
|
||||||
<p>I mentioned earlier I don't setup a swap partition, and that it'd be redundant if you follow this guide, so here we go.</p>
|
|
||||||
<p>Swap sizes vary per PC as different services use more RAM, etc. A decent(ish) rule of thumb is to set half your RAM size as the swap size, but to be honest 8GB will likely suffice.</p>
|
|
||||||
<h3>Create the swap file</h3>
|
|
||||||
<pre><code>sudo fallocate -l 8G /swapfile</code></pre>
|
|
||||||
<h3>Set permissions</h3>
|
|
||||||
<pre><code>sudo chmod 600 /swapfile</code></pre>
|
|
||||||
<h3>Set the file as a swap area</h3>
|
|
||||||
<pre><code>sudo mkswap /swapfile && sudo swapon /swapfile</code></pre>
|
|
||||||
<h3>Set on boot</h3>
|
|
||||||
<p>Open <strong>/etc/fstab</strong> with a text editor. I'll use vi for this.</p>
|
|
||||||
<pre><code>sudo vi /etc/fstab</code></pre>
|
|
||||||
<p>Press <kbd>g<kbd><kbd>g<kbd>, followed by <kbd>Shift</kbd>+<kbd>o</kbd>, then type the following.</p>
|
|
||||||
<pre><code>/swapfile swap swap defaults 0 0</code></pre>
|
|
||||||
<p>Then press <kbd>esc</kbd>, followed by <kbd>shift</kbd>+<kbd>Z</kbd><kbd>Z</kbd>.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<h2>Next steps</h2>
|
|
||||||
<p>Now that you've got a basic Debian install, you'll need to configure, and install a few things. I've written a little something, somthing like that, so check <a href="/guides/initial-server-setup.html">how to setup a new server install</a></p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="This will cover how to set a static IP address for your linux computer">
|
|
||||||
<meta name="keywords" content="Blog, articles, linux, networking, guide">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Set a static IP (Guide)</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>How to set a static IP</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">For those that don't know a static IP is an IP address that doesn't change on reboots, etc. The opposite of a dynamic IP, which can change on reboots, and is the default mode for computers to get an IP (via DHCP).</p>
|
|
||||||
|
|
||||||
<h2>Get your network</h2>
|
|
||||||
<p>If you don't know what network/range of ports you're on, check first by following the below. If you do, and this is a flash-card of sorts, ignore this section.</p>
|
|
||||||
<pre><code>ip a</code></pre>
|
|
||||||
<p>You can likely gauge from this, what network you're on, as most routers default to a single range, with the router being the first address on that range<p>
|
|
||||||
<p>So... If your <strong>ip a</strong> shows <u>192.168.1</u>.xxx (after the last dot doesn't matter), I assume your address will need to be <u>192.168.1.</u>x, and your gateway will be <u>192.168.1</u>.1</p>
|
|
||||||
|
|
||||||
<h2>Set your static IP</h2>
|
|
||||||
<p>Open up the <strong>/etc/network/interfaces</strong> file with your editor of choice</p>
|
|
||||||
<pre><code>sudo vim /etc/network/interfaces</code></pre>
|
|
||||||
<p>And edit the file to look a little something like below. If that's a little difficult to understand, read on</p>
|
|
||||||
<pre><code>auto enp2s0
|
|
||||||
iface enp2s0 inet static
|
|
||||||
address 192.168.1.226
|
|
||||||
netmask 255.255.255.0
|
|
||||||
gateway 192.168.1.1
|
|
||||||
dns-namespaces 192.168.1.1 8.8.8.8 8.8.4.4</code></pre>
|
|
||||||
|
|
||||||
<h3>1) Set static network device</h3>
|
|
||||||
<p>Change the iface for your network device from</p>
|
|
||||||
<pre><code>iface enp2s0 inet dhcp</code></pre>
|
|
||||||
<p>to</p>
|
|
||||||
<pre><code>iface enp2s0 inet static</code></pre>
|
|
||||||
<p>Substituting enp2s0 for whatever your device is called. This device will pre-exist in the file, but can also be found with the following command</p>
|
|
||||||
<pre><code>ip a</code></pre>
|
|
||||||
|
|
||||||
<h3>2) Add your network details</h3>
|
|
||||||
<p>Below the editted line, add the following, based on your network (slightly mentioned in the very first section)</p>
|
|
||||||
<pre><code>address 192.168.1.220</code></pre>
|
|
||||||
<p>This is the IP that you want your PC to have, the number after the final dot, can be between (inclusively) 2, and 254</p>
|
|
||||||
<p>Followed by (on a new line)<p>
|
|
||||||
<pre><code>netmask 255.255.255.0</code></pre>
|
|
||||||
<p>This is an assumption about the average home network<p>
|
|
||||||
<p>Then, again on a new line<p>
|
|
||||||
<pre><code>gateway 192.168.1.1</code></pre>
|
|
||||||
<p>Another assumption, but this is your routers IP, that traditionally sits at the first IP</p>
|
|
||||||
|
|
||||||
<h3>3) Add your dns details</h3>
|
|
||||||
<p>I've seperated this out, as this is a common point of failure for setting a static IP, so make sure this is gucci<p>
|
|
||||||
<p>So below the address, etc. Add this line<p>
|
|
||||||
<pre><code>dns-namespaces 8.8.8.8 8.8.4.4</code></pre>
|
|
||||||
<p>This basically tells your PC where to look to find domain names<p>
|
|
||||||
|
|
||||||
<h2>Restart your networking service</h2>
|
|
||||||
<p>Now restarting your networking service (or entire PC if you so desire) will set your computer's IP to that in the <strong>/etc/network/interfaces</strong> file.</p>
|
|
||||||
<p>Simply use the command below, and voila</p>
|
|
||||||
<pre><code>sudo systemctl restart networking</code></pre>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="To keep control of your version control, and not be reliant on any third parties, a git server can be easily self hosted. Side benefit, you don't need to install anything on your server other than git, and ssh.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Git server setup</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Git server setup</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">Self-hosted version control is great way to not be dependant of a third party to keep your git server up, or your code secure.</p>
|
|
||||||
|
|
||||||
<h2>Install Git</h2>
|
|
||||||
<p>Many Unix operating systems have git installed by default, but if not it's a simple command.</p>
|
|
||||||
<pre><code>sudo apt install git</code></pre>
|
|
||||||
|
|
||||||
<h2>Create a git user</h2>
|
|
||||||
<p>This user will be used to push/pull all your git repos</p>
|
|
||||||
<pre><code>sudo useradd -m git -d /srv/git -s /bin/bash</code></pre>
|
|
||||||
<p>Change <strong>/srv/git</strong> to the location you wish to hold your repositories.</p>
|
|
||||||
|
|
||||||
<h2>Create a repo</h2>
|
|
||||||
<p>With the user, and directory created next you'll need to create a repo.</p>
|
|
||||||
<p><em>This step will need to be repeated for each new repo you create.</em></p>
|
|
||||||
<pre><code>git init --bare repo.git</code></pre>
|
|
||||||
|
|
||||||
<h2>Enable SSH</h2>
|
|
||||||
<p>Next you'll need to set up SSH for the git user.</p>
|
|
||||||
<h3>Install and Enable SSH (If not already done)</h3>
|
|
||||||
<pre><code>sudo apt install ssh && sudo systemctl enable ssh --now</code></pre>
|
|
||||||
<h3>Create ssh key for git user</h3>
|
|
||||||
<pre><code>ssh-keygen -t ed25519</code></pre>
|
|
||||||
|
|
||||||
<h2>Use the git server</h2>
|
|
||||||
<p>With all the setup out the way, the git server is now usable as a remote for any of your git repos.</p>
|
|
||||||
<p>So on another PC, you can use git as normal. For example.</p>
|
|
||||||
<h3>Add remote to existing repo</h3>
|
|
||||||
<pre><code>git remote add origin git@<your-server>:/<repo.git></code></pre>
|
|
||||||
<h3>Clone the repo</h3>
|
|
||||||
<pre><code>git clone git@<your-server>/:<repo.git></code></pre>
|
|
||||||
|
|
||||||
<h3>Different SSH port</h3>
|
|
||||||
<p>If you are using a different ssh port for your server hosting git, you'll need to add the following after the colon (:) to the two previous commands</p>
|
|
||||||
<pre><code><port></code></pre>
|
|
||||||
<p>Giving you something like this</p>
|
|
||||||
<pre><code>git clone git@<your-server>:<port>/<repo.git></code></pre>
|
|
||||||
|
|
||||||
<h2>Completed</h2>
|
|
||||||
<p>From here you can use git as you would via any other provider, but with the knowledge that your remote is yours.</p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="This guide covers how to set a KVM bridge network for use with Virtual Machines">
|
|
||||||
<meta name="keywords" content="Blog, articles, template">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Setup a bridge network for KVM</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Setup a bridge network for KVM</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">A bridge network is a means to connect/bridge different networks together to act as a single network. In this case, it allows any virtual connections to the bridge network to get their own internal IPs, as if plugged into the network directly.</p>
|
|
||||||
|
|
||||||
<h2>Install bridge-utils</h2>
|
|
||||||
<pre><code>sudo apt install bridge-utils</code></pre>
|
|
||||||
|
|
||||||
<h2>Find the network device to bridge</h2>
|
|
||||||
<p>First we need to find the network device we want to bridge to the VMs.</p>
|
|
||||||
<pre><code>ip link</code></pre>
|
|
||||||
<p>You'll likely have a device called something similar to <strong>enp1s0</strong>, or <strong>eth0</strong>.</p>
|
|
||||||
|
|
||||||
<h2>Create the bridge network</h2>
|
|
||||||
<p>This will be familiar to those who have <a href="/guides/set-static-ip.html">set a static ip</a> on linux, as it's essentially the same, with a few additional lines related to bridging</p>
|
|
||||||
<h3>Remove interface from interfaces file</h3>
|
|
||||||
<p>First step is to remove any references to your network device from <strong>/etc/network/interfaces</strong>, if this file is untouched there will likely be two lines at the bottom.</p>
|
|
||||||
<pre><code>sudo vim /etc/network/interfaces</code></pre>
|
|
||||||
|
|
||||||
<h3>Create a new bridge interface</h3>
|
|
||||||
<p>Now create a file in the <strong>/etc/network/interfaces.d/</strong> directory, with the name of your bridge (I like <strong>br0</strong>).</p>
|
|
||||||
<h4>Static IP</h4>
|
|
||||||
<pre><code>auto br0
|
|
||||||
iface br0 inet static # Name the same as your file (br0)
|
|
||||||
address 192.168.0.100
|
|
||||||
broadcast 192.168.0.255
|
|
||||||
netmask 255.255.255.0
|
|
||||||
gateway 192.168.0.1 # Normally your router's IP
|
|
||||||
dns-nameservers 192.168.0.1 8.8.8.8 8.8.4.4 # Don't set if resolveconf is installed, comment if internet borked
|
|
||||||
bridge_ports enp1s0 # Your device name
|
|
||||||
bridge_stp off # Disable Spanning Tree Protocol
|
|
||||||
bridge_waitport 0 # No delay before a port becomes available
|
|
||||||
bridge_fd 0 # No forwarding delay (Connects to network immediately)</code></pre>
|
|
||||||
<h4>Dynamic IP</h4>
|
|
||||||
<pre><code>iface br0 inet dhcp
|
|
||||||
bridge_ports enp2s0</code></pre>
|
|
||||||
|
|
||||||
<h2>(Optional) Create Virtual Network</h2>
|
|
||||||
<p>To make it easier to manage with VMs, this new bridge can also be made into a Virtual Network (Basically so you can select it from a dropdown).</p>
|
|
||||||
<h3>Create XML file</h3>
|
|
||||||
<p>Open up a text-editor, and create a file called <strong>br0.xml</strong>, named after the bridge itself.</p>
|
|
||||||
<pre><code>vim br0.xml</code></pre>
|
|
||||||
<p>Enter the following, then save</p>
|
|
||||||
<pre><code><network>
|
|
||||||
<name>br0</name>
|
|
||||||
<forward mode="bridge"/>
|
|
||||||
<bridge name="br0"/>
|
|
||||||
</network></code></pre>
|
|
||||||
|
|
||||||
<h3>Create the virtual network</h3>
|
|
||||||
<pre><code>sudo virsh net-define br0.xml</code></pre>
|
|
||||||
<p>Activate, and auto-start (on boot) the new network.</p>
|
|
||||||
<pre><code>sudo virsh net-start br0</code></pre>
|
|
||||||
<pre><code>sudo virsh net-autostart br0</code></pre>
|
|
||||||
<p>You can now remove the br0.xml file.</p>
|
|
||||||
|
|
||||||
<h2>Reload the network</h2>
|
|
||||||
<pre><code>sudo systemctl restart networking</code></pre>
|
|
||||||
<p>This may claim to have failed, but if checking with <strong>ip link</strong> shows the bridge, reboot. Essentially the bridge has been brought up, and it's trying to bring it up again (and can't), then throws an error.</p>
|
|
||||||
<pre><code>sudo reboot</code></pre>
|
|
||||||
|
|
||||||
<h3>Check it's there</h3>
|
|
||||||
<p>Run some checks and you should now see br0, with an IP4 address.</p>
|
|
||||||
<pre><code>ip a</code></pre>
|
|
||||||
<pre><code>ping google.co.uk</code></pre>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Useful Links</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://ostechnix.com/how-to-find-available-network-interfaces-on-linux/">OSTechNix - Find available network interfaces</a></li>
|
|
||||||
<li><a href="https://www.cyberciti.biz/faq/how-to-configuring-bridging-in-debian-linux/">CyberCiti - Configure bridging in debian</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A guide to setting up an nginx website pointed at a domain/subdomain">
|
|
||||||
<meta name="keywords" content="Blog, articles, NGINX, web server, guide, website">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>How to setup an NGINX website</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>How to setup an NGINX website</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>Nginx has the ability to host multiple websites, all at different domains/sub-domains. This guide will show you how to point a domain at the server, and display a different website than the default NGINX page.</p>
|
|
||||||
<h2>Make the domain point to the server</h2>
|
|
||||||
<p>In your domains DNS records ensure that the domain/sub-domain is pointing to the servers IP address, otherwise NGINX won't get told to serve the website</p>
|
|
||||||
|
|
||||||
<h2>Create the website directory</h2>
|
|
||||||
<p>We need to create a directory for the website to live, and add a basic webpage to it. Websites typically live in <strong>/var/www/</strong> but sometimes in users home directories, or elsewhere. We'll stick with the former</p>
|
|
||||||
|
|
||||||
<h2>Change directory permissions to www-user</h2>
|
|
||||||
<p>Nginx's default group is www-user, so to serve the website we'll grant permissions to www-user</p>
|
|
||||||
<h3>Add user account to www-user</h3>
|
|
||||||
<p>Make it easier...</p>
|
|
||||||
|
|
||||||
<h2>Create an nginx site config</h2>
|
|
||||||
<p>To get nginx to check the domain, and return the correct website, we need to configure it to do so</p>
|
|
||||||
<p>Create a file in</p>
|
|
||||||
<pre><code>/etc/nginx/sites-available/<DOMAIN-NAME></code></pre>
|
|
||||||
<p>Containing the contents below. This will set the server to listen on port 80 (http) for any requests from the domain name set. It will then direct the root domain to the directory in root, and set the index page the file index.html, or index.htm if the former wasn't found</p>
|
|
||||||
<pre><code>server {
|
|
||||||
listen 80 default ;
|
|
||||||
listen [::]:80 ;
|
|
||||||
server_name <DOMAIN-NAME> ;
|
|
||||||
|
|
||||||
location / {
|
|
||||||
root /var/www/<DOMAIN-NAME> ;
|
|
||||||
index index.html index.htm ;
|
|
||||||
}</code></pre>
|
|
||||||
<h3>Create a symlink to sites-enables</h3>
|
|
||||||
<p>Now to get nginx to check this config we'll need to symlink it to from sites-available, to sites-enabled</p>
|
|
||||||
<pre><code>sudo ln -s /etc/nginx/sites-available/<DOMAIN-NAME> /etc/nginx/sites-enabled/</code></pre>
|
|
||||||
<h3>Reload nginx</h3>
|
|
||||||
<pre><code>sudo systemctl reload nginx</code></pre>
|
|
||||||
<p>If the above command fails, you can check your nginx config for errors with</p>
|
|
||||||
<pre><code>sudo nginx -t</code></pre>
|
|
||||||
<p>Then once any errors have been fixed, reload nginx again, and it should be good to go</p>
|
|
||||||
|
|
||||||
<h2>Add a basic webpage</h2>
|
|
||||||
<p>So we can tell the config is working, we'll add a basic webpage.</p>
|
|
||||||
|
|
||||||
<h2>Check the website</h2>
|
|
||||||
<p>In your browser enter the domain name we've just setup in nginx, and you'll see that the basic HTML page we've created is being displayed</p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, template, guide, KVM, QEMU, virtualisation">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Setup QEMU/KVM virtualisation</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Setup QEMU/KVM virtualisation</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">Virtualisation is the act of creating a virtualised computer (guest), inside another computer (the host) by sharing the hardware. This allows a single host the ability to run all your services, whilst keeping a level of <a href="/guides/vm-seperation-of-concerns">SoC</a>.</p>
|
|
||||||
|
|
||||||
<h2>Enable in the BIOS</h2>
|
|
||||||
<p>To run virtual machines, certain flags in the bios need to be set. If you don't want to bring down an existing server to check, then check the next section first.</p>
|
|
||||||
<ul>
|
|
||||||
<li>Reboot your PC</li>
|
|
||||||
<li>At the BIOS splashscreen, press your motherboard's prefered key (typically <kbd>ESC</kbd>, <kbd>F3</kbd>, or <kbd>F12</kbd>).</li>
|
|
||||||
<li>Find and enable the virtualisation setting(s).
|
|
||||||
<ul>
|
|
||||||
<li>One of VT-x, AMD-V, SVM, or Vanderpool.</li>
|
|
||||||
<li>One of Intel VT-d, or AMD IOMMU (if available)</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Check Virtualisation is enabled</h2>
|
|
||||||
<p>Double check to make sure your server can be used for virtualisation, if you've enabled it in the BIOS it should be good. Just run one of the following command</p>
|
|
||||||
<pre><code>lscpu | grep 'Virtualization'</code></pre>
|
|
||||||
<pre><code>grep -E --color '(vmx|svm)' /proc/cpuinfo</code></pre>
|
|
||||||
|
|
||||||
<h2>Install the packages</h2>
|
|
||||||
<p>The easiest part, just copy and paste the below to install the required packages.</p>
|
|
||||||
<pre><code>sudo apt install qemu-kvm libvirt-clients libvirt-daemon libvirt-daemon-system virtinst</code></pre>
|
|
||||||
|
|
||||||
<h2>Sessions</h2>
|
|
||||||
<p>There are two different session types for VMs, user, and system sessions. If you are using a desktop, and intend to virtualise other desktop OSs I recommend user sessions. If you're setting up a server hypervisor, then use System sessions.</p>
|
|
||||||
|
|
||||||
<h3>User Session</h3>
|
|
||||||
<p>A user session VM is what I recommend for personal PCs, laptops, etc. as it's the best option for desktop virtualisation (e.g. a Kali install for l33t hackers).</p>
|
|
||||||
|
|
||||||
<h4>Add user to group</h4>
|
|
||||||
<pre><code>sudo adduser $USER libvirt</code></pre>
|
|
||||||
|
|
||||||
<h4>Enable default network</h4>
|
|
||||||
<p>Check the name of your default network (typically just 'default').</p>
|
|
||||||
<pre><code>sudo virsh net-list --all</code></pre>
|
|
||||||
<p>Enable the network.</p>
|
|
||||||
<pre><code>sudo virsh net-start default</code></pre>
|
|
||||||
<p>(Optionally) Set it to turn on with system boot.</p>
|
|
||||||
<pre><code>sudo virsh net-autostart default</code></pre>
|
|
||||||
|
|
||||||
<h3>System Session</h3>
|
|
||||||
<p>For now all that's needed to know is that you run sudo before any virsh commands, and that the VMs will launch with root permissions.</p>
|
|
||||||
|
|
||||||
<h2>Extra</h2>
|
|
||||||
<p><a href="/guides/setup-kvm-bridge.html">Setup bridge adapter for KVM</a></p>
|
|
||||||
<p><a href="/guides/kvm-optimisation.html">Optimisations for KVM Virtual Machines</a></p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="Basic SQL cheatsheet for the commandline.">
|
|
||||||
<meta name="keywords" content="Blog, articles, guide, mysql, mariadb, database">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>SQL Cheatsheet</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>SQL Cheatsheet</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>SQL is a great, simple to use language to manipulate data within a database. This cheatsheet is aimed at basic SQL for MySQL/MariaDB.</p>
|
|
||||||
|
|
||||||
<h2>Access on the command line</h2>
|
|
||||||
<pre><code>mysql -u <USERNAME> -p</code></pre>
|
|
||||||
<p>When prompted enter your password</p>
|
|
||||||
|
|
||||||
<h2>Database manipulation</h2>
|
|
||||||
<h3>Show databases</h3>
|
|
||||||
<pre><code>SHOW databases;</code></pre>
|
|
||||||
|
|
||||||
<h3>Create new databases</h3>
|
|
||||||
<pre><code>CREATE DATABASE IF NOT EXISTS <DATABASE>;</code></pre>
|
|
||||||
|
|
||||||
<h3>Enter into a database</h3>
|
|
||||||
<pre><code>USE DATABASE <DATABASE>;</code></pre>
|
|
||||||
<p>or just</p>
|
|
||||||
<pre><code>USE <DATABASE>;</code></pre>
|
|
||||||
|
|
||||||
<h2>Table manipulation</h2>
|
|
||||||
<p>Once you've got a database selected, you can play with tables</p>
|
|
||||||
<h3>Create</h3>
|
|
||||||
<h3>Read</h3>
|
|
||||||
<h3>Update</h3>
|
|
||||||
<h3>Delete</h3>
|
|
||||||
|
|
||||||
<h2>Data manipulation</h2>
|
|
||||||
<p>Most of your SQL life will be CRUDing (Create, Read, Update, Delete) data. So I'll cover the basics here</p>
|
|
||||||
<h3>Create</h3>
|
|
||||||
<h3>Read</h3>
|
|
||||||
<h3>Update</h3>
|
|
||||||
<h3>Delete</h3>
|
|
||||||
|
|
||||||
<h2>Create additional users</h2>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, guide, cheatsheet, virsh, virtual machine">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Virsh Cheatsheet</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Virsh Cheatsheet</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">Virsh is an extremely powerful tool for managing KVM/QEMU virtual machines. From restarting, to changing hardware, snapshotting, and cloning machines. I'll cover the basics of Virsh here, as it's all I personally use.</p>
|
|
||||||
<h2>List VMs</h2>
|
|
||||||
<pre><code>virsh list</code></pre>
|
|
||||||
<p>List all, including offline vms</p>
|
|
||||||
<pre><code>virsh list --all</code></pre>
|
|
||||||
|
|
||||||
<h2>Start/Stop</h2>
|
|
||||||
<pre><code>virsh start $vm</code></pre>
|
|
||||||
<pre><code>virsh shutdown $vm</code></pre>
|
|
||||||
<pre><code>virsh reboot $vm</code></pre>
|
|
||||||
<p>If the VM refuses to shutdown, etc. destroy performs an ungraceful shutdown</p>
|
|
||||||
<pre><code>virsh destroy $vm</code></pre>
|
|
||||||
|
|
||||||
<h3>Autostart</h3>
|
|
||||||
<pre><code>virsh autostart $vm</code></pre>
|
|
||||||
<pre><code>virsh autostart $vm --disable</code></pre>
|
|
||||||
|
|
||||||
<h2>Rename</h2>
|
|
||||||
<pre><code>virsh domrename $vm $new_name</code></pre>
|
|
||||||
|
|
||||||
<h2>Delete</h2>
|
|
||||||
<pre><code>virsh undefine $vm</code></pre>
|
|
||||||
<h3>Delete Snapshots</h3>
|
|
||||||
<p>If your VM has Snapshots it won't delete as simply, so delete those first<p>
|
|
||||||
<p>List the snapshots</p>
|
|
||||||
<pre><code>virsh snapshot-list --domain $vm</code></pre>
|
|
||||||
<p>And delete each snapshot with the following</p>
|
|
||||||
<pre><code>virsh snapshot-delete --domain $vm --snapshotname $snapshot</code></pre>
|
|
||||||
<h3>Deleting with all storage</h3>
|
|
||||||
<p>Delete the VM along with all the virtual storage</p>
|
|
||||||
<pre><code>virsh undefine --domain $vm --remove-all-storage</code></pre>
|
|
||||||
|
|
||||||
<h2>Snapshots</h2>
|
|
||||||
<h3>Create</h3>
|
|
||||||
<p>Save a snapshot of the VMs current state</p>
|
|
||||||
<pre><code>virsh snapshot-create-as --domain $vm --name "$snapshot_name"</code></pre>
|
|
||||||
<h3>Restore/Revert</h3>
|
|
||||||
<p>Revert the VM to the state it was in during the snapshot</p>
|
|
||||||
<pre><code>virsh snapshot-revert $vm $snapshot_name</code></pre>
|
|
||||||
<h3>Delete Snapshot</h3>
|
|
||||||
<p>Delete the snapshot, this doesn't delete anything else related to the VM</p>
|
|
||||||
<pre><code>virsh snapshot-delete --domain $vm --snapshotname $snapshot_name</code></pre>
|
|
||||||
|
|
||||||
<h2>(TODO)Drive management</h2>
|
|
||||||
<h3>Resize virtual drives</h3>
|
|
||||||
<p>Find the name of your drive.</p>
|
|
||||||
<pre><code>virsh domblklist $vm</code></pre>
|
|
||||||
<p>Resize with qemu</p>
|
|
||||||
<pre><code>sudo qemu-img resize /location/drive.qcow2 +10G</code></pre>
|
|
||||||
|
|
||||||
<h2>Change Memory</h2>
|
|
||||||
<p>In variantions of 512M, 1G, etc</p>
|
|
||||||
<pre><code>virsh setmem $vm $ram</code></pre>
|
|
||||||
<p>The amount of RAM the VM has assigned to it, this cannot be higher than the max, but can be altered on the fly (if I recall correctly).</p>
|
|
||||||
<pre><code>virsh setmaxmem $vm $ram</code></pre>
|
|
||||||
<p>The max mem sets the maximum amount of RAM the VM can use, and can only be set whilst the VM is offline</p>
|
|
||||||
<p>My recommendation here is to set a higher maxmem than you'd need, so if you do need to add some more RAM, it doesn't require any downtime.<p>
|
|
||||||
|
|
||||||
<h2>Change vCPU cores</h2>
|
|
||||||
<p>This is a little more tricky, as it involves editing the XML file</p>
|
|
||||||
<pre><code>virsh edit $vm</code></pre>
|
|
||||||
<p>Then edit the vcpus section, change between the tags</p>
|
|
||||||
<pre><code><vcpu placement='static'>$vcpus</vcpu></code></pre>
|
|
||||||
|
|
||||||
<h2>Connect via serial/console</h2>
|
|
||||||
<p>This is a means to connect to your VMs via terminal</p>
|
|
||||||
<pre><code>virsh console $vm</code></pre>
|
|
||||||
<p>To do this you will likely need to first run the following command on the VM itself. This won't be required if you created the VM with console, but best to double check.</p>
|
|
||||||
<pre><code>systemctl enable serial-getty@ttyS0.service</code></pre>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,91 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="keywords" content="Blog, articles, virtual machines, seperation of concerns, SoC, optimise">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>VM/Server Seperation of Concerns</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>VM/Server Seperation of Concerns</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p class="intro">Seperation of Concerns is a principle used in Computer Science that helps seperate functionality, making things easier to work with, and avoiding issues that could occur with too much going on in one place</p>
|
|
||||||
<h2>Why seperate concerns for a server?</h2>
|
|
||||||
<p>Simple, once your server has a lot of services, and functionality going on, it gets hard to maintain, and can cause additional issues. For example, if a service dies and requires a reboot, that will end up rebooting all your other services too.</p>
|
|
||||||
|
|
||||||
<h2>How to seperate concerns</h2>
|
|
||||||
<p>Some people will seperate each service into their own VM, however I don't believe this to be efficient (in all cases).</p>
|
|
||||||
<p>What I recommend is to take your server needs, and break them down into logical blocks, adding each of these blocks to their own VMs. This will keep certain things contained alone, as you want them seperated as much as possible (NAS, etc).</p>
|
|
||||||
<div class="tblcon">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th colspan="2">Concern/VM</th><th colspan="5">Services</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2">Production Web Server</th>
|
|
||||||
<td>Nginx</td>
|
|
||||||
<td>PHP</td>
|
|
||||||
<td colspan="5">CertBot</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2">Staging Web Server</th>
|
|
||||||
<td>Nginx</td>
|
|
||||||
<td>PHP</td>
|
|
||||||
<td>CertBot</td>
|
|
||||||
<td colspan="5">mariaDB</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2">NAS</th>
|
|
||||||
<td colspan="5">OpenMediaVault</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2">SQL server</th>
|
|
||||||
<td colspan="5">mariaDB</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2">Torrent Box</th>
|
|
||||||
<td>Transmission</td>
|
|
||||||
<td>VPN (to external)</td>
|
|
||||||
<td>Sonarr</td>
|
|
||||||
<td>Radarr</td>
|
|
||||||
<td colspan="5">Ombi</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Why not use a dedicated server for each concern?</h2>
|
|
||||||
<p>You can! No-one's going to stop you, but unless each concern <em>requires</em> (i.e. needs the dedicated hardware/isolation) its own dedicated server, it's hugely redundant. Again NAS as an example, would be good for a dedicated machine, as it'll be safer if there's no additional chance it goes down due to failure of an unrelated service.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A beginners guide to front-end web development, from absolutely no knowledge, to a junior developer.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Web Development 101. Guide to web development.</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Web Development 101</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>Interested in web development, but don't know where to begin? Don't worry, I've got you covered.</p>
|
|
||||||
|
|
||||||
<h2>My guides</h2>
|
|
||||||
<p>For each of my guides I recommend typing out the code snippets individually instead of copy and pasting, as it'll help you remember and learn.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Getting started</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/guides/your-first-webpage.html">Your first webpage</a></li>
|
|
||||||
<li><a href="/guides/webpage-to-website.html">Webpage to website</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>HTML</h2>
|
|
||||||
<ul>
|
|
||||||
<li>What is a tag/element?</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>CSS</h2>
|
|
||||||
<ul>
|
|
||||||
<li>What is a selector?</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Javascript</h2>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Snippets</h2>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,131 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="Following on from the previous guide, this will cover creating a website from the single webpage we currently have. Links, additional design, all the shebang.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Webpage to website</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Webpage to website</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>With a <a href="/guides/your-first-webpage.html">basic webpage</a> now created, the next hurdle is to add multiple pages, and get them all linked together into a website of some sort.</p>
|
|
||||||
|
|
||||||
<h2>Create a new page</h2>
|
|
||||||
<p>First off we need a second page, with its own unique name. Let's call it <strong>about.html</strong>.</p>
|
|
||||||
<p>To quickly get this up, copy and paste the <strong>index.html</strong> file from the previous guide, and simply rename it.</p>
|
|
||||||
|
|
||||||
<h2>Link the pages</h2>
|
|
||||||
<p>Next up, creating our links. We're going the <em>traditional</em> route, with a navbar. So at the top of the body tag, above the other content, add the following.</p>
|
|
||||||
<pre><code><nav>
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="about.html">About</a>
|
|
||||||
</nav></pre></code>
|
|
||||||
|
|
||||||
<p>The key part of the snippet is the <strong>anchor/a</strong> tag, as this tells the browser to create the link to the files in the hrefs.</p>
|
|
||||||
|
|
||||||
<h3>Style the navigation</h3>
|
|
||||||
<p>In the style tag, add the following (I recommend at the bottom of what's already there). Then give the page a reload.</p>
|
|
||||||
<pre><code>nav{
|
|
||||||
background-color: white;
|
|
||||||
border-bottom: 1px solid gainsboro;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
nav a{
|
|
||||||
padding: 12px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
nav a:hover{
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
}</code></pre>
|
|
||||||
|
|
||||||
<p>Give each link a click to check everything's alright. Doing this you may spot the nav styling is only on one page, oops, simple mistake. To fix this you'll have to open up the other HTML file, and add the styling in there too.</p>
|
|
||||||
|
|
||||||
<h2>Make the styling global</h2>
|
|
||||||
<p>With multiple pages up, imagine for a second if you had 10-15 more pages. How much of a pain would changing some styling be? Even just a simple colour change would be mega annoying, and time consuming. <em>Open file, change style, save, and repeat...</em></p>
|
|
||||||
|
|
||||||
<p>Thankfully there's a simple solution to this problem, and it's actually best-practice to do this for every website!</p>
|
|
||||||
|
|
||||||
<h3>External CSS</h3>
|
|
||||||
<p>Our current internal stylesheet is now a hindrence as we've got multiple pages. So what we're going to do is take its content, and pop it into its own file.</p>
|
|
||||||
|
|
||||||
<h3>How</h3>
|
|
||||||
<p>First off, create a new file (same place as the .html files) called <strong>main.css</strong>, this will be our external stylesheet.</p>
|
|
||||||
<p>Next, open up one of the .html pages, and copy everything between the style tags, paste it into the CSS file, and save each file.</p>
|
|
||||||
|
|
||||||
<p>Now we've got the styling, we can get rid of the internal CSS entirely. Delete the style tags, and everything between from the .html pages, and replace them with the following snippet.</p>
|
|
||||||
<pre><code><link rel="stylesheet" type="text/css" href="main.css"></code></pre>
|
|
||||||
<p>Reload, and voila! The site looks exactly the same. It's just easier to manage now.</p>
|
|
||||||
|
|
||||||
<h2>Footer</h2>
|
|
||||||
|
|
||||||
<p>To finish things off, why not add a quick footer proclaiming our copyright of the site?</p>
|
|
||||||
|
|
||||||
<p>Add the following snippet just before the closing <code></body></code> tag.</p>
|
|
||||||
|
|
||||||
<pre><code><footer>
|
|
||||||
<p>© Aney 2022 | Made with ♥</p>
|
|
||||||
</footer></code></pre>
|
|
||||||
|
|
||||||
<p>And a little styling to the CSS file.</p>
|
|
||||||
<pre><code>body{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
main{
|
|
||||||
flex: 1 0 auto;
|
|
||||||
}
|
|
||||||
footer{
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
}</code></pre>
|
|
||||||
|
|
||||||
<p>You may notice that body has already been used in the CSS, and that's OK thanks to the cascading nature of CSS. This can become a problem if you have the same selectors scattered around though, as it can begin to override styling. To avoid this problem I recommend having just the one location for each selector. So take the new <strong>body</strong> styling, and add it to the pre-existing body styling near the top of your CSS file.</p>
|
|
||||||
|
|
||||||
<h2>We got a website</h2>
|
|
||||||
<p>A little bit of content here, and there. A couple of styling tweaks, and a few more pages then you've got your very first website.</p>
|
|
||||||
|
|
||||||
<p>From here there are a few different directions. You could:</p>
|
|
||||||
<ol>
|
|
||||||
<li>Follow along to the rest of my <a href="/guides/web-dev-101">web-dev 101</a></li>
|
|
||||||
<li>Venture to the internet and learn everything you can about web development</li>
|
|
||||||
<li><a href="/guides/guide-to-server-hosting.html">Setup a server</a>, pop what you've got on the worldwide web, and call it a day</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<p>Whatever you choose to do, I offer you the best of luck.</p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,172 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="Ever thought of building your own website from scratch? This guide covers the basics of creating a webpage, leading on to learning more about the structure, and functionality needed to create one yourself.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Your first webpage</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Your first webpage</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>In my opinion learning is done by doing, so where better to start than making your own basic webpage. This assumes you already have a text editor; you can use Notepad, Vim, etc. but if you're learning coding, I recommend <a href="https://code.visualstudio.com/" target="_blank" rel="noopender">Visual Studio Code</a></p>
|
|
||||||
|
|
||||||
<h2>Create your html file</h2>
|
|
||||||
|
|
||||||
<p>First you need to create the file where the code will reside. For this guide (and others) I recommend making a new folder/directory to put your files in. Once you've created the new directory, make a new file inside of it, naming said file <b>index.html</b> (you may need to show filetypes to rename .txt to .html. So check here for <a href="https://support.apple.com/en-az/guide/mac-help/mchlp2304/mac" target="_blank" rel="noopener">MacOS</a>, or <a href="https://knowledge.autodesk.com/support/autocad/learn-explore/caas/sfdcarticles/sfdcarticles/How-to-enable-hidden-file-extensions-in-Windows.html" target="_blank" rel="noopener">Windows</a>).</p>
|
|
||||||
|
|
||||||
<h2>Basic Boilerplate</h2>
|
|
||||||
|
|
||||||
<p>There are some default things that each webpage needs to be 'compliant' with the web, so I recommend starting each page in the same way.</p>
|
|
||||||
|
|
||||||
<p>Add the following code snippet into your file, and save.</p>
|
|
||||||
|
|
||||||
<pre><code><!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html></pre></code>
|
|
||||||
|
|
||||||
<p>Now if you double click the file it'll open a blank page in your browser (if you've got the .html extension). That's to be expected, as there's no actual content (yet).</p>
|
|
||||||
|
|
||||||
<p>Before we do get to the content, let's break down this snippet a little. The aim is to learn, not to blindly copy/paste, right?</p>
|
|
||||||
|
|
||||||
<h3>Snippet explaination</h3>
|
|
||||||
<p><b><code><!DOCTYPE html></code></b> a standalone tag that tells the browser what document type to expect. We're using HTML5, so it's a short and simple declaration.</p>
|
|
||||||
<p><b><code><html lang="en"></code></b> this element is a container for (almost) all the rest of the HTML, as it tells the browser everything inside it needs to be rendered as HTML, and which language the content is.</p>
|
|
||||||
<p><b><code><head></code></b> is a container for metadata (data about data), it gives the browser all the info it needs, to render the page how we want it. Anything between the <b>head</b> tags will not be <em>directly</em> shown on the webpage.</p>
|
|
||||||
<p><b><code><body></code></b> this is a container for the content/body of the webpage. This is where visible elements, and content is applied.</p>
|
|
||||||
|
|
||||||
<h2>Basic Content</h2>
|
|
||||||
<p>So now we'll add some visible content, to make a <em>real</em> webpage, and not just a blank page.</p>
|
|
||||||
|
|
||||||
<p>Between the <b>body</b> tags, we'll add a very simple introduction about ourselves. Change the content between the tags to whatever you want. I'll explain them in a later guide, but for now just play around.</p>
|
|
||||||
<pre><code><main><div class="layout-wrapper">
|
|
||||||
<h1>Hi, I'm <em>Aney</em></h1>
|
|
||||||
<p>Welcome to my site, it's pretty cool!</p>
|
|
||||||
<h2>Skills</h2>
|
|
||||||
<p>I have an assortment of <em>skills</em>, including:</p>
|
|
||||||
<ul>
|
|
||||||
<li>Being swag</li>
|
|
||||||
<li>Getting the bag</li>
|
|
||||||
</ul>
|
|
||||||
<h2>Portfolio</h2>
|
|
||||||
<!-- Any image on the internet can go here -->
|
|
||||||
<img src="https://via.placeholder.com/200x200/">
|
|
||||||
<img src="https://via.placeholder.com/200x200/">
|
|
||||||
<img src="https://via.placeholder.com/200x200/">
|
|
||||||
</div></main></pre></code>
|
|
||||||
|
|
||||||
<p>Now if you refresh the webpage, tada! We have content.</p>
|
|
||||||
|
|
||||||
<h2>A little styling</h2>
|
|
||||||
<p>With content on the page we're done, right? However those keen eyed of you may notice it doesn't look very good, so we'll spice that up a with some basic CSS styling.</p>
|
|
||||||
|
|
||||||
<p>Between the <b>head</b> tags, we'll add the style tag, allowing us to embed the CSS into the page.</p>
|
|
||||||
<pre><code><style>
|
|
||||||
</style></pre></code>
|
|
||||||
|
|
||||||
<h3>The CSS</h3>
|
|
||||||
<p>For the actual styling, add the following snippet between the <b>style</b> tags.</p>
|
|
||||||
<pre><code>html,body{
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
html{
|
|
||||||
font-size: 12px;
|
|
||||||
background: #EEE;
|
|
||||||
background: linear-gradient(0, #DDD 0%, #EEE 35%, #FFF 55%, #EEE 100%);
|
|
||||||
}
|
|
||||||
body{
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
.layout-wrapper{
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 4px 12px;
|
|
||||||
max-width: 980px;
|
|
||||||
}
|
|
||||||
h1{
|
|
||||||
font-size: 22px;
|
|
||||||
background-color: #10106b;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
/* The selector below styles em, but only if it's inside a h1 */
|
|
||||||
h1 em{
|
|
||||||
color: #8cecf5;
|
|
||||||
}
|
|
||||||
h2{
|
|
||||||
font-size: 20px;
|
|
||||||
background-color: #020024;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
p{
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
ul{
|
|
||||||
padding: 0;
|
|
||||||
list-style-position: inside;
|
|
||||||
list-style-type: square;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
border: 2px solid #10106b;
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
img:hover{
|
|
||||||
border-color: ##6f6fa5;
|
|
||||||
}</pre></code>
|
|
||||||
|
|
||||||
<p>Note how we specify the name of the HTML tags in the CSS. They're a direct one-to-one, so adding styling to ul in the CSS, changes the appearance of ul in the HTML.</p>
|
|
||||||
|
|
||||||
<h4>Customise your site</h4>
|
|
||||||
<p>I've intentionally made the styling <em>"cool"</em> and <em>experimental</em> for those unfamiliar with CSS. That means that there should be some wiggle room for you to figure out, and mess around with it, to find something you like.</p>
|
|
||||||
|
|
||||||
<p>If you're unsure about the #10106b, etc. they're colours, take a quick look <a href="https://www.google.com/search?q=hex+colour+picker&rlz=1C1CHBF_enGB948GB948&oq=hex&aqs=chrome.2.69i57j0i131i433i512l2j46i433i512j0i131i433i512j69i61l3.3688j0j7&sourceid=chrome&ie=UTF-8" target="_blank" rel="noopener" >here</a>.</p>
|
|
||||||
|
|
||||||
<h2>Page title</h2>
|
|
||||||
|
|
||||||
<p>You know those titles that show at the top of your browser/in tabs? We're going to add that in.</p>
|
|
||||||
|
|
||||||
<p>Between the head tags, and above the style tag add the following.</p>
|
|
||||||
|
|
||||||
<pre><code><title>My website</title></pre></code>
|
|
||||||
|
|
||||||
<p>Reload your webpage and you should spot it. It doesn't show on the page itself, but it will show in your browser tab (hover over it if it doesn't all fit).</p>
|
|
||||||
|
|
||||||
<h2>It's done!</h2>
|
|
||||||
<p>Your first webpage is official complete. Before you start applying for jobs in the field, I do recommend looking at the rest of my <a href="/guides/web-dev-101.html">Web Development 101</a> guide. This will cover the most common elements, more CSS styling, a little Javascript for client-side scripting, and a few additional snippets.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 389 B |
Binary file not shown.
|
Before Width: | Height: | Size: 360 B |
@ -1 +1,114 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="260" height="260" viewBox="0 0 68.792 68.792" xmlns:v="https://vecta.io/nano"><defs><pattern xlink:href="#B" id="A" patternTransform="matrix(3.7795276,0,0,3.7795276,0,-862.51963)"/><pattern id="B" height="5.181" width="30.066" patternUnits="userSpaceOnUse"><path d="M7.597.061C5.079-.187 2.656.302-.01 1.788v1.273c2.783-1.63 5.183-2.009 7.482-1.781s4.497 1.081 6.781 1.938c4.567 1.713 9.551 3.458 15.813-.157l-.004-1.273c-6.44 3.709-10.816 1.982-15.371.273-2.278-.854-4.576-1.75-7.094-2z" fill="#fff" stroke="none"/></pattern></defs><path d="M129.865-.223c-71.797 0-130 58.203-130 130s58.203 130 130 130 130-58.203 130-130-58.203-130-130-130zM70.717 27.229c13.209.007 24.783 27.143 28.258 66.254a80 80 0 0 1 31.773-6.684 80 80 0 0 1 31.74 6.598c3.485-39.068 15.052-66.161 28.25-66.168 7.769 0 15.221 9.471 20.714 26.331s8.58 39.727 8.58 63.571c-.003 26.292-3.757 51.261-10.271 68.334 4.043 5.525 6.13 11.43 6.146 17.393 0 12.324-8.834 24.143-24.557 32.857s-37.05 13.61-59.286 13.61c-46.305 0-83.842-20.804-83.842-46.467.028-5.068 1.551-10.099 4.51-14.895-7.123-17.004-11.295-43.136-11.309-70.832 0-49.65 13.115-89.9 29.293-89.902z" transform="scale(.26458333)" fill="url(#A)"/></svg>
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
id="svg8"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 68.791665 68.791669"
|
||||||
|
height="260"
|
||||||
|
width="260">
|
||||||
|
<defs
|
||||||
|
id="defs2">
|
||||||
|
<pattern
|
||||||
|
patternTransform="matrix(3.7795276,0,0,3.7795276,0,-862.51963)"
|
||||||
|
id="pattern1734"
|
||||||
|
xlink:href="#Wavywhite" />
|
||||||
|
<pattern
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
width="30.066020"
|
||||||
|
height="5.1805778"
|
||||||
|
id="Wavywhite">
|
||||||
|
<path
|
||||||
|
style="fill:white;stroke:none;"
|
||||||
|
d="M 7.597,0.061 C 5.079,-0.187 2.656,0.302 -0.01,1.788 L -0.01,3.061 C 2.773,1.431 5.173,1.052 7.472,1.280 C 9.770,1.508 11.969,2.361 14.253,3.218 C 18.820,4.931 23.804,6.676 30.066,3.061 L 30.062,1.788 C 23.622,5.497 19.246,3.770 14.691,2.061 C 12.413,1.207 10.115,0.311 7.597,0.061 z "
|
||||||
|
id="path2169" />
|
||||||
|
</pattern>
|
||||||
|
<pattern
|
||||||
|
xlink:href="#Wavywhite-9"
|
||||||
|
id="pattern1717"
|
||||||
|
patternTransform="translate(78.995991,-18.202814)" />
|
||||||
|
<pattern
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
width="30.066020"
|
||||||
|
height="5.1805778"
|
||||||
|
id="Wavywhite-9">
|
||||||
|
<path
|
||||||
|
style="fill:white;stroke:none;"
|
||||||
|
d="M 7.597,0.061 C 5.079,-0.187 2.656,0.302 -0.01,1.788 L -0.01,3.061 C 2.773,1.431 5.173,1.052 7.472,1.280 C 9.770,1.508 11.969,2.361 14.253,3.218 C 18.820,4.931 23.804,6.676 30.066,3.061 L 30.062,1.788 C 23.622,5.497 19.246,3.770 14.691,2.061 C 12.413,1.207 10.115,0.311 7.597,0.061 z "
|
||||||
|
id="path2169-3" />
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
style="display:none"
|
||||||
|
id="layer2">
|
||||||
|
<rect
|
||||||
|
y="-10.587383"
|
||||||
|
x="-16.036171"
|
||||||
|
height="86.862602"
|
||||||
|
width="105.57146"
|
||||||
|
id="rect816"
|
||||||
|
style="opacity:1;fill:#000000;stroke-width:0.26458332" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="translate(0,-228.20832)"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
id="path12"
|
||||||
|
transform="matrix(0.26458333,0,0,0.26458333,0,228.20832)"
|
||||||
|
d="M 129.86523 -0.22265625 A 130 130 0 0 0 -0.13476562 129.77734 A 130 130 0 0 0 129.86523 259.77734 A 130 130 0 0 0 259.86523 129.77734 A 130 130 0 0 0 129.86523 -0.22265625 z M 70.716797 27.228516 A 29.294424 89.903573 0 0 1 98.974609 93.482422 A 79.999997 79.999997 0 0 1 130.74805 86.798828 A 79.999997 79.999997 0 0 1 162.48828 93.396484 A 29.294424 89.903573 0 0 1 190.73828 27.228516 A 29.294424 89.903573 0 0 1 220.0332 117.13086 A 29.294424 89.903573 0 0 1 209.76172 185.46484 A 83.842658 46.46702 0 0 1 215.9082 202.85742 A 83.842658 46.46702 0 0 1 132.06445 249.32422 A 83.842658 46.46702 0 0 1 48.222656 202.85742 A 83.842658 46.46702 0 0 1 52.732422 187.96289 A 29.294424 89.903573 0 0 1 41.423828 117.13086 A 29.294424 89.903573 0 0 1 70.716797 27.228516 z "
|
||||||
|
style="opacity:1;fill:url(#pattern1734);fill-opacity:1;stroke-width:0.99999994" />
|
||||||
|
<circle
|
||||||
|
r="34.395832"
|
||||||
|
cy="244.34233"
|
||||||
|
cx="113.35635"
|
||||||
|
id="path12-6"
|
||||||
|
style="opacity:1;fill:url(#pattern1717);fill-opacity:1;stroke-width:0.26458332" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="layer3">
|
||||||
|
<circle
|
||||||
|
r="21.166666"
|
||||||
|
cy="-36.030361"
|
||||||
|
cx="-56.876034"
|
||||||
|
id="path842"
|
||||||
|
style="opacity:1;fill:#000000;stroke-width:0.26029724" />
|
||||||
|
<ellipse
|
||||||
|
ry="23.786987"
|
||||||
|
rx="7.7508163"
|
||||||
|
cy="-49.171467"
|
||||||
|
cx="-72.758934"
|
||||||
|
id="path844"
|
||||||
|
style="opacity:1;fill:#000000;stroke-width:0.34952027" />
|
||||||
|
<ellipse
|
||||||
|
transform="scale(-1,1)"
|
||||||
|
ry="23.786987"
|
||||||
|
rx="7.7508163"
|
||||||
|
cy="-49.171467"
|
||||||
|
cx="41.003338"
|
||||||
|
id="path844-9"
|
||||||
|
style="opacity:1;fill:#000000;stroke-width:0.34952027" />
|
||||||
|
<ellipse
|
||||||
|
ry="12.294399"
|
||||||
|
rx="22.183371"
|
||||||
|
cy="-26.48992"
|
||||||
|
cx="-56.527508"
|
||||||
|
id="path951"
|
||||||
|
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke-width:0.40126047;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 4.4 KiB |
@ -1,196 +1,116 @@
|
|||||||
html,body{height:100%}
|
html{
|
||||||
html{font-size:15px}
|
font-size: 16px;
|
||||||
header{position:relative}
|
}
|
||||||
header hr{display:none}
|
|
||||||
body{
|
body{
|
||||||
max-width:768px;
|
margin:0.2rem auto;
|
||||||
margin:auto;padding:0 1.24rem;
|
max-width:48rem;
|
||||||
font:1.2rem/1.62 sans-serif;color:#444;
|
padding:0 .62rem;
|
||||||
display:-webkit-flex;display:-ms-flexbox;display:flex;
|
font:1.2rem/1.62 sans-serif;
|
||||||
flex-direction:column}
|
}
|
||||||
main{flex:1 0 auto}
|
h1,h2,h3 {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
header h1{
|
||||||
|
margin: 0.4rem 0;
|
||||||
|
margin-top: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
nav{
|
nav{
|
||||||
box-sizing:border-box;
|
list-style-type: none;
|
||||||
z-index:9}
|
padding: 0;
|
||||||
|
}
|
||||||
nav>a{
|
nav>a{
|
||||||
padding:.2rem 0;
|
padding: 0.2rem;
|
||||||
display:block;
|
}
|
||||||
border-top:1px dotted #101}
|
nav hr{
|
||||||
nav>a:first-child{border:none}
|
margin: 0;
|
||||||
|
}
|
||||||
h1,h2,h3,h4,h5,h6{line-height:1}
|
|
||||||
header h1{margin:1.4rem 52px 1.2rem auto}
|
|
||||||
h1{color:#000}h2{color:#111}h3{color:#222}
|
|
||||||
h4,h5,h6{color:#333}
|
|
||||||
|
|
||||||
a{text-decoration:none}
|
|
||||||
a:link,a:visited{color:#07C}
|
|
||||||
a:hover,a:visited:hover{color:#1AE}
|
|
||||||
|
|
||||||
ul{padding-left:0;margin-left:0;list-style:inside}
|
|
||||||
ul li{margin:.35rem}
|
|
||||||
li>ul{margin-left:1em}
|
|
||||||
|
|
||||||
.tag{
|
html, body {
|
||||||
font-size:.8rem;vertical-align:middle;
|
height: 100%;
|
||||||
padding:.2rem .5rem;border-radius:.33rem;
|
}
|
||||||
border:1px solid #CCC}
|
|
||||||
pre{
|
|
||||||
background:#EEE;padding:1rem;
|
|
||||||
white-space:pre-wrap;overflow-x:auto;
|
|
||||||
border:1px solid #DDD;border-radius:6px}
|
|
||||||
code{
|
|
||||||
background:#EEE;padding:.2rem;
|
|
||||||
border:1px solid #DDD;border-radius:6px}
|
|
||||||
pre code{border:none}
|
|
||||||
blockquote{
|
|
||||||
margin:0 .2rem;
|
|
||||||
border-left:2px solid;
|
|
||||||
padding:.4rem;padding-left:.8rem}
|
|
||||||
.page-nav{
|
|
||||||
float:right;
|
|
||||||
padding:14px;border:1px solid;
|
|
||||||
margin:1.4rem;margin-right:auto}
|
|
||||||
.sr{
|
|
||||||
position:absolute;overflow:hidden;
|
|
||||||
left:-9999px;top:auto;
|
|
||||||
width:1px;height:1px;
|
|
||||||
}
|
|
||||||
.vh{
|
|
||||||
position:absolute;
|
|
||||||
clip:rect(1px,1px,1px,1px);
|
|
||||||
height:1px;width:1px;
|
|
||||||
padding:2px 8px;overflow:hidden;
|
|
||||||
white-space:nowrap;
|
|
||||||
background:#FFF;z-index:10}
|
|
||||||
.vh:focus{
|
|
||||||
clip:auto;overflow:auto;
|
|
||||||
height:auto;width:auto}
|
|
||||||
.tblcon{overflow-x:auto}
|
|
||||||
footer p{margin:0}
|
|
||||||
|
|
||||||
table{text-align:left;width:100%;
|
ul{
|
||||||
border-collapse:collapse;
|
padding-left: 0;
|
||||||
overflow-wrap:normal;
|
list-style-position: inside;
|
||||||
margin:24px 0}
|
display: inline-block;
|
||||||
td,th{border:1px solid #CCC;padding:9px 6px}
|
margin: 0;
|
||||||
th{padding:12px}
|
}
|
||||||
thead tr{background:#FFF}
|
ul p{
|
||||||
tbody tr:nth-child(odd){background:#EEE}
|
display: inline-block;
|
||||||
tbody tr:hover{background:#DDD}
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
footer p{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.burger-container{
|
/*
|
||||||
position:absolute;height:34px;width:36px;
|
* Flex is only there to put the footer at the bottom.
|
||||||
cursor:pointer;top:25px;right:1.24rem;
|
* Not actually needed. BLOAT!!
|
||||||
position:fixed;background:#FFF;
|
*/
|
||||||
border:2px solid #EEE;border-radius:6px;
|
body {
|
||||||
z-index:9}
|
display: -webkit-flex;
|
||||||
#burger-toggle,#burger-toggle~nav{display:none}
|
display: -ms-flexbox;
|
||||||
.burger{left:3px;top:7px}
|
display: flex;
|
||||||
.burger,.burger::after,.burger::before{
|
flex-direction: column;
|
||||||
position:absolute;background:#000;
|
}
|
||||||
height:4px;width:30px;border-radius:2px;content:"";
|
main{
|
||||||
transition:transform 300ms cubic-bezier(.4,1,.5,1)}
|
flex: 1 0 auto;
|
||||||
.burger::before{margin-top:8px}
|
}
|
||||||
.burger::after{margin-top:16px}
|
|
||||||
#burger-toggle:checked~nav{display:block}
|
|
||||||
#burger-toggle:checked+.burger-container .burger::before{margin-top:8px;transform:rotate(45deg)}
|
|
||||||
#burger-toggle:checked+.burger-container .burger::after{margin-top:8px;transform:rotate(-45deg)}
|
|
||||||
#burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)}
|
|
||||||
|
|
||||||
@media print{body{max-width:none}}
|
@media (prefers-color-scheme: dark){
|
||||||
@media(min-width:720px){
|
body {color:#fff;background:#000;}
|
||||||
body{margin:.2rem auto}
|
a:link {color:#9cf;}
|
||||||
nav>a{margin-left:2rem;padding:auto;display:inline;border:none}
|
a:hover, a:visited:hover {color:#cef;}
|
||||||
nav>a:first-child{padding:1rem 0;margin-left:0}
|
a:visited {color:#9ce;}
|
||||||
ul li{margin:auto}
|
|
||||||
.burger-container{display:none}
|
|
||||||
#burger-toggle~nav,header hr{display:block}
|
|
||||||
}
|
|
||||||
@media(min-width:320px) and (max-width:719px){
|
|
||||||
nav{height:100%;
|
|
||||||
width:50%;min-width:250px;
|
|
||||||
position:fixed;
|
|
||||||
top:0;right:1.24rem;
|
|
||||||
padding:85px 1.24rem 1.24rem;
|
|
||||||
background:#FFF;border-left:1px solid #EEE;
|
|
||||||
z-index:8}
|
|
||||||
}
|
|
||||||
@media(max-width:320px){
|
|
||||||
#burger-toggle~nav{display:block}
|
|
||||||
.burger-container{display:none}
|
|
||||||
header h1{margin-right:auto}
|
|
||||||
body{overflow-wrap:anywhere}
|
|
||||||
img{width:100%;height:auto}
|
|
||||||
}
|
|
||||||
@media(prefers-color-scheme:dark){
|
|
||||||
body{color:#CCC;background:#101}
|
|
||||||
a:link,a:visited{color:#9CF}
|
|
||||||
a:hover,a:visited:hover{color:#C34}
|
|
||||||
nav{background:#101;border-color:#555}
|
|
||||||
nav>a{border-color:#555}
|
|
||||||
.burger-container{border:2px solid #555;background:#555;}
|
|
||||||
.burger,.burger::after,.burger::before{background:#EEE}
|
|
||||||
h1{color:#FFF}h2{color:#EEE}
|
|
||||||
h3,h4,h5,h6{color:#DDD}
|
|
||||||
td,th{border-color:#444}
|
|
||||||
thead tr{background:#101}
|
|
||||||
tbody tr:nth-child(odd){background:#222}
|
|
||||||
tbody tr:hover{background:#333}
|
|
||||||
pre{background:#333;color:#EEE;border-color:#555}
|
|
||||||
code{background:#333}
|
|
||||||
.tag{border-color:#555}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Form stuff */
|
@media print{
|
||||||
/* If I do a CSS framework, it'll need to have a reset too... */
|
body{
|
||||||
/* e.g. https://github.com/necolas/normalize.css/blob/master/normalize.css
|
max-width:none
|
||||||
https://byby.dev/normalize-css#:~:text=css%23css%2Dresets-,Normalize.,experience%20for%20each%20web%20browser.
|
}
|
||||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
|
||||||
*/
|
|
||||||
form{
|
|
||||||
border:1px solid;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
}
|
||||||
input,select,textarea{
|
|
||||||
font:1.2rem/1.62 sans-serif;color:#444;
|
/* For Media over the mobile view */
|
||||||
border:1px solid #CCC;
|
@media screen and (min-width: 601px){
|
||||||
|
nav{
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
nav>a{
|
||||||
|
padding: 1rem 0;
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
nav>a:first-child{
|
||||||
|
padding: 1rem 0;
|
||||||
|
padding-left: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
textarea{
|
|
||||||
resize: vertical;
|
/* For Media under the mobile view */
|
||||||
|
@media screen and (max-width: 600px){
|
||||||
|
h1, h2, h3, p, nav{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
margin: 0.2rem;
|
||||||
|
}
|
||||||
|
nav>a{
|
||||||
|
display: block;
|
||||||
|
border-top: 1px dotted black;
|
||||||
|
}
|
||||||
|
nav>a:first-child{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input,select,textarea{
|
@media screen and (max-width: 600px) and (prefers-color-scheme: dark){
|
||||||
background: #EEE;
|
nav>a{
|
||||||
border: 2px solid #444;
|
border-color: white;
|
||||||
box-sizing: border-box;
|
}
|
||||||
color: #444;
|
|
||||||
display: block;
|
|
||||||
line-height: 1;
|
|
||||||
vertical-align: top;
|
|
||||||
transition-duration:.2s;
|
|
||||||
}
|
|
||||||
input,textarea{
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
input[type="checkbox"]{
|
|
||||||
display:inline-block;
|
|
||||||
}
|
|
||||||
input:focus,select:focus,textarea:focus {
|
|
||||||
border-color: #9CF;
|
|
||||||
}
|
|
||||||
@media(min-width:720px){
|
|
||||||
input,select,textarea{
|
|
||||||
display:inline-block;
|
|
||||||
max-width:50%; /* so half it can be, with margins factored in... */
|
|
||||||
max-width:346.8px;
|
|
||||||
}
|
|
||||||
input,textarea{
|
|
||||||
width:auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media(prefers-color-scheme:dark){
|
|
||||||
input,select,textarea{
|
|
||||||
background:#CCC;border-color:#CCC;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,50 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A collection of recipes used, written, and altered by Aney. Bone jaw, I'm the chef.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Aney's Recipes</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Aney's Recipes</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>A collection of recipes I use, mostly budget oriented, but always tastee.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/recipes/woky-beef-stew.html">Woky Beef Stew</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,149 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A simple, filling, and tasty beef stew cooked in a wok.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Woky Beef Stew</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Woky Beef Stew</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<aside class="page-nav">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#requirements">Requirements</a></li>
|
|
||||||
<li><a href="#ingredients">Ingredients</a></li>
|
|
||||||
<li><a href="#preperation">Preperation</a></li>
|
|
||||||
<li><a href="#instructions">Instructions</a></li>
|
|
||||||
</ul>
|
|
||||||
</aside>
|
|
||||||
<section>
|
|
||||||
<p>This is an incomplete recipe, as I still need to get the seasonings down. Feel free to use, but just note it's not in its entirety.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h2 id="requirements">Requirements</h2>
|
|
||||||
<p>Time: ~1.5 hours</p>
|
|
||||||
<ul>
|
|
||||||
<li>Measuring jug</li>
|
|
||||||
<li>Wok</li>
|
|
||||||
<li>Wooden Spoon</li>
|
|
||||||
<li>(Chef's) Knife</li>
|
|
||||||
<li>Cutting Board</li>
|
|
||||||
<li>Tinfoil, or lid for wok</li>
|
|
||||||
<li>Bowl</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h2 id="ingredients">Ingredients</h2>
|
|
||||||
<p>These are the ingredients for two adult portions</p>
|
|
||||||
<ul>
|
|
||||||
<li>200g (Stewing) Steak (Diced)</li>
|
|
||||||
<li>1 Potato (Diced)</li>
|
|
||||||
<li>~1.5 Carrot (Sliced)</li>
|
|
||||||
<li>.5 Onion (Sliced)</li>
|
|
||||||
<li>.5 celery stalk (Sliced)</li>
|
|
||||||
<li>2 tsp Corn starch (mixed with water)</li>
|
|
||||||
<li>~75g Peas (Frozen or not)</li>
|
|
||||||
<li>~75g Corn (Frozen or not)</li>
|
|
||||||
<li>1.5 tbsp tomato puree</li>
|
|
||||||
<li>.5 tin chopped tomatos</li>
|
|
||||||
<li>300ml (boiling) water</li>
|
|
||||||
<li>1 beef/vegetable stock cube</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Seasonings</h3>
|
|
||||||
<ul>
|
|
||||||
<li>1 tsp Salt</li>
|
|
||||||
<li>1 tsp Oregano</li>
|
|
||||||
<li>.5 tsp Basil</li>
|
|
||||||
<li>1 tsp Paprika</li>
|
|
||||||
<li>1 tsp Cinnamon</li>
|
|
||||||
<li>1 tsp Sugar</li>
|
|
||||||
<li>.5 tsp Turmeric</li>
|
|
||||||
<li>1 Garlic clove (Bashed)</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h2 id="preperation">Preperation</h2>
|
|
||||||
<p>Chop the ingredients as stated in the ingredients section.</p>
|
|
||||||
<p>Add stock cube(s) into the measuring jug, then fill with the boiling water. Mix until disolved little.</p>
|
|
||||||
<p>Add cornstarch into a mug/bowl with a little cold water and mix until a paste.</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h2 id="instructions">Instructions</h2>
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
<h3>Brown the beef/steak</h3>
|
|
||||||
<p><em>5-10 minutes</em></p>
|
|
||||||
<p>Add the wok to the stove, and set to a high heat for a few minutes.</p>
|
|
||||||
<p>Add a splash of oil, then the meat.</p>
|
|
||||||
<p>Allow the meat to brown on all sides, 'stirring' occassionally.</p>
|
|
||||||
<p>Once browned drain the fat.</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>Add the flavour (and celery)</h3>
|
|
||||||
<p><em>3-5 minutes</em></p>
|
|
||||||
<p>Add the onion, celery, seasonings, and puree to the wok.</p>
|
|
||||||
<p>Stir thoroughly so that the puree and seasoning covers everything.</p>
|
|
||||||
<p>Slowly stir-fry for 1-3 minutes.</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>Add the liquids</h3>
|
|
||||||
<p><em>15-20 minutes</em></p>
|
|
||||||
<p>Add the chopped tomatos, and the stock to the wok.<p>
|
|
||||||
<p>Mix the contents together.</p>
|
|
||||||
<p>Season to taste with salt/pepper. If unsure, just leave it as is.</p>
|
|
||||||
<p>Bring to a boil, then reduce the stoves heat.</p>
|
|
||||||
<p>Cover the wok with a lid, or some tinfoil, and leave to sit for 15-20 minutes.</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>Add large veg</h3>
|
|
||||||
<p><em>20-25 minutes</em></p>
|
|
||||||
<p>Add the cornstarch mixture to the stew, and mix through.</p>
|
|
||||||
<p>Add the carrot, and potato to the wok.</p>
|
|
||||||
<p>Bring the stew back to a boil, then reduce the heat.</p>
|
|
||||||
<p>Re-cover the wok and leave for 20-25 minutes.</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>Add small veg</h3>
|
|
||||||
<p><em>10-15 minutes</em></p>
|
|
||||||
<p>Add the peas, and corn, and mix through the stew.</p>
|
|
||||||
<p>Re-cover the wok again, and leave for another 10-15 minutes.</p>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h3>Simmer or serve</h3>
|
|
||||||
<p><em>0-60 minutes</em></p>
|
|
||||||
<p>The stew should be good to serve now, however if you'd like it a little thicker, or the beef/veg a little softer then leave to simmer for up to an hour.</p>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
User-agent: *
|
|
||||||
Disallow: /files/
|
|
||||||
|
|
||||||
User-agent: *
|
|
||||||
Allow: *
|
|
||||||
|
|
||||||
Sitemap: https://aney.co.uk/sitemap.xml
|
|
||||||
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="The sitemap for aney.co.uk, now you can finally find that page you're after">
|
|
||||||
<meta name="keywords" content="Sitemap, aney.co.uk">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Aney's Sitemap</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Aney's Sitemap</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">home</a></li>
|
|
||||||
<li><a href="/about.html">about</a></li>
|
|
||||||
<li><a href="/equipment.html">equipment</a></li>
|
|
||||||
<li><a href="/projects.html">projects</a></li>
|
|
||||||
<li><a href="/sitemap.html">sitemap/misc</a></li>
|
|
||||||
<li><a href="/support.html">donate/support me</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="/websites.html">websites I like</a></li>
|
|
||||||
<li><a href="/cv.html">cv</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="/blog/">blog</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/blog/ive-started-a-blog.html">I've started a blog</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="/guides/">guides</a></li>
|
|
||||||
<li><a href="/recipes/">recipes</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,237 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<urlset
|
|
||||||
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
|
||||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
||||||
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
|
|
||||||
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
|
|
||||||
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
|
|
||||||
|
|
||||||
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>1.00</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/about</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.80</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/projects</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.80</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/blog/</loc>
|
|
||||||
<lastmod>2022-11-21T09:35:03+00:00</lastmod>
|
|
||||||
<priority>0.80</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/sitemap</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.80</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/support</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.80</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/equipment</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.80</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/blog/reducing-homelab</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.80</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/guide-to-server-hosting</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.80</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/cv</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.80</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/web-dev-101</loc>
|
|
||||||
<lastmod>2022-11-18T12:48:36+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/recipes/</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/blog/burger-menu</loc>
|
|
||||||
<lastmod>2022-11-21T09:35:03+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/blog/blog-thoughts-220822</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/blog/my-steamdeck-arrived</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/blog/ive-started-a-blog</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/websites</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/server-install-debian</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/initial-server-setup</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/get-a-domain-name</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/add-domain-to-server</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/nginx-install</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/setup-nginx-website</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/certbot-ssl</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/nginx-web-optimisation</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/add-php-to-nginx</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/install-mysql-mariadb</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/sql-cheatsheet</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/adminer-setup</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/backup-mysql-mariadb</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/backup-with-rsync</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/backup-with-rdiff</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/backup-with-cron</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/setup-qemu-kvm</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/setup-kvm-bridge</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/install-kvm-virtual-machine</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/virsh-cheatsheet</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/vm-seperation-of-concerns</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/nginx-proxy</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/password-protect-webpage</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/setup-git-server</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.64</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/your-first-webpage</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.51</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/guides/set-static-ip</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.51</priority>
|
|
||||||
</url>
|
|
||||||
<url>
|
|
||||||
<loc>https://aney.co.uk/recipes/woky-beef-stew</loc>
|
|
||||||
<lastmod>2022-11-18T12:24:40+00:00</lastmod>
|
|
||||||
<priority>0.51</priority>
|
|
||||||
</url>
|
|
||||||
|
|
||||||
|
|
||||||
</urlset>
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A collection of methods you can use to support, and help finance Aney's projects">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Support me</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Support Me</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<p>If you'd like to support me, the site, or any projects I'm working on, thank you.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Ko-fi</h2>
|
|
||||||
<p>Donate with <a href="https://ko-fi.com/siraney" target="_blank" rel="noopener">Ko-fi</a></a>
|
|
||||||
|
|
||||||
<h2>BAT (Brave)</h2>
|
|
||||||
<p>If you use the Brave browser, this site is setup to accept BAT. Press the triangle in the search bar.</p>
|
|
||||||
|
|
||||||
<h2>Liberapay</h2>
|
|
||||||
<p>Donate with <a href="https://liberapay.com/aney/donate" target="_blank" rel=noopener">Liberapay</a></p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>What the money do?</h2>
|
|
||||||
<p>Your contribution will go towards:</p>
|
|
||||||
<ul>
|
|
||||||
<li>Purchases, such as hosting, domains, hardware, etc.</li>
|
|
||||||
<li>Funding the time it takes to write articles, and guides</li>
|
|
||||||
<li>Any projects I am currently working on</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,360 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A page with all HTML elements used on Aney's website. Attempted to get all elements, even those not used so it's easier to test.">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>HTML element test page</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body id="top">
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>HTML element test page (h1)</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><div class="sr">Burger menu</div></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<h1>HTML element test page (h1)</h1>
|
|
||||||
<p>Welcome, you've found my testing page. A page with all HTML elements I could drop in (even if not used on site), that is used for testing my CSS to ensure it's works everywhere I can get it to.</p>
|
|
||||||
|
|
||||||
<h2>heading 2 (h2)</h2>
|
|
||||||
<h3>heading 3 (h3)</h3>
|
|
||||||
<h4>heading 4 (h4)</h4>
|
|
||||||
<h5>heading 5 (h5)</h5>
|
|
||||||
<h6>heading 6 (h6)</h6>
|
|
||||||
|
|
||||||
<h2>Paragraphs</h2>
|
|
||||||
<p>A simple little paragraph.</p>
|
|
||||||
<p>Followed by another with a link <a href="/">home</a></p>
|
|
||||||
|
|
||||||
<h2>Lists</h2>
|
|
||||||
<h3>ul</h3>
|
|
||||||
<ul>
|
|
||||||
<li>List item 1</li>
|
|
||||||
<li>List item 2</li>
|
|
||||||
<li>List item 3</li>
|
|
||||||
</ul>
|
|
||||||
<h3>ol</h3>
|
|
||||||
<ol>
|
|
||||||
<li>List item 1</li>
|
|
||||||
<li>List item 2</li>
|
|
||||||
<li>List item 3</li>
|
|
||||||
</ol>
|
|
||||||
<h3>dl</h3>
|
|
||||||
<dl>
|
|
||||||
<dt>Term</dt>
|
|
||||||
<dd>Description 1</dd>
|
|
||||||
<dd>Descripton 2</dd>
|
|
||||||
</dl>
|
|
||||||
<h3>menu</h3>
|
|
||||||
<menu>
|
|
||||||
<ul>
|
|
||||||
<li>List item 1</li>
|
|
||||||
<li>List item 2</li>
|
|
||||||
<li>List item 3</li>
|
|
||||||
</ul>
|
|
||||||
</menu>
|
|
||||||
|
|
||||||
<h2>Code</h2>
|
|
||||||
<pre><code><p>Example of code inside a pre.<p></code></pre>
|
|
||||||
<code>Code alone.</code>
|
|
||||||
<p>And heres some <code>code inside a tag</code>, namely a paragraph.</p>
|
|
||||||
|
|
||||||
<h2>Tables</h2>
|
|
||||||
<p>Each of these are wrapped by an element with <code>.tblcon</code> class.</p>
|
|
||||||
<div class="tblcon">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th scope="col">Concern/VM</th><th scope="col">Services1</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">Production Web Server</th>
|
|
||||||
<td>Nginx</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">Production Web Server</th>
|
|
||||||
<td>Nginx</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="tblcon">
|
|
||||||
<table>
|
|
||||||
<thead><tr><th scope="col">Concern/VM</th><th colspan="5" scope="colgroup">Services2</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Production Web Server</td>
|
|
||||||
<td>Nginx</td>
|
|
||||||
<td>Nginx</td>
|
|
||||||
<td colspan="3">Nginx</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Production Web Server</td>
|
|
||||||
<td>Nginx</td>
|
|
||||||
<td colspan="4">Nginx</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Production Web Server</td>
|
|
||||||
<td>Nginx</td>
|
|
||||||
<td>Nginx</td>
|
|
||||||
<td>Nginx</td>
|
|
||||||
<td>Nginx</td>
|
|
||||||
<td>Nginx</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="tblcon">
|
|
||||||
<table>
|
|
||||||
<tr><th scope="col">Concern/VM</th><th scope="col">Services3</th></tr>
|
|
||||||
<tr>
|
|
||||||
<td>Production Web Server</td>
|
|
||||||
<td>Nginx</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Production Web Server</td>
|
|
||||||
<td>Nginx</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<p>Table with all elements</p>
|
|
||||||
<div class="tblcon">
|
|
||||||
<table>
|
|
||||||
<caption>Here's a captioned table</caption>
|
|
||||||
<colgroup><col><col span="2"></colgroup>
|
|
||||||
<thead><tr><th scope="col">Name</th><th scope="col">Earned</th><th scope="col">Profit</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Mr. Epic</td>
|
|
||||||
<td>£15000</td>
|
|
||||||
<td>£1000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Sludge</td>
|
|
||||||
<td>£35000</td>
|
|
||||||
<td>£19000</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Smart fella</td>
|
|
||||||
<td>£69420</td>
|
|
||||||
<td>£50000</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td></td>
|
|
||||||
<td>£119420</td>
|
|
||||||
<td>£70000</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<h2>Block<wbr>quotes</h2>
|
|
||||||
<blockquote cite="https://www.w3schools.com/tags/tag_blockquote.asp">A section that is quoted from another source</blockquote>
|
|
||||||
<p>Using q tag <q>for inline (short) quotations</q>, as you see. Nifty.</p>
|
|
||||||
|
|
||||||
<h2>Form</h2>
|
|
||||||
<p>Behold, the mega-form! If you want details check <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms">mozilla's form section</a></p>
|
|
||||||
|
|
||||||
<p>datalist, fieldset, input, legend, meter, output, select, textarea</p>
|
|
||||||
<p>input todo: datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week</p>
|
|
||||||
<form>
|
|
||||||
|
|
||||||
<label for="name">Name</label>
|
|
||||||
<input name="name" id="name" placeholder="Name here"></input>
|
|
||||||
|
|
||||||
<label for="fruits" id="fruits">Fruits</label>
|
|
||||||
<select name="fruits">
|
|
||||||
<option value="">--Choose your fav--</option>
|
|
||||||
<option value="apple">Apple</option>
|
|
||||||
<option value="banana">Banana</option>
|
|
||||||
<option value="pear">Pear</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<label for="fruits-veg" id="fruits-veg">Fruits/Veg</label>
|
|
||||||
<select name="fruits-veg">
|
|
||||||
<option value="">--Choose your fav--</option>
|
|
||||||
<optgroup label="Fruits">
|
|
||||||
<option value="apple">Apple</option>
|
|
||||||
<option value="banana">Banana</option>
|
|
||||||
</optgroup>
|
|
||||||
<optgroup label="Vegetables">
|
|
||||||
<option value="potato">Potato</option>
|
|
||||||
<option value="onion">Onion</option>
|
|
||||||
</optgroup>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>Answer these yes/nos</legend>
|
|
||||||
<input type="checkbox" id="check-smart" name="check-smart" checked/>
|
|
||||||
<label for="check-smart">Smart</label>
|
|
||||||
<input type="checkbox" id="check-swag" name="check-swag"/>
|
|
||||||
<label for="check-swag">Swag</label>
|
|
||||||
<input type="checkbox" id="check-epic" name="check-epic"/>
|
|
||||||
<label for="check-epic">Epic</label>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<label for="prog">Progress</label>
|
|
||||||
<progress id="prog" max="100" value="55">55%</progress>
|
|
||||||
|
|
||||||
<label for="colour">Favourite Colour</label>
|
|
||||||
<input type="color" id="colour" name="colour" value="#CCCCCC"/>
|
|
||||||
|
|
||||||
<label for="birth">Birthdate</label>
|
|
||||||
<input type="date" id="birth" name="birth" min="1900-01-01" max="2020-01-01"/>
|
|
||||||
|
|
||||||
<label for="details">Details</label>
|
|
||||||
<textarea name="details" id="details" rows="4" placeholder="Describe yourself"></textarea>
|
|
||||||
|
|
||||||
<button type="button">Submit form</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<h2>Button</h2>
|
|
||||||
<button type="button">Button!</button>
|
|
||||||
<a class="button" href="#">Anchor!</a>
|
|
||||||
|
|
||||||
<h2>Grid System</h2>
|
|
||||||
<p>Not using one (curently at least) as it's un-needed. Perhaps if I make my own reset/base CSS file I'll add one for you guys.</p>
|
|
||||||
<h2>Util<wbr>ities</h2>
|
|
||||||
|
|
||||||
<h3>Tags</h3>
|
|
||||||
<div class="tag">Tag</div>
|
|
||||||
<p>As a span within <span class="tag">w</span> another element.</p>
|
|
||||||
<p>Actual usage <span class="tag">Tag 1</span> <span class="tag">Tag 2</span></p>
|
|
||||||
|
|
||||||
<h3>Notecards</h3>
|
|
||||||
|
|
||||||
<h3>Alerts</h3>
|
|
||||||
|
|
||||||
<h3>Modals</h3>
|
|
||||||
|
|
||||||
<h3>Example utils I may want</h3>
|
|
||||||
<a href="https://getbootstrap.com/docs/5.2/examples/">Bootstrap utilities</a>
|
|
||||||
|
|
||||||
<h2>Headers</h2>
|
|
||||||
|
|
||||||
<h2>Menus</h2>
|
|
||||||
<p>Maybe I'll do dropdowns soonish</p>
|
|
||||||
|
|
||||||
<h2>Searchbars</h2>
|
|
||||||
|
|
||||||
<h2>Inline elements</h2>
|
|
||||||
|
|
||||||
<h2>Unplanned<wbr>/<wbr>Dumped for now</h2>
|
|
||||||
<h3>Address</h3>
|
|
||||||
<address>testing</address>
|
|
||||||
<h3>Article</h3>
|
|
||||||
<article>testing</article>
|
|
||||||
<aside class="page-nav"><p>page-nav is here</p><ul><li>list 1</li><li>list 2</li></ul></aside>
|
|
||||||
<h3>Aside</h3>
|
|
||||||
<aside>Test aside</aside>
|
|
||||||
<p>There's also the class <code>.page-nav</code></p>
|
|
||||||
<h3>Images</h3>
|
|
||||||
<p>Webp. If it doesn't load your browser doesn't support it, but the picture below will work.</p>
|
|
||||||
<img src="/images/200px.webp" alt="Placeholder image" width="200" height="200">
|
|
||||||
<h3>Picture</h3>
|
|
||||||
<picture>
|
|
||||||
<source type="image/webp" srcset="/images/200px.webp">
|
|
||||||
<source type="image/jpeg" srcset="/images/200px.png">
|
|
||||||
<img src="/images/200px.png" alt="Placeholder image" width="200" height="200">
|
|
||||||
</picture>
|
|
||||||
|
|
||||||
<h3>Figure</h3>
|
|
||||||
<figure>
|
|
||||||
<picture>
|
|
||||||
<source type="image/webp" srcset="/images/200px.webp">
|
|
||||||
<source type="image/jpeg" srcset="/images/200px.png">
|
|
||||||
<img src="/images/200px.png" alt="Placeholder image" width="200" height="200">
|
|
||||||
</picture>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<picture>
|
|
||||||
<source type="image/webp" srcset="/images/200px.webp">
|
|
||||||
<source type="image/jpeg" srcset="/images/200px.png">
|
|
||||||
<img src="/images/200px.png" alt="Placeholder image" width="200" height="200">
|
|
||||||
</picture>
|
|
||||||
<figcaption>figcaption</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<h3>hr</h3>
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<h3>misc</h3>
|
|
||||||
<p>Here's some examples of inline elements I currently don't use (or didn't up to now).</p>
|
|
||||||
<p>The list consists of <code>abbr</code> for <abbr>abbr</abbr> abbreviations, <code>bdi</code> <bdi>for bidirectional text</bdi>, <code>bdo</code> <bdo dir="rtl">(rtl) for changing text direction</bdo><br/>Oh there was a br (line break), not a new paragraph tag.</p>
|
|
||||||
<p>If something has been removed, <del>because it's wrong</del> <ins>for any reason</ins>, the <code>del</code> and <code>ins</code> elements are here!</p>
|
|
||||||
|
|
||||||
<h3>todo</h3>
|
|
||||||
<p>cite, data, dfn, em, i, kbd, mark, s, samp, small, strong, sub, sup, time, u, var, wbr</p>
|
|
||||||
<p>rp, rt, ruby</p>
|
|
||||||
|
|
||||||
<h2>Multimedia</h2>
|
|
||||||
<p>area, audio, img(done elsehwere), map, track, video</p>
|
|
||||||
|
|
||||||
<h2>Embedded content</h2>
|
|
||||||
<p>embed, iframe, object, picture, portal, source</p>
|
|
||||||
|
|
||||||
<h2>Svg</h2>
|
|
||||||
|
|
||||||
<h2>canvas</h2>
|
|
||||||
<p>This allows for scripting, animations, games, fancier graphics, etc.</p>
|
|
||||||
<canvas width="200" height="200"></canvas>
|
|
||||||
|
|
||||||
<h2>Interactive elements</h2>
|
|
||||||
<h3>details</h3>
|
|
||||||
<details>
|
|
||||||
<summary>Gangnam style</summary>
|
|
||||||
OP OP OP OP, OPPA GANGNAM STYLE
|
|
||||||
</details>
|
|
||||||
<h3>dialog</h3>
|
|
||||||
<p>Non-suggested way</p>
|
|
||||||
<dialog open>
|
|
||||||
<p>I am a dialog box! You cannot kill me!</p>
|
|
||||||
<form method="dialog">
|
|
||||||
<button>Kill</button>
|
|
||||||
</form>
|
|
||||||
</dialog>
|
|
||||||
<p>It's recommended to use JS to toggle dialogs, but to still use <code>dialog</code> (without the open attribute) over a <code>div</code> for semantic reasoning.
|
|
||||||
|
|
||||||
<h2>Web components</h2>
|
|
||||||
<p>slot, template</p>
|
|
||||||
<p>I've never used these, so I'm not sure 100% about their application, omitting for now.</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Up to date</h2>
|
|
||||||
<p>If you're looking for a complete (and up-to-date) list of HTML elements, look over at the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank" rel="noopener">mdn web docs</a>.</p>
|
|
||||||
<p>I'm recommending this, as it's where I yoinked all the elements from on <time datetime="2022-12-09">Dec 9th 2022</time>, and it's maintained regularly (unlike this page).<p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
#TODO:
|
|
||||||
<h2>Trivia</h2>
|
|
||||||
<p>As of today <time datetime="2022-12-09">09/12/22</time> thiss is the largest webpage on my site, with the HTML taking up ~13KB</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="A collection of the websites Aney uses regularary, finds inspiration from, or just finds attractive">
|
|
||||||
<meta name="keywords" content="Websites, collection">
|
|
||||||
<meta name="author" content="Nathan (Aney) Steel">
|
|
||||||
<meta name="theme-color" content="white">
|
|
||||||
<meta name="theme-color" content="black">
|
|
||||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
|
||||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
|
||||||
<title>Aney's Favourite Sites</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<a href="#main" class="vh">Jump directly to main content</a>
|
|
||||||
<h1>Aney's Favourite Sites</h1>
|
|
||||||
<input id="burger-toggle" type="checkbox"/>
|
|
||||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div><span class="sr">Burger menu</span></label>
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<a href="/">home</a>
|
|
||||||
<a href="/about.html">about</a>
|
|
||||||
<a href="/projects.html">projects</a>
|
|
||||||
<a href="/blog/">blog</a>
|
|
||||||
<a href="/sitemap.html">misc</a>
|
|
||||||
<a href="/support.html">support</a>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="main">
|
|
||||||
<section>
|
|
||||||
<h2>Websites I frequent</h2>
|
|
||||||
<p>I use these, but maybe I should stop.</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://www.youtube.co.uk" target="_blank" rel="noopener">Youtube</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Useful Websites</h2>
|
|
||||||
<p>These websites make things easier for me.</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://coolors.co/generate" target="_blank" rel="noopener">coolors.co/generate</a></li>
|
|
||||||
<li><a href="https://webpagetest.org/" target="_blank" rel="noopener">webpagetest.org</a></li>
|
|
||||||
<li><a href="https://tools.pingdom.com/" target="_blank" rel="noopener">tools.pingdom.com</a></li>
|
|
||||||
<li><a href="https://vecta.io/nano" target="_blank" rel="noopener">vecta.io/nano</a></li>
|
|
||||||
<li><a href="https://tinypng.com/" target="_blank" rel="noopener">tinypng.com</a></li>
|
|
||||||
<li><a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="noopener">webaim.org/resources/contrastchecker/</a></li>
|
|
||||||
<li><a href="https://via.placeholder.com/" target="_blank" rel="noopener">via.placeholder.com</a> - <a href="https://via.placeholder.com/320x480/" target="_blank" rel="noopener">example</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Websites that Inspire me</h2>
|
|
||||||
<p>Either their site, or their content. Ideally both.</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://lukesmith.xyz" target="_blank" rel="noopener">luksmith.xyz</a></li>
|
|
||||||
<li><a href="https://drewdevault.com" target="_blank" rel="noopener">drewdevault.com</a></li>
|
|
||||||
<li><a href="https://danluu.com/" target="_blank" rel="noopener">danluu.com</a></li>
|
|
||||||
<li><a href="https://1mb.club/" target="_blank" rel="noopener">1mb.club</a></li>
|
|
||||||
<li><a href="https://seirdy.one/" target="_blank" rel="noopener">seirdy.one</a></li>
|
|
||||||
<li><a href="https://jeremymaluf.com/" target="_blank" rel="noopener">jeremymaluf.com</a></li>
|
|
||||||
<li><a href="https://m-chrzan.xyz/" target="_blank" rel="noopener">m-chrzan.xyz</a></li>
|
|
||||||
<li><a href="https://www.joshwcomeau.com/" target="_blank" rel="noopener">joshwcomeau.com</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>My websites</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://aney.co.uk" target="_blank" rel="noopener">aney.co.uk</a></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<hr/>
|
|
||||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,10 @@
|
|||||||
|
# Aney.co.uk Wiki
|
||||||
|
|
||||||
|
Powered by MDwiki
|
||||||
|
|
||||||
|
## Why a Wiki?
|
||||||
|
|
||||||
|
1. Because I wanted somewhere to dump markdown docs, etc.
|
||||||
|
2. I want to see what I can host on my T420 (then migrating to a RPI 3)
|
||||||
|
3. Potentially I can use this for blog posts
|
||||||
|
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
# Aney's Wiki
|
||||||
|
|
||||||
|
[Home](../)
|
||||||
|
[Wiki Home](index.md)
|
||||||
Loading…
Reference in New Issue