From 1fc98951118b3ca039e419437d35e4c09029c30b Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Thu, 3 Nov 2022 08:18:47 -0400 Subject: [PATCH 01/26] Seperate articles into blog,recipes,guides --- 404.html | 2 +- blog/index.html | 33 +-------- {blog => guides}/add-domain-to-server.html | 0 {blog => guides}/add-php-to-nginx.html | 4 +- {blog => guides}/adminer-setup.html | 4 +- {blog => guides}/backup-mysql-mariadb.html | 0 {blog => guides}/backup-with-cron.html | 2 +- {blog => guides}/backup-with-rdiff.html | 0 {blog => guides}/backup-with-rsync.html | 2 +- {blog => guides}/certbot-ssl.html | 0 {blog => guides}/get-a-domain-name.html | 0 {blog => guides}/guide-to-server-hosting.html | 50 ++++++------- guides/index.html | 72 +++++++++++++++++++ {blog => guides}/initial-server-setup.html | 0 .../install-kvm-virtual-machine.html | 0 {blog => guides}/install-mysql-mariadb.html | 0 {blog => guides}/nginx-install.html | 4 +- {blog => guides}/nginx-proxy.html | 0 {blog => guides}/nginx-web-optimisation.html | 0 .../password-protect-webpage.html | 0 {blog => guides}/server-install-debian.html | 0 {blog => guides}/set-static-ip.html | 0 {blog => guides}/setup-git-server.html | 0 {blog => guides}/setup-kvm-bridge.html | 2 +- {blog => guides}/setup-nginx-website.html | 0 {blog => guides}/setup-qemu-kvm.html | 0 {blog => guides}/sql-cheatsheet.html | 0 {blog => guides}/virsh-cheatsheet.html | 0 .../vm-seperation-of-concerns.html | 0 index.html | 2 +- recipes/index.html | 41 +++++++++++ sitemap.html | 2 + 32 files changed, 154 insertions(+), 66 deletions(-) rename {blog => guides}/add-domain-to-server.html (100%) rename {blog => guides}/add-php-to-nginx.html (93%) rename {blog => guides}/adminer-setup.html (95%) rename {blog => guides}/backup-mysql-mariadb.html (100%) rename {blog => guides}/backup-with-cron.html (96%) rename {blog => guides}/backup-with-rdiff.html (100%) rename {blog => guides}/backup-with-rsync.html (98%) rename {blog => guides}/certbot-ssl.html (100%) rename {blog => guides}/get-a-domain-name.html (100%) rename {blog => guides}/guide-to-server-hosting.html (63%) create mode 100644 guides/index.html rename {blog => guides}/initial-server-setup.html (100%) rename {blog => guides}/install-kvm-virtual-machine.html (100%) rename {blog => guides}/install-mysql-mariadb.html (100%) rename {blog => guides}/nginx-install.html (91%) rename {blog => guides}/nginx-proxy.html (100%) rename {blog => guides}/nginx-web-optimisation.html (100%) rename {blog => guides}/password-protect-webpage.html (100%) rename {blog => guides}/server-install-debian.html (100%) rename {blog => guides}/set-static-ip.html (100%) rename {blog => guides}/setup-git-server.html (100%) rename {blog => guides}/setup-kvm-bridge.html (96%) rename {blog => guides}/setup-nginx-website.html (100%) rename {blog => guides}/setup-qemu-kvm.html (100%) rename {blog => guides}/sql-cheatsheet.html (100%) rename {blog => guides}/virsh-cheatsheet.html (100%) rename {blog => guides}/vm-seperation-of-concerns.html (100%) create mode 100644 recipes/index.html diff --git a/404.html b/404.html index 0a12ffa..79519a3 100644 --- a/404.html +++ b/404.html @@ -34,7 +34,7 @@

Use the navigation above, or below to head to somewhere a little more, functional

diff --git a/blog/index.html b/blog/index.html index 4800ca5..13bf889 100644 --- a/blog/index.html +++ b/blog/index.html @@ -29,43 +29,16 @@
+
+

You may be looking for my guides, or recipes.

+
-

Pinned

- -

2022

diff --git a/blog/add-domain-to-server.html b/guides/add-domain-to-server.html similarity index 100% rename from blog/add-domain-to-server.html rename to guides/add-domain-to-server.html diff --git a/blog/add-php-to-nginx.html b/guides/add-php-to-nginx.html similarity index 93% rename from blog/add-php-to-nginx.html rename to guides/add-php-to-nginx.html index 4131972..4621e00 100644 --- a/blog/add-php-to-nginx.html +++ b/guides/add-php-to-nginx.html @@ -61,8 +61,8 @@

Make nginx use index.php as homepage/root

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

vim /etc/nginx/sites-available/
-

Change the index line to rad as below. This will then tell the server to load index.php, and if it doesn't exists, load index.html in it's stead

- 
index index.php index.html
+				
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 it's stead

+				
index index.php index.html
diff --git a/blog/adminer-setup.html b/guides/adminer-setup.html similarity index 95% rename from blog/adminer-setup.html rename to guides/adminer-setup.html index f8c9b6a..87d57c6 100644 --- a/blog/adminer-setup.html +++ b/guides/adminer-setup.html @@ -34,8 +34,8 @@

Pre-Requirements

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.

Download the latest release

diff --git a/blog/backup-mysql-mariadb.html b/guides/backup-mysql-mariadb.html similarity index 100% rename from blog/backup-mysql-mariadb.html rename to guides/backup-mysql-mariadb.html diff --git a/blog/backup-with-cron.html b/guides/backup-with-cron.html similarity index 96% rename from blog/backup-with-cron.html rename to guides/backup-with-cron.html index 5c06530..1a62c69 100644 --- a/blog/backup-with-cron.html +++ b/guides/backup-with-cron.html @@ -37,7 +37,7 @@

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.

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

vim ~/scripts/backup_script.sh
-

And add whatever your backup scripts wants to do. If you've no idea, check out my rsync, and rdiff articles first.

+

And add whatever your backup scripts wants to do. If you've no idea, check out my rsync, and rdiff articles first.

rdiff-backup $DIRECTORY_TO_BACKUP $DIRECTORY_TO_BACKUP_TO
 rdiff-backup --force --remove-older-than 2W $DIRECTORY_TO_BACKUP_TO

The above example will backup a directory, and remove any changes from 2 weeks ago.

diff --git a/blog/backup-with-rdiff.html b/guides/backup-with-rdiff.html similarity index 100% rename from blog/backup-with-rdiff.html rename to guides/backup-with-rdiff.html diff --git a/blog/backup-with-rsync.html b/guides/backup-with-rsync.html similarity index 98% rename from blog/backup-with-rsync.html rename to guides/backup-with-rsync.html index f84267e..33dc387 100644 --- a/blog/backup-with-rsync.html +++ b/guides/backup-with-rsync.html @@ -70,7 +70,7 @@

Downsides

-

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 rdiff-backup.

+

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 rdiff-backup.

* Not impossible, as you can set rsync to do this, but it requires a bit of scripting, and isn't as easy as just running the program

diff --git a/blog/certbot-ssl.html b/guides/certbot-ssl.html similarity index 100% rename from blog/certbot-ssl.html rename to guides/certbot-ssl.html diff --git a/blog/get-a-domain-name.html b/guides/get-a-domain-name.html similarity index 100% rename from blog/get-a-domain-name.html rename to guides/get-a-domain-name.html diff --git a/blog/guide-to-server-hosting.html b/guides/guide-to-server-hosting.html similarity index 63% rename from blog/guide-to-server-hosting.html rename to guides/guide-to-server-hosting.html index 3436da8..be29066 100644 --- a/blog/guide-to-server-hosting.html +++ b/guides/guide-to-server-hosting.html @@ -36,40 +36,40 @@

Basic Server setup

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

Nginx Webserver

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

MariaDB Database

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

Backup your server!

Backups are super useful. If something breaks, or gets accidentally deleted you can always use a backup to get it back

@@ -77,24 +77,24 @@

Run virtual machines

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.

Additional services/potential guides

Unless there is an anchor, these are all "TODO", and may just be omitted from this list

Useful tidbits

Additional Services

Where are the pictures?

diff --git a/recipes/index.html b/recipes/index.html new file mode 100644 index 0000000..37e1293 --- /dev/null +++ b/recipes/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + Aney's Recipes + + + +
+

Aney's Recipes

+
+ +
+
+ +
+
+
+
+ + + + + diff --git a/sitemap.html b/sitemap.html index 8cc2779..1fa9059 100644 --- a/sitemap.html +++ b/sitemap.html @@ -49,6 +49,8 @@
  • I've started a blog
    • +
  • guides
    • +
  • recipes
    • From 15a8ac236fd5fd20b4899fa31f973ce8b7d78d84 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Fri, 4 Nov 2022 12:52:42 -0400 Subject: [PATCH 02/26] Add about page --- about.html | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++ sitemap.html | 1 + 2 files changed, 62 insertions(+) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000..6ed9a8d --- /dev/null +++ b/about.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + About me + + + +
    +

    About me

    +
    + +
    +
    + +
    +
    +

    Who are you

    +

    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?

    +

    Some additional content; I'm in my late 20s, I used to collect coins, and pins; I have plenty of stuffed teddies, and more computers than I need.

    + +

    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.

    +

    What do you do?

    +

    Currently I'm a web developer, and I enjoy it to an extent. I love to solve problems, optimise sites, and creating designs/experiences, but building the guts, not so much.

    +

    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.

    +

    What do you own?

    +

    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.

    +

    I've got a few pages about this on the site, so if you do want to know, check out:

    +
      +
    • My hardware/tech
      • +
    • My kitchen
      • +
    • Living Room and Bedroom
      • +
    • Collectables and Sentimental
      • +
    • Misc
      • +
    +

    Why are you telling me this?

    +

    I figured it'd make for an easy introduction for anyone who stumbles across my site.

    +
    +
    + + + + + diff --git a/sitemap.html b/sitemap.html index 1fa9059..5d20c49 100644 --- a/sitemap.html +++ b/sitemap.html @@ -32,6 +32,7 @@
    • home
      • +
    • about
    • equipment
    • projects
    • sitemap/misc
      • From b18e49658f93d0f70053ae2cb8742db99d6f76f7 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 7 Nov 2022 04:58:39 -0500 Subject: [PATCH 03/26] Add burger styling --- main.css | 47 ++++++++++++++++++++++++++++++++++++----------- 1 file changed, 36 insertions(+), 11 deletions(-) diff --git a/main.css b/main.css index 63df49c..734ca8a 100644 --- a/main.css +++ b/main.css @@ -1,5 +1,7 @@ html,body { height:100% } html { font-size:14px } +header {position: relative} +header hr {display:none} body { margin:.2rem; max-width:48rem; @@ -14,7 +16,7 @@ border-top:1px dotted #000 nav>a:first-child {border:none} h1,h2,h3,h4,h5,h6 { line-height:1 } -header h1 { margin: 1.4rem auto 1.2rem } +header h1 { margin: 1.4rem auto 1.2rem; margin-right: 60px } a { text-decoration:none } a:link,a:visited { color:#087CA7 } @@ -48,6 +50,22 @@ tbody th{ background-color: #292929 } tr:nth-child(even){ background-color: #FEFEFE } tr:hover{ background-color: #DEDEDE } +.burger-container { +position: absolute;height: 24px;width: 30px; +cursor: pointer;top: 34px;right: 10px} +#burger-toggle {display: none} +.burger,.burger::after,.burger::before { +position: absolute;background-color: #000; +height: 4px;width: 30px;border-radius: 2px;content:""; +transition: transform 300ms cubic-bezier(0.4, 1, 0.5, 1)} +.burger::before {margin-top: -8px} +.burger::after {margin-top: 8px} +#burger-toggle~nav {display:none;} +#burger-toggle:checked~nav {display:block;} +#burger-toggle:checked+.burger-container .burger::before{margin-top:0px;transform:rotate(45deg)} +#burger-toggle:checked+.burger-container .burger::after{margin-top:0px;transform:rotate(-45deg)} +#burger-toggle:checked+.burger-container .burger{background:rgba(255,255,255,0)} + footer p { margin:0 } body { display:-webkit-flex;display:-ms-flexbox;display:flex; @@ -56,18 +74,25 @@ flex-direction:column main { flex:1 0 auto } @media print {body {max-width:none}} - @media (min-width: 600px) { -body { margin:.2rem auto; } -nav>a { margin-left:2rem; padding: auto; display: inline; border: none } -nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 } -ul li{ margin: auto } + body { margin:.2rem auto; } + nav>a { margin-left:2rem; padding: auto; display: inline; border: none } + nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 } + ul li{ margin: auto } + .burger-container {display: none} + #burger-toggle~nav {display: block} + header hr {display: block} +} +@media (max-width:320px) { + #burger-toggle~nav{display:block} + .burger-container{display:none} } @media (prefers-color-scheme: dark) { -body { color:#FFF; background:#191919 } -a:link,a:visited {color:#9CF} -a:hover,a:visited:hover {color:#DA4167} -nav>a { border-color:#FFF } -.tag {background-color:#FFF;color:#000} + body { color:#FFF; background:#191919 } + a:link,a:visited {color:#9CF} + a:hover,a:visited:hover {color:#DA4167} + nav>a { border-color:#FFF } + .tag {background-color:#FFF;color:#000} + .burger,.burger::after,.burger::before {background:#FFF} } From 0ee232f09c3e49dd30c93fb533f2e13bad304bea Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 7 Nov 2022 05:49:35 -0500 Subject: [PATCH 04/26] Add burger toggle checkbox to webpages Using following script: find -name '*.html' -exec perl -i -0777pe' s{\n\t\t\t
      } {\n\t\t\t\\n\t\t\t\n\t\t\t
      }; ' {} + --- 404.html | 2 ++ about.html | 2 ++ blog/blog-thoughts-220822.html | 2 ++ blog/index.html | 2 ++ blog/ive-started-a-blog.html | 2 ++ blog/my-steamdeck-arrived.html | 2 ++ blog/reducing-homelab.html | 2 ++ cv.html | 2 ++ equipment.html | 2 ++ guides/add-domain-to-server.html | 2 ++ guides/add-php-to-nginx.html | 2 ++ guides/adminer-setup.html | 2 ++ guides/backup-mysql-mariadb.html | 2 ++ guides/backup-with-cron.html | 2 ++ guides/backup-with-rdiff.html | 2 ++ guides/backup-with-rsync.html | 2 ++ guides/certbot-ssl.html | 2 ++ guides/get-a-domain-name.html | 2 ++ guides/guide-to-server-hosting.html | 2 ++ guides/index.html | 2 ++ guides/initial-server-setup.html | 2 ++ guides/install-kvm-virtual-machine.html | 2 ++ guides/install-mysql-mariadb.html | 2 ++ guides/nginx-install.html | 2 ++ guides/nginx-proxy.html | 2 ++ guides/nginx-web-optimisation.html | 2 ++ guides/password-protect-webpage.html | 2 ++ guides/server-install-debian.html | 2 ++ guides/set-static-ip.html | 2 ++ guides/setup-git-server.html | 2 ++ guides/setup-kvm-bridge.html | 2 ++ guides/setup-nginx-website.html | 2 ++ guides/setup-qemu-kvm.html | 2 ++ guides/sql-cheatsheet.html | 2 ++ guides/virsh-cheatsheet.html | 2 ++ guides/vm-seperation-of-concerns.html | 2 ++ index.html | 2 ++ projects.html | 2 ++ recipes/index.html | 2 ++ sitemap.html | 2 ++ support.html | 2 ++ websites.html | 2 ++ 42 files changed, 84 insertions(+) diff --git a/404.html b/404.html index 79519a3..bbe8b05 100644 --- a/404.html +++ b/404.html @@ -15,6 +15,8 @@

      Error 404

      + +

    2021

    From 2519516d3db6c2fb4a05680762b28e7fd1e6bb5a Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 7 Nov 2022 10:22:48 -0500 Subject: [PATCH 06/26] Change basic mobile styling, and desktop width Breakpoint size Header margin from burger Max width for desktop --- main.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/main.css b/main.css index 734ca8a..adae330 100644 --- a/main.css +++ b/main.css @@ -4,7 +4,7 @@ header {position: relative} header hr {display:none} body { margin:.2rem; -max-width:48rem; +max-width:54rem; padding:0 .62rem; font:1.2rem/1.62 sans-serif } @@ -16,7 +16,7 @@ border-top:1px dotted #000 nav>a:first-child {border:none} h1,h2,h3,h4,h5,h6 { line-height:1 } -header h1 { margin: 1.4rem auto 1.2rem; margin-right: 60px } +header h1 { margin: 1.4rem auto 1.2rem; margin-right: 52px } a { text-decoration:none } a:link,a:visited { color:#087CA7 } @@ -74,7 +74,7 @@ flex-direction:column main { flex:1 0 auto } @media print {body {max-width:none}} -@media (min-width: 600px) { +@media (min-width: 720px) { body { margin:.2rem auto; } nav>a { margin-left:2rem; padding: auto; display: inline; border: none } nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 } @@ -86,6 +86,7 @@ main { flex:1 0 auto } @media (max-width:320px) { #burger-toggle~nav{display:block} .burger-container{display:none} + header h1{margin-right:auto} } @media (prefers-color-scheme: dark) { body { color:#FFF; background:#191919 } From 2b12e022605b733e587c4fb4eeeb0db433defaec Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Tue, 8 Nov 2022 04:35:58 -0500 Subject: [PATCH 07/26] Content changes to webpages Change content for many first level pages. Also removed meta keywords from these pages. --- about.html | 9 +++++++-- cv.html | 3 +-- equipment.html | 7 ++++--- index.html | 12 +++--------- projects.html | 3 +-- support.html | 19 ++++++++++++++----- 6 files changed, 30 insertions(+), 23 deletions(-) diff --git a/about.html b/about.html index 3111ec3..7fd72bf 100644 --- a/about.html +++ b/about.html @@ -33,12 +33,16 @@

    Who are you

    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?

    -

    Some additional content; I'm in my late 20s, I used to collect coins, and pins; I have plenty of stuffed teddies, and more computers than I need.

    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.

    +

    What do you do?

    -

    Currently I'm a web developer, and I enjoy it to an extent. I love to solve problems, optimise sites, and creating designs/experiences, but building the guts, not so much.

    +

    I'm currently employed as a web developer, and I enjoy it to an extent. I love solving problems, optimising sites, and creating designs/experiences, but building the guts, not so much.

    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.

    + +

    What else do you do?

    +

    Ok sure, I'm (extremely) slowly working on the basic infrastructure, and website for aNetwork, a gaming community, and public game server host. If there's ever anything else, you can find out more on my projects page, or on my blog.

    +

    What do you own?

    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.

    I've got a few pages about this on the site, so if you do want to know, check out:

    @@ -49,6 +53,7 @@
  • Collectables and Sentimental
  • Misc
    • +

    Why are you telling me this?

    I figured it'd make for an easy introduction for anyone who stumbles across my site.

    diff --git a/cv.html b/cv.html index 099fe8a..0b3733d 100644 --- a/cv.html +++ b/cv.html @@ -4,7 +4,6 @@ - @@ -33,7 +32,7 @@

    About Me

    -

    I'm a helpful and well-mannered person that can work both alone, and as part of a team. I have a willingness to learn and I have great logical and problem-solving skills. I also aim to help people to the best of my ability, and always attempt to improve myself, and my skills wherever possible.

    +

    I'm a helpful and well-mannered person that can work both alone, and as part of a team. I have a willingness to learn, and an inate proficiency with optimisation, and problem-solving skills. A goal of mine is to always help people to the best of my ability, and to improve myself wherever possible.

    diff --git a/equipment.html b/equipment.html index eafb029..46b1a5e 100644 --- a/equipment.html +++ b/equipment.html @@ -37,8 +37,7 @@

    Daily Driver

    -

    Steam Deck

    -

    My everyday driver is now a SteamDeck, as I'm doing reduced work with development, and VMs at home, and instead opting for some more gaming. I've yet to use it as a laptop, so if it's non-functional for minor "out-of-office" server fixes, etc. I'll need to rethink this.

    +

    Undetermined. I'm looking for something super thin, and light that runs linux for dev, and ~3-5 VMs.

    @@ -66,6 +65,8 @@

    Gaming PC

    Red, a custom built machine sporting an R5 2600X, 16GB RAM, a 500GB EVO 970 NVME, and a Vega 64. This is my only device running Windows.

    I currently still have this to play Windows exclusive games/games without Linux Anti-Cheat enabled (Smite namely) with friends. Once HiRez sort their shit, it's gone.

    +

    Steam Deck

    +

    I also have a Steamdeck, which will 100% be my gaming PC once games I need Windows for get sorted.

    @@ -90,7 +91,7 @@

    Servers

    lilman

    -

    An HP 290 G1 MT, with an i5-7500, and 32GB RAM. This is my primary server, acting as my virtualisation host, NAS, adBlock, and media server. It also runs git, my game servers, and anything else I feel like hosting at the time. A consideration is upgrading to a 7700/7700K, but energy concerns have me thinking of switching to RPIs for a while, then rebuilding some current-gen beast in the coming years.

    +

    An HP 290 G1 MT, with an i5-7500, and 32GB RAM. This was my primary server, acting as my virtualisation host, NAS, adBlock, and media server. It also runs git, my game servers, and anything else I feel like hosting at the time. A consideration is upgrading to a 7700/7700K, but UK energy issues had me switching to RPIs for a while.

    diff --git a/index.html b/index.html index 7005343..9004f3e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,6 @@ - @@ -38,21 +37,16 @@

    What this, then?

    It's my little place on the world wide web. It serves the purpose of being a one-stop location I can refer people to when they ask things, like:

    Where are the pictures?

    I've written this website with the intention to keep it minimal, quick, small, and easily self-hosted. I decided that there was little reason to bloat the pages with images, that add little value, as all they will do is prevent people with poor internet from visiting.

    -

    What else do you do?

    -

    I'm currently working on the basic infrastructure, and website for aNetwork, a gaming community, and public game server host. If there's ever anything else, you can find out more on my projects page, or on my blog.

    -

    Wow! You're so cool, how can I support you?

    Thanks, although I disagree.

    You can support me by sharing any posts, and/or pages you enjoy to your friends, or by donating to me via my Support page.

    diff --git a/projects.html b/projects.html index e492aac..b878518 100644 --- a/projects.html +++ b/projects.html @@ -4,7 +4,6 @@ - @@ -33,7 +32,7 @@

    Current Projects

    -

    Here to hold me accountable, as I cannot finish things

    +

    Here to hold me accountable, as I cannot finish my own projects

    Personal Website

    diff --git a/support.html b/support.html index 25df515..2e6b9c6 100644 --- a/support.html +++ b/support.html @@ -4,7 +4,6 @@ - @@ -37,13 +36,23 @@

    Ko-fi

    -

    Donate me a hot choccy +

    Donate with Ko-fi

    BAT (Brave)

    -

    If you use the Brave browser, this site is setup to accept BAT.

    +

    If you use the Brave browser, this site is setup to accept BAT. Press the triangle in the search bar.

    -

    Liberapay

    -

    I've yet to set this up, but when I do I'll likely push this.

    +

    Liberapay

    +

    Donate with Liberapay

    +
    + +
    +

    What the money do?

    +

    Your contribution will go towards:

    +
      +
    • Purchases, such as hosting, domains, hardware, etc.
      • +
    • Funding the time it takes to write articles, and guides
      • +
    • Any projects I am currently working on
      • +
    From e3075b08f3412ff4f66e1e4264192ed931001e3b Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Thu, 10 Nov 2022 12:09:08 -0500 Subject: [PATCH 08/26] Correct typo in equipment meta-title --- equipment.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/equipment.html b/equipment.html index 46b1a5e..2191d56 100644 --- a/equipment.html +++ b/equipment.html @@ -10,7 +10,7 @@ - Computng equipment, and Hardware + Computing equipment, and Hardware From 83540bc0a99f3771ddaed0b10c377021e60e7e53 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 14 Nov 2022 09:20:22 -0500 Subject: [PATCH 09/26] Optimise CSS Remove unneeded spaces, characters, and elements. Change to shorthand where feasible. e.g. background-color to background, and list-style-position to list-style --- main.css | 143 +++++++++++++++++++++++++------------------------------ 1 file changed, 64 insertions(+), 79 deletions(-) diff --git a/main.css b/main.css index adae330..1a65bfd 100644 --- a/main.css +++ b/main.css @@ -1,99 +1,84 @@ -html,body { height:100% } -html { font-size:14px } -header {position: relative} -header hr {display:none} -body { -margin:.2rem; +html,body{height:100%} +html{font-size:14px} +header{position:relative} +header hr{display:none} +body{ max-width:54rem; -padding:0 .62rem; -font:1.2rem/1.62 sans-serif -} -nav>a { +margin:.2rem;padding:0 .62rem; +font:1.2rem/1.62 sans-serif; +display:-webkit-flex;display:-ms-flexbox;display:flex; +flex-direction:column} +main{flex:1 0 auto} +nav>a{ padding:.2rem 0; display:block; -border-top:1px dotted #000 -} -nav>a:first-child {border:none} +border-top:1px dotted #000} +nav>a:first-child{border:none} -h1,h2,h3,h4,h5,h6 { line-height:1 } -header h1 { margin: 1.4rem auto 1.2rem; margin-right: 52px } +h1,h2,h3,h4,h5,h6{line-height:1} +header h1{margin:1.4rem 52px 1.2rem auto} -a { text-decoration:none } -a:link,a:visited { color:#087CA7 } -a:hover,a:visited:hover { color:#09B2DC } +a{text-decoration:none} +a:link,a:visited{color:#087CA7} +a:hover,a:visited:hover{color:#09B2DC} -ul { -padding-left:0; margin-left:0; -list-style-position:inside -} -ul li{ margin: 0.35rem } -li>ul { margin-left:1em } +ul{padding-left:0;margin-left:0;list-style:inside} +ul li{margin:.35rem} +li>ul{margin-left:1em} -.tag { -font-size:.8rem; +.tag{ +font-size:.8rem;vertical-align:middle; padding:.2rem;border-radius:.33rem; -background-color:#191919;color:#FFF; -vertical-align:middle -} - +background:#191919;color:#FFF} pre{ -background-color: #191919;color: #FFF; -white-space: pre-wrap;overflow-x: auto; -padding: 12px; border: 1px solid #FFF; -} +background:#191919;color:#FFF; +white-space:pre-wrap;overflow-x:auto; +padding:12px;border:1px solid #FFF} +footer p{margin:0} -table{text-align: left;width: 100%;border-collapse: collapse} -td, th{border: 1px solid #222;padding: 9px 6px} -th{padding: 12px;color: white} -thead th{ background-color: #191919 } -tbody th{ background-color: #292929 } -tr:nth-child(even){ background-color: #FEFEFE } -tr:hover{ background-color: #DEDEDE } +table{text-align:left;width:100%;border-collapse:collapse} +td,th{border:1px solid #222;padding:9px 6px} +th{padding:12px;color:#FFF} +thead th{background:#191919} +tbody th{background:#292929} +tr:nth-child(even){background:#FEFEFE} +tr:hover{background:#DEDEDE} -.burger-container { -position: absolute;height: 24px;width: 30px; -cursor: pointer;top: 34px;right: 10px} -#burger-toggle {display: none} -.burger,.burger::after,.burger::before { -position: absolute;background-color: #000; -height: 4px;width: 30px;border-radius: 2px;content:""; -transition: transform 300ms cubic-bezier(0.4, 1, 0.5, 1)} -.burger::before {margin-top: -8px} -.burger::after {margin-top: 8px} -#burger-toggle~nav {display:none;} -#burger-toggle:checked~nav {display:block;} -#burger-toggle:checked+.burger-container .burger::before{margin-top:0px;transform:rotate(45deg)} -#burger-toggle:checked+.burger-container .burger::after{margin-top:0px;transform:rotate(-45deg)} +.burger-container{ +position:absolute;height:24px;width:30px; +cursor:pointer;top:34px;right:10px} +#burger-toggle,#burger-toggle~nav{display:none} +.burger,.burger::after,.burger::before{ +position:absolute;background:#000; +height:4px;width:30px;border-radius:2px;content:""; +transition:transform 300ms cubic-bezier(.4,1,.5,1)} +.burger::before{margin-top:-8px} +.burger::after{margin-top:8px} +#burger-toggle:checked~nav{display:block} +#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)} +#burger-toggle:checked+.burger-container .burger::after{margin-top:0;transform:rotate(-45deg)} #burger-toggle:checked+.burger-container .burger{background:rgba(255,255,255,0)} -footer p { margin:0 } -body { -display:-webkit-flex;display:-ms-flexbox;display:flex; -flex-direction:column -} -main { flex:1 0 auto } - -@media print {body {max-width:none}} -@media (min-width: 720px) { - body { margin:.2rem auto; } - nav>a { margin-left:2rem; padding: auto; display: inline; border: none } - nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 } - ul li{ margin: auto } - .burger-container {display: none} - #burger-toggle~nav {display: block} - header hr {display: block} +@media print{body{max-width:none}} +@media(min-width:720px){ + body{margin:.2rem auto} + nav>a{margin-left:2rem;padding:auto;display:inline;border:none} + nav>a:first-child{padding:1rem 0;margin-left:0} + ul li{margin:auto} + .burger-container{display:none} + #burger-toggle~nav,header hr{display:block} } -@media (max-width:320px) { +@media(max-width:320px){ #burger-toggle~nav{display:block} .burger-container{display:none} header h1{margin-right:auto} } -@media (prefers-color-scheme: dark) { - body { color:#FFF; background:#191919 } - a:link,a:visited {color:#9CF} - a:hover,a:visited:hover {color:#DA4167} - nav>a { border-color:#FFF } - .tag {background-color:#FFF;color:#000} - .burger,.burger::after,.burger::before {background:#FFF} +@media(prefers-color-scheme:dark){ + body{color:#FFF;background:#191919} + a:link,a:visited{color:#9CF} + a:hover,a:visited:hover{color:#DA4167} + nav>a{border-color:#FFF} + .tag{background:#FFF;color:#000} + .burger,.burger::after,.burger::before{background:#FFF} } From 1974efd41dab0185ffc063925b58230b0543bf4d Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Wed, 16 Nov 2022 06:56:10 -0500 Subject: [PATCH 10/26] Add pinned section back to guides Will be working on another multi-part guide, and this is the best way to seperate them for the time being. --- guides/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/guides/index.html b/guides/index.html index d770376..c53298f 100644 --- a/guides/index.html +++ b/guides/index.html @@ -32,6 +32,10 @@
    +

    Pinned

    +

    2022

    • Password protect webpages - (WIP)14/09/2022
      • From f4dd1f38c896de8c240db8639e2bf1bf523cfee9 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Fri, 18 Nov 2022 05:20:36 -0500 Subject: [PATCH 11/26] Add beginning of web-dev-101 guide Inc. your-first-webpage --- guides/index.html | 3 + guides/web-dev-101.html | 66 +++++++++++++ guides/your-first-webpage.html | 164 +++++++++++++++++++++++++++++++++ 3 files changed, 233 insertions(+) create mode 100644 guides/web-dev-101.html create mode 100644 guides/your-first-webpage.html diff --git a/guides/index.html b/guides/index.html index c53298f..1fa3e4b 100644 --- a/guides/index.html +++ b/guides/index.html @@ -35,9 +35,12 @@

      Pinned

      2022

        +
      • Your first webpage - 18/11/2022
        • +
      • Web Development 101 - (WIP)18/11/2022
      • Password protect webpages - (WIP)14/09/2022
      • Proxy services with Nginx - (WIP)14/09/2022
      • Install a KVM Virtual Machine - (WIP)14/09/2022
        • diff --git a/guides/web-dev-101.html b/guides/web-dev-101.html new file mode 100644 index 0000000..a7b3694 --- /dev/null +++ b/guides/web-dev-101.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + Web Development 101. Guide to web development. + + + +
        +

        Web Development 101

        + + +
        + +
        +
        + +
        +
        + Interested in web development, but don't know where to begin? Don't worry, I've got you covered. + +

        My guides

        +

        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.

        +
        + +
        +

        HTML

        + +
        + +
        +

        CSS

        +
        + +
        +

        Javascript

        +
        + +
        +

        Snippets

        +
        +
        + + + + + diff --git a/guides/your-first-webpage.html b/guides/your-first-webpage.html new file mode 100644 index 0000000..1ab6b32 --- /dev/null +++ b/guides/your-first-webpage.html @@ -0,0 +1,164 @@ + + + + + + + + + + + + Your first webpage + + + +
        +

        Your first webpage

        + + +
        + +
        +
        + +
        +
        +

        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 Visual Studio Code

        + +

        Create your html file

        + +

        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 index.html (you may need to show filetypes to rename .txt to .html. So check here for MacOS, or Windows).

        + +

        Basic Boilerplate

        + +

        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.

        + +

        Add the following code snippet into your file, and save.

        + +
        <!DOCTYPE html>
+ <html lang="en">
+  <head>
+  </head>
+  <body>
+  </body>
+</html>
        + +

        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).

        + +

        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?

        + +

        Snippet explaination

        +

        <!DOCTYPE html> a standalone tag that tells the browser what document type to expect. We're using HTML5, so it's a short and simple declaration.

        +

        <html lang="en"> 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.

        +

        <head> 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 head tags will not be directly shown on the webpage.

        +

        <body> this is a container for the content/body of the webpage. This is where visible elements, and content is applied.

        + +

        Basic Content

        +

        So now we'll add some visible content, to make a real webpage, and not just a blank page.

        + +

        Between the body 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.

        +
        <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>
+
+<img src="https://via.placeholder.com/200x200/">
+<img src="https://via.placeholder.com/200x200/">
+<img src="https://via.placeholder.com/200x200/">
        + +

        Now if you refresh the webpage, tada! We have content.

        + +

        A little styling

        +

        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.

        + +

        Between the head tags, we'll add the style tag, allowing us to embed the CSS into the page.

        +
        <style>
+</style>
        + +

        The CSS

        +

        For the actual styling, add the following snippet between the style tags.

        +
        html{
+	height: 100%;
+	font-size: 12px;
+	background: #67aacc;
+	background: linear-gradient(0, #020024 0%, #10106b 10%, #67aacc 35%, #8cecf5 60%, #fff 100%);
+}
+body{
+	margin: 0 auto;
+	max-width: 980px;
+	padding: 4px 12px;
+	text-align: center;
+	font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+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 #67aacc;
+	border-style: dashed;
+}
+img:hover{
+	border-color: lightskyblue;
+}
        + +

        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.

        + +

        Customise your site

        +

        I've intentionally made the styling "cool" and experimental 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.

        + +

        If you're unsure about the #67aacc, etc. they're colours, take a quick look here.

        + +

        Page title

        + +

        You know those titles that show at the top of your browser/in tabs? We're going to add that in.

        + +

        Between the head tags, and above the style tag add the following.

        + + 
        <title>My website</title>
        + +

        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).

        + +

        It's done!

        +

        Your first webpage is official complete. Before you start applying for jobs in the field, I do recommend looking at the rest of my Web Development 101 guide. This will cover the most common elements, more CSS styling, a little Javascript for client-side scripting, and a few additional snippets.

        +
        +
        + + + + + From fdb12d608e96cf35a427ac82eb5cea850c2a24c2 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Fri, 18 Nov 2022 05:21:50 -0500 Subject: [PATCH 12/26] Add links to guides on about page --- about.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/about.html b/about.html index 7fd72bf..e244ec7 100644 --- a/about.html +++ b/about.html @@ -41,7 +41,8 @@

        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.

        What else do you do?

        -

        Ok sure, I'm (extremely) slowly working on the basic infrastructure, and website for aNetwork, a gaming community, and public game server host. If there's ever anything else, you can find out more on my projects page, or on my blog.

        +

        Ok sure, I'm (extremely) slowly working on the basic infrastructure, and website for aNetwork, a gaming community, and public game server host. I'm also working on writing guides on server hosting, and web development.

        +

        If there's ever anything else, you can find out more on my projects page, or on my blog.

        What do you own?

        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.

        From afb221d1166016303826fc69e02ea00e1cb44cd0 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Fri, 18 Nov 2022 06:02:44 -0500 Subject: [PATCH 13/26] Add first recipe to recipes page --- recipes/index.html | 6 ++ recipes/woky-beef-stew.html | 148 ++++++++++++++++++++++++++++++++++++ 2 files changed, 154 insertions(+) create mode 100644 recipes/woky-beef-stew.html diff --git a/recipes/index.html b/recipes/index.html index 6e034d4..e31b711 100644 --- a/recipes/index.html +++ b/recipes/index.html @@ -31,6 +31,12 @@
        +

        A collection of recipes I use, mostly budget oriented, but always tastee.

        +
        +
        +
        diff --git a/recipes/woky-beef-stew.html b/recipes/woky-beef-stew.html new file mode 100644 index 0000000..6fc0eef --- /dev/null +++ b/recipes/woky-beef-stew.html @@ -0,0 +1,148 @@ + + + + + + + + + + + + Woky Beef Stew + + + +
        +

        Woky Beef Stew

        + + +
        + +
        +
        + +
        + +
        +

        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.

        +
        +
        +

        Requirements

        +

        Time: ~1.5 hours

        +
          +
        • Measuring jug
          • +
        • Wok
          • +
        • Wooden Spoon
          • +
        • (Chef's) Knife
          • +
        • Cutting Board
          • +
        • Tinfoil, or lid for wok
          • +
        • Bowl
          • +
        +
        +
        +

        Ingredients

        +

        These are the ingredients for two adult portions

        +
          +
        • 200g (Stewing) Steak (Diced)
          • +
        • 1 Potato (Diced)
          • +
        • ~1.5 Carrot (Sliced)
          • +
        • .5 Onion (Sliced)
          • +
        • .5 celery stalk (Sliced)
          • +
        • 2 tsp Corn starch (mixed with water)
          • +
        • ~75g Peas (Frozen or not)
          • +
        • ~75g Corn (Frozen or not)
          • +
        • 1.5 tbsp tomato puree
          • +
        • .5 tin chopped tomatos
          • +
        • 300ml (boiling) water
          • +
        • 1 beef/vegetable stock cube
          • +
        +

        Seasonings

        +
          +
        • 1 tsp Salt
          • +
        • 1 tsp Oregano
          • +
        • .5 tsp Basil
          • +
        • 1 tsp Paprika
          • +
        • 1 tsp Cinnamon
          • +
        • 1 tsp Sugar
          • +
        • .5 tsp Turmeric
          • +
        • 1 Garlic clove (Bashed)
          • +
        +
        +
        +

        Preperation

        +

        Chop the ingredients as stated in the ingredients section.

        +

        Add stock cube(s) into the measuring jug, then fill with the boiling water. Mix until disolved little.

        +

        Add cornstarch into a mug/bowl with a little cold water and mix until a paste.

        +
        +
        +

        Instructions

        +
          +
        1. +

          Brown the beef/steak

          +

          5-10 minutes

          +

          Add the wok to the stove, and set to a high heat for a few minutes.

          +

          Add a splash of oil, then the meat.

          +

          Allow the meat to brown on all sides, 'stirring' occassionally.

          +

          Once browned drain the fat.

          +
          2. +
        2. +

          Add the flavour (and celery)

          +

          3-5 minutes

          +

          Add the onion, celery, seasonings, and puree to the wok.

          +

          Stir thoroughly so that the puree and seasoning covers everything.

          +

          Slowly stir-fry for 1-3 minutes.

          +
          3. +
        3. +

          Add the liquids

          +

          15-20 minutes

          +

          Add the chopped tomatos, and the stock to the wok.

          +

          Mix the contents together.

          +

          Season to taste with salt/pepper. If unsure, just leave it as is.

          +

          Bring to a boil, then reduce the stoves heat.

          +

          Cover the wok with a lid, or some tinfoil, and leave to sit for 15-20 minutes.

          +
          4. +
        4. +

          Add large veg

          +

          20-25 minutes

          +

          Add the cornstarch mixture to the stew, and mix through.

          +

          Add the carrot, and potato to the wok.

          +

          Bring the stew back to a boil, then reduce the heat.

          +

          Re-cover the wok and leave for 20-25 minutes.

          +
          5. +
        5. +

          Add small veg

          +

          10-15 minutes

          +

          Add the peas, and corn, and mix through the stew.

          +

          Re-cover the wok again, and leave for another 10-15 minutes.

          +
          6. +
        6. +

          Simmer or serve

          +

          0-60 minutes

          +

          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.

          +
          7. +
        +
        +
        + + + + + From c0e4fd86dec0aa8ba441211172264574b7c36cf2 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Fri, 18 Nov 2022 06:12:57 -0500 Subject: [PATCH 14/26] Add basic styling to .page-nav for recipes --- main.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/main.css b/main.css index 1a65bfd..db1ced0 100644 --- a/main.css +++ b/main.css @@ -34,6 +34,10 @@ pre{ background:#191919;color:#FFF; white-space:pre-wrap;overflow-x:auto; padding:12px;border:1px solid #FFF} +.page-nav{ +float:right; +padding:14px;border:1px solid; +margin:1.4rem;margin-right:auto} footer p{margin:0} table{text-align:left;width:100%;border-collapse:collapse} From abd1962a87e28a37f90aead2624ff7f2442c4093 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Fri, 18 Nov 2022 07:11:24 -0500 Subject: [PATCH 15/26] Change equipment link to about in navigation --- 404.html | 2 +- about.html | 2 +- blog/blog-thoughts-220822.html | 2 +- blog/index.html | 2 +- blog/ive-started-a-blog.html | 2 +- blog/my-steamdeck-arrived.html | 2 +- blog/reducing-homelab.html | 2 +- cv.html | 2 +- equipment.html | 2 +- guides/add-domain-to-server.html | 2 +- guides/add-php-to-nginx.html | 2 +- guides/adminer-setup.html | 2 +- guides/backup-mysql-mariadb.html | 2 +- guides/backup-with-cron.html | 2 +- guides/backup-with-rdiff.html | 2 +- guides/backup-with-rsync.html | 2 +- guides/certbot-ssl.html | 2 +- guides/get-a-domain-name.html | 2 +- guides/guide-to-server-hosting.html | 2 +- guides/index.html | 2 +- guides/initial-server-setup.html | 2 +- guides/install-kvm-virtual-machine.html | 2 +- guides/install-mysql-mariadb.html | 2 +- guides/nginx-install.html | 2 +- guides/nginx-proxy.html | 2 +- guides/nginx-web-optimisation.html | 2 +- guides/password-protect-webpage.html | 2 +- guides/server-install-debian.html | 2 +- guides/set-static-ip.html | 2 +- guides/setup-git-server.html | 2 +- guides/setup-kvm-bridge.html | 2 +- guides/setup-nginx-website.html | 2 +- guides/setup-qemu-kvm.html | 2 +- guides/sql-cheatsheet.html | 2 +- guides/virsh-cheatsheet.html | 2 +- guides/vm-seperation-of-concerns.html | 2 +- guides/web-dev-101.html | 2 +- guides/your-first-webpage.html | 2 +- index.html | 2 +- projects.html | 2 +- recipes/index.html | 2 +- recipes/woky-beef-stew.html | 2 +- sitemap.html | 2 +- support.html | 2 +- websites.html | 2 +- 45 files changed, 45 insertions(+), 45 deletions(-) diff --git a/404.html b/404.html index bbe8b05..f67d98a 100644 --- a/404.html +++ b/404.html @@ -20,7 +20,7 @@

      2022

    -

    HTML

    +

    Getting started

    +
    + +
    +

    HTML

    +
      +
    • What is a tag/element?

    CSS

    +
      +
    • What is a selector?
      • +
    diff --git a/guides/webpage-to-website.html b/guides/webpage-to-website.html new file mode 100644 index 0000000..395b0b6 --- /dev/null +++ b/guides/webpage-to-website.html @@ -0,0 +1,130 @@ + + + + + + + + + + + + Webpage to website + + + +
    +

    Webpage to website

    + + +
    + +
    +
    + +
    +
    +

    With a basic webpage now created, the next hurdle is to add multiple pages, and get them all linked together into a website of some sort.

    + +

    Create a new page

    +

    First off we need a second page, with its own unique name. Let's call it about.html.

    +

    To quickly get this up, copy and paste the index.html file from the previous guide, and simply rename it.

    + +

    Link the pages

    +

    Next up, creating our links. We're going the traditional route, with a navbar. So at the top of the body tag, above the other content, add the following.

    +
    <nav>
+	<a href="index.html">Home</a>
+	<a href="about.html">About</a>
+</nav>
    + +

    The key part of the snippet is the anchor/a tag, as this tells the browser to create the link to the files in the hrefs.

    + +

    Style the navigation

    +

    In the style tag, add the following (I recommend at the bottom of what's already there). Then give the page a reload.

    +
    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;
+}
    + +

    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.

    + +

    Make the styling global

    +

    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. Open file, change style, save, and repeat...

    + +

    Thankfully there's a simple solution to this problem, and it's actually best-practice to do this for every website!

    + +

    External CSS

    +

    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.

    + +

    How

    +

    First off, create a new file (same place as the .html files) called main.css, this will be our external stylesheet.

    +

    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.

    + +

    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.

    + 
    <link rel="stylesheet" type="text/css" href="main.css">
    +

    Reload, and voila! The site looks exactly the same. It's just easier to manage now.

    + +

    Footer

    + +

    To finish things off, why not add a quick footer proclaiming our copyright of the site?

    + +

    Add the following snippet just before the closing </body> tag.

    + +
    <footer>
+	<p>© Aney 2022 | Made with ♥</p>
+</footer>
    + +

    And a little styling to the CSS file.

    +
    body{
+	display: flex;
+	flex-direction: column;
+}
+main{
+	flex: 1 0 auto;
+}
+footer{
+	background-color: black;
+	color: white;
+}
    + +

    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 body styling, and add it to the pre-existing body styling near the top of your CSS file.

    + +

    We got a website

    +

    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.

    + +

    From here there are a few different directions. You could:

    +
      +
    1. Follow along to the rest of my web-dev 101
      2. +
    2. Venture to the internet and learn everything you can about web development
      3. +
    3. Setup a server, pop what you've got on the worldwide web, and call it a day
      4. +
    + +

    Whatever you choose to do, I offer you the best of luck.

    + +
    +
    + + + + + From 31d51c2e00224fe3411029bf7403d9f240225528 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Wed, 30 Nov 2022 06:41:30 -0500 Subject: [PATCH 26/26] Tweak CV content And add end date to TJS as quitting in Jan of the new year --- cv.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/cv.html b/cv.html index 6093e48..bfa079c 100644 --- a/cv.html +++ b/cv.html @@ -32,14 +32,14 @@

    About Me

    -

    I'm a helpful and well-mannered person that can work both alone, and as part of a team. I have a willingness to learn, and an inate proficiency with optimisation, and problem-solving skills. A goal of mine is to always help people to the best of my ability, and to improve myself wherever possible.

    +

    I'm a helpful and well-mannered person that can work both alone, and as part of a team. I have a willingness to learn, and a proficiency with post-optimisation, and problem-solving. A goal of mine is to always help people to the best of my ability, and to improve myself wherever possible.

    Experience/Employment History

    TJS

    -

    April 2021 - Current

    +

    April 2021 - January 2023

    Position: Developer

    My time at TJS online is spent developing, and maintaining both the front, and back-end of the dozens of client websites, primarily using a Symfony based stack.

    Skills: PHP Symfony SCSS Git Linux NGINX SEO

    @@ -48,26 +48,26 @@

    Advantage Finance Ltd

    Time: October 2018 - March 2021

    Position: System Developer and Technician

    -

    I worked as part of the DevOps team at the car financing company, Advantage Finance. Whilst there I worked full-stack on the numerous bespoke systems; adding features, working on bug fixes and rewriting legacy code for both desktop and web applications. I also assumed the position of IT support, aiding with general AD and PC issues, along with assisting in the training of new starters.

    +

    I worked as part of the DevOps team at the car financing company, Advantage Finance. Whilst there I worked full-stack on the numerous bespoke systems; adding features, working on bug fixes, and rewriting legacy code for both desktop and web applications. I also assumed the position of IT support, aiding with general AD and PC issues, along with assisting in the training of new starters.

    Skills: VB6 VB.net ASP Classic SVN SQL Active Directory

    Oxfam

    Time: January 2014 - September 2018

    Position: Volunteer

    -

    While at the renowned charity organisation’s store I handled a multitude of tasks; ranging from working the till, cash handling, tidying and stocking the shop. I was also entrusted with additional tasks such as making bank deposits, opening the store and supervising Saturday’s staff tasks. I also enjoyed holding conversations with many of the customers, helping them feel welcome in the store.

    +

    While at the renowned charity organisation’s shop I handled a multitude of tasks; ranging from working the till, cash handling, tidying and stocking the shop. I was also entrusted with additional tasks such as making bank deposits, opening the shop, and supervising Saturday’s staff. I enjoyed holding conversations with the customers, learning the familiar faces, and helping everyone feel welcom in the shop.

    Tesco

    Time: March 2014 - April 2014

    Position: Personal Picker

    -

    Whilst on the Prince's Trust I did a month’s work experience at a large Tesco store. This involved making 'picks' that were all completed without any errors or customer complaints. I also assisted a number of customers find their desired products and way around the shop.

    +

    Whilst on the Prince's Trust I did a month’s work experience at a large Tesco shop. This involved making 'picks' that were all completed without any errors or customer complaints. I also assisted a number of customers find their desired products and way around the shop.

    Lake Marketing and Events

    Time: January 2013 - December 2013

    Position: (Apprentice) Graphic Designer

    -

    During my apprenticeship I designed a multitude of various prints such as posters, business cards, flyers, etc. for a wide array of local and regional businesses ranging from small start-ups to larger brands such as Subway. I also designed, and wireframed a number of websites, and aided in the development of a few; including the company's own website, and the Lincolnshire Food Festival’s using Wordpress.

    +

    During my apprenticeship I designed a multitude of various prints such as posters, business cards, flyers, etc. for a wide array of local and regional businesses ranging from small start-ups to larger brands such as Subway. I also designed, and wireframed a number of websites, and aided in the development of a few; including the company's own website, and the Lincolnshire Food Festival’s using Wordpress.

    Skills: Photoshop Illustrator Wordpress