Merge branch 'main' into blog/strategy-pattern

posts/starting-my-homelab-installing-cat6A.md

@@ -0,0 +1,109 @@
+---
+title: "Building my homelab: installing CAT6A"
+slug: /starting-my-homelab-installing-cat6A/
+date: 2026-01-02
+tags: ["projects", "self-hosting"]
+---
+
+Now that I am no longer renting, I am in a position to build my own "homelab".
+For those not in the know, a homelab is a computational environment in your home
+that you can use to run your own servers, networking equipment and services.
+
+Here is an example cribbed from Reddit:
+
+![](./img/example-homelab.jpeg)
+
+I already maintain a remote virtual private server which I have described in
+previous blog posts, but I have long wanted to maintain my own physical
+environment so I can learn more about system administration, run domestic
+automations and basically have fun.
+
+![Recess where the homelab will live](./img/homelab-recess.jpg)
+
+I've been laying the groundwork for this already. When I redecorated my office
+in the summer I deliberately stripped-out a recessed cupboard so that I could
+use the space for the homelab. Similarly, the
+[router cabinet](https://systemsobscure.blog/posts/creating-a-router-cabinet)
+project was designed to eventually interface with the lab.
+
+The main impediment, until now, was the lack of a direct Ethernet connection
+from the router in the lounge to the office. I knew that ultimately I would have
+to address this and had been putting it off.
+
+I decided to use the Christmas break to do the necessary work. The most
+efficient and least-obstrusive way to get wired access to the router was run
+Ethernet from the lounge to the office via the loftspace.
+
+I bought 25m of CAT6A (which allows for speeds of up to 10Gb/s) along with:
+
+- keystone jacks and surface-mount boxes for the terminal points
+- rounded conduit and fixtures
+- flexible trunking (for bends)
+
+Rather than use a single connection from the router to the homelab link switch,
+the more professional approach is to have a mounted outlet at each termination
+point and connect from these to the devices via patch cable.
+
+![Feeding the CAT6A](./img/feeding-cable.jpg)
+
+The first task was the scariest: drilling into the loft. I was careful to check
+for surrounding piping and mains cabling but it was still a bit nerve-racking.
+Luckily the holes went into the ceiling board fine. I inserted rubber grommits
+to stop the holes wearing away when the cable was fed through. I also made use
+of electrician's 'fishing rods' to feed the cable into the loft, through the
+ceiling and insulation.
+
+![Channelling through the loft (1)](./img/loft-1.jpg)
+![Channelling through the loft (2)](./img/loft-2.jpg)
+
+During testing and installation, I just used cable ties to fix the CAT6A to the
+loft beams when channeling the cable between the two outlets. I'll go back later
+(probably when I get round to boarding it properly) and use cable tacks as they
+are neater.
+
+The work in the loft was the most arduous. I had to lie accross wobbly planks
+and handle fiberglass insulation. Even with gloves and long-sleeves this was
+really itchy.
+
+![Measuring out the conduit](./img/measuring-conduit.jpg)
+
+Once the cable had been laid, the next task was to try and hide it as much as
+possible in the downstairs rooms. I originally purchased standard flat conduit
+for this purpose but I realised that the 90 degree bends required would likely
+damage the cable over time. So I had a rethink and used fully-round conduit with
+more forgiving inspection bends. For the sharpest turn I just used bendable
+trunking and accepted that function would have to trump aesthetics.
+
+The main learning curve was installing the keystone jacks. By using jacks I was
+able to avoid crimping the terminal points of the cable. This is quite a skill
+and as it was my first attempt, I knew I would probably mess it up and waste the
+cable in the process.
+
+![Arranging the paired wires in the RJ45 keystone (1)](./img/arranging-the-keystone-2.jpg)
+![Arranging the paired wires in the RJ45 keystone (2)](./img/arranging-the-keystone.jpg)
+
+To use the jack, you strip the sheathing back and feed the four paired wires
+into a fixing plate which is then clamped down with pliers. The clamping cuts
+the wires for you and ensures the copper makes contact with the pins. I
+deliberately chose jacks with zinc shielding which earths the cable when it is
+in contact with the metallic wrappers of the individual wires.
+
+![Testing my practice wiring](./img/testing-practise-cable.jpg)
+
+Before doing it for real I did several practice runs with cable offcuts. I also
+bought a basic RJ45 cable tester so that if I had made a mistake, I would know
+about it early on in the process.
+
+![Entering into the router cabinet](./img/entry-into-router-cabinet.jpg)
+
+![Termination in office recess](./img/office-termination.jpg)
+
+This paid off and by the time I did it for real, it was pretty straightforward.
+It was really gratifying at the end of the process to patch in from the office
+and record 1GB/s as a result of my hard work.
+
+![The humble beginnings of the homelab](./img/humble-beginnings-of-homelab.jpg)
+
+Right now I just have my HPT520 Thin-Client running on the new cable. This runs
+Pihole and an MQTT server. The next step will be to get a rack and switch unit
+and start building the actual lab!

src/pages/home.jsx

@@ -7,69 +7,69 @@ import CodeStats from "../containers/CodeStats"
 // import TodayILearned from "@/containers/TodayILearned"
 
 const HomePage = () => {
-  const { posts } = usePosts()
+	const { posts } = usePosts()
-  return (
+	return (
-    <MainTemplate>
+		<MainTemplate>
-      <div className="container mx-auto md:p-4 py-4 px-1 grow">
+			<div className="container mx-auto md:p-4 py-4 px-1 grow">
-        <div className="space-my-8">
+				<div className="space-my-8">
-          <section className="space-y-4">
+					<section className="space-y-4">
-            <div className="gap-6 flex flex-col items-center sm:flex-row">
+						<div className="gap-6 flex flex-col items-center sm:flex-row">
-              <div className="scanlined">
+							<div className="scanlined">
-                <img src={gruvboxComputer} className="md:w-80 w-50" />
+								<img src={gruvboxComputer} className="md:w-80 w-50" />
-              </div>
+							</div>
-              <div>
+							<div>
-                <h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left">
+								<h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left">
-                  <div className="scanlined inline-block py-1 px-2">
+									<div className="scanlined inline-block py-1 px-2">
-                    systems obscure
+										systems obscure
-                  </div>
+									</div>
-                </h1>
+								</h1>
-                <p className="text-center sm:text-left md:text-left text-muted font-medium">
+								<p className="text-center sm:text-left md:text-left text-muted font-medium">
-                  Another software engineer with a blog. This is my technical
+									A wizard who goes to bed early. This is my technical scrapbook
-                  scrapbook and digital garden.
+									and digital garden.
-                </p>
+								</p>
-              </div>
+							</div>
-            </div>
+						</div>
-          </section>
+					</section>
-        </div>
+				</div>
-      </div>
+			</div>
 
-      <PostListing title="recent posts" posts={posts.slice(0, 5)} />
+			<PostListing title="recent posts" posts={posts.slice(0, 5)} />
 
-      <PostListing
+			<PostListing
-        title="highlights"
+				title="highlights"
-        posts={posts.filter((post) => post.tags.includes("highlight"))}
+				posts={posts.filter((post) => post.tags.includes("highlight"))}
-      />
+			/>
 
-      <div className="container mx-auto md:p-4 py-4 px-1 grow">
+			<div className="container mx-auto md:p-4 py-4 px-1 grow">
-        <div className="space-my-8">
+				<div className="space-my-8">
-          <section className="container">
+					<section className="container">
-            <h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! h2-home scanlined px-2">
+						<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! h2-home scanlined px-2">
-              {`projects`}
+							{`projects`}
-            </h2>
+						</h2>
-            <ul>
+						<ul>
-              <li className="pb-2">
+							<li className="pb-2">
-                <a
+								<a
-                  className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium"
+									className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium"
-                  href="https://eolas.systemsobscure.net"
+									href="https://eolas.systemsobscure.net"
-                  target="_blank"
+									target="_blank"
-                >
+								>
-                  eolas
+									eolas
-                </a>
+								</a>
-              </li>
+							</li>
-              <li>
+							<li>
-                <p className="">
+								<p className="">
-                  A public frontend for my local Zettelkasten created with
+									A public frontend for my local Zettelkasten created with
-                  NodeJS, Python and React.
+									NodeJS, Python and React.
-                </p>
+								</p>
-              </li>
+							</li>
-            </ul>
+						</ul>
-          </section>
+					</section>
-        </div>
+				</div>
-      </div>
+			</div>
-      <CodeStats />
+			<CodeStats />
-      <EolasListing />
+			<EolasListing />
-    </MainTemplate>
+		</MainTemplate>
-  )
+	)
 }
 
 export { HomePage }

src/templates/TagTemplate.jsx

@@ -12,10 +12,8 @@ const TagTemplate = () => {
 
 	return (
 		<MainTemplate>
-			<div className="container mx-auto p-4">
+			<div className="container mx-auto p-4"></div>
-				<h1 className="h1 text-3xl text-[#b8bb26]! font-bold">{`Posts tagged: #${tag}`}</h1>
+			<PostListing title={`Posts tagged: #${tag}`} posts={filteredPosts} />
-			</div>
-			<PostListing title={null} posts={filteredPosts} />
 		</MainTemplate>
 	)
 }