diff --git a/.github/workflows/deploy-site.yaml b/.github/workflows/deploy-site.yaml index 56730dc..256d5b9 100644 --- a/.github/workflows/deploy-site.yaml +++ b/.github/workflows/deploy-site.yaml @@ -3,7 +3,7 @@ name: Deploy to AWS S3 and Invalidate CloudFront on: push: branches: - - master # Adjust this to your repository's default branch + - master jobs: deploy: @@ -24,8 +24,8 @@ jobs: AWS_S3_BUCKET: www.xbazzi.com AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - AWS_REGION: 'us-east-1' # e.g., us-east-1 - SOURCE_DIR: './' # The root of your repository; adjust if your files are in a subdirectory + AWS_REGION: 'us-east-1' + SOURCE_DIR: './' - name: Invalidate CloudFront Distribution uses: chetan/invalidate-cloudfront-action@v1 diff --git a/Monocraft.ttf b/Monocraft.ttf new file mode 100644 index 0000000..4066b0a Binary files /dev/null and b/Monocraft.ttf differ diff --git a/README.md b/README.md index 4b5b4fd..f90aaac 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ # Personal website -A simple static site built with HTML, CSS and JavaScript. Hosted on AWS S3 and distributed globally through AWS Cloudfront. Code updated automatically. -## Backend workflow -This static site is hosted on an AWS S3 bucket, which is cached and served globally through AWS Cloudfront Edge Locations. The code is programatically updated with GitHub Actions every time the master branch is merged. The action is set up with a declarative `.yaml` file that uploads the source code and assets to the S3 bucket. The workflow then invalidates the Cloudfront distribution cache so that the latest site content is pulled from the origin bucket. For authentication, the action uses access and secret keys from an authorized AWS IAM user. \ No newline at end of file +My personal website is a modern homage to the '90s, serving as the dichotomy between the simple aesthetics of retro websites with the unnecessary complexity of the latest DevOps abstractions. It's built using HTML, CSS, and JavaScript, and boasts a simple yet captivating static design. Hosted on AWS S3 and globally distributed via AWS CloudFront, it ensures fast access anywhere. It also uses a proxy --created with an HTTP AWS API Gateway-- to avoid CORS errors when retrieving resources from other domains (e.g. fonts, RSS feeds, etc...). An automated GitHub Actions workflow keeps the production site updated and manages the CloudFront distribution with every push to the master branch. + +Read more about it in the article. \ No newline at end of file diff --git a/assets/img/css.gif b/assets/img/css.gif deleted file mode 100644 index 020c75a..0000000 Binary files a/assets/img/css.gif and /dev/null differ diff --git a/assets/img/alien2_clr.gif b/assets/img/gifs/alien2_clr.gif similarity index 100% rename from assets/img/alien2_clr.gif rename to assets/img/gifs/alien2_clr.gif diff --git a/assets/img/email.gif b/assets/img/gifs/email.gif similarity index 100% rename from assets/img/email.gif rename to assets/img/gifs/email.gif diff --git a/assets/img/gifs/thispageisunderconstruction.gif b/assets/img/gifs/thispageisunderconstruction.gif new file mode 100644 index 0000000..de76a01 Binary files /dev/null and b/assets/img/gifs/thispageisunderconstruction.gif differ diff --git a/assets/img/vim_on_fire.gif b/assets/img/gifs/vim_on_fire.gif similarity index 100% rename from assets/img/vim_on_fire.gif rename to assets/img/gifs/vim_on_fire.gif diff --git a/assets/img/github.gif b/assets/img/github.gif deleted file mode 100644 index eeb8383..0000000 Binary files a/assets/img/github.gif and /dev/null differ diff --git a/assets/img/linkedingif.gif b/assets/img/linkedingif.gif deleted file mode 100644 index 5f8c6ea..0000000 Binary files a/assets/img/linkedingif.gif and /dev/null differ diff --git a/assets/img/penguin.gif b/assets/img/penguin.gif deleted file mode 100644 index a54f6fc..0000000 Binary files a/assets/img/penguin.gif and /dev/null differ diff --git a/assets/img/website-diagram-dark.png b/assets/img/website-diagram-dark.png new file mode 100644 index 0000000..407bfbb Binary files /dev/null and b/assets/img/website-diagram-dark.png differ diff --git a/assets/img/website.drawio.png b/assets/img/website.drawio.png new file mode 100644 index 0000000..6c36500 Binary files /dev/null and b/assets/img/website.drawio.png differ diff --git a/assets/scripts/aside.js b/assets/scripts/aside.js new file mode 100644 index 0000000..1788e03 --- /dev/null +++ b/assets/scripts/aside.js @@ -0,0 +1,46 @@ +document.addEventListener('DOMContentLoaded', (event) => { + var sidebarHtml = ` + + `; + + // Insert the sidebar bar after the main element + var targetElement = document.querySelector('main'); + if (targetElement) { + targetElement.insertAdjacentHTML('afterend', sidebarHtml); + + // After the sidebar has loaded, fetch the RSS feed + if (window.loadRSSFeed()) { + window.loadRSSFeed(); + } + } +}); \ No newline at end of file diff --git a/assets/scripts/rss.js b/assets/scripts/rss.js index d5fd797..0e423a5 100644 --- a/assets/scripts/rss.js +++ b/assets/scripts/rss.js @@ -27,7 +27,7 @@ function parseRSSFeed(feedXML) { } async function displayRSSFeed() { - const url = "https://tldr.tech/api/rss/tech"; //https://www.nist.gov/news-events/cybersecurity/rss.xml + const url = "https://1pro71t329.execute-api.us-east-1.amazonaws.com/allnews/feed" const rssData = await fetchRSSFeed(url); if (rssData) { @@ -38,4 +38,5 @@ async function displayRSSFeed() { } } -displayRSSFeed(); \ No newline at end of file +// Make script available globally +window.loadRSSFeed = displayRSSFeed; \ No newline at end of file diff --git a/assets/style/style.css b/assets/style/style.css index 7d96ef3..18a5969 100644 --- a/assets/style/style.css +++ b/assets/style/style.css @@ -1,7 +1,7 @@ @font-face { font-family: "Monocraft"; src: local("Monocraft"); - src: url("https://www.xbazzi.com/Monocraft.ttf") format("truetype"); + src: url("https://1pro71t329.execute-api.us-east-1.amazonaws.com/Monocraft.ttf") format("truetype"); } :root { @@ -20,6 +20,8 @@ --link-color:var(--accent-1); --border:2px solid black; --arrows:url('../assets/images/arrow.png'); + --font-size-content:18px; + --font-size-code: 13px; } html, @@ -35,9 +37,15 @@ body { background-attachment: scroll; z-index: 1; } + +h1 { + margin: 0px; +} + ul { padding-inline-start: 5px; } + .email-link { position: absolute; top: 10px; /* Adjust the position as needed */ @@ -67,18 +75,13 @@ p.blog { } -.project-image { - display: block; /* Ensures the image does not have inline whitespace below it */ - max-width: 20%; /* Ensures the image is responsive and fits its container */ - height: auto; /* Maintains aspect ratio */ - margin-top: 10px; -} #container, .topbar img { max-width: 1000px; margin: 0 auto; } + #container a { color:var(--link-color); } @@ -124,10 +127,23 @@ aside { margin-left:var(--content-spacing); } +.author { + font-size: 15px; + font-style: italic; +} + + +.diagram { + width: 100%; + display: block; + margin: 0 auto; +} + .sidebar-container { /*border:var(--border);*/ /*margin-top: var(--content-spacing);*/ background-color: var(--background); + margin-bottom: var(--content-spacing); } .sidebar-title { @@ -144,7 +160,6 @@ aside { .title { font-family: 'Monocraft'; padding: 3px 10px; /* Adjust top/bottom and left/right padding as needed */ - font-weight: bold; font-size: 20px; border: var(--border); color: var(--title-text-color); @@ -152,6 +167,7 @@ aside { background-image: var(--titleBars); background-repeat: repeat-x; margin-top: var(--content-spacing); + font-weight: bold; /* Remove text-indent if it's not needed */ @@ -186,14 +202,53 @@ nav ul li a { color:var(--accent-1); } +.project { + vertical-align: top; + display: inline-block; + text-align: center; + width: 120px; + padding: 20px; +} + +.project-image { + display: block; /* Ensures the image does not have inline whitespace below it */ + max-width: 100%; /* Ensures the image is responsive and fits its container */ + height: auto; /* Maintains aspect ratio */ + margin-top: 10px; + margin: auto; + width: 100px; +} + .content { + padding: 1px 20px; opacity: 1; background-color: var(--background); - font-size: 18px; + font-size: var(--font-size-content); font-family: "Times New Roman", Times, serif; } +.under-construction { + text-align: center; +} + +pre { + font-size: var(--font-size-code); + /*white-space: pre-wrap; /* Ensures lines are wrapped */ + /*word-wrap: break-word; /* Breaks the word to prevent overflow */ + overflow-x: auto; /* Adds horizontal scrollbar if needed */ + max-width: 100%; /* Ensures the pre element does not exceed its container */ +} + +code { + background-color: #252525; /* Light grey background */ + padding: 2px 4px; + border-radius: 3px; + word-wrap: break-word; + font-family: 'Monocraft'; + font-size: 14px; +} + footer { background-color: rgb(70, 70, 70); height:5%; diff --git a/changelog.md b/changelog.md index daeca8c..8288a4d 100644 --- a/changelog.md +++ b/changelog.md @@ -4,6 +4,17 @@ All notable changes to this site will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the versioning is consistent with [Semantic Versioning](https://semver.org/). +## [0.4.0] - 2024-04-1 +### Added +- Cyware RSS feed. +- New project page: Overengineered Static Site. + +### Changed +- Fixed several CSS issues. +- Changed RSS fetch URL to AWS-powered HTTP proxy to avoid CORS errors. +- Modularized the \ element so it can be loaded with a script tag in every page. +- Added "under construction" gif. + ## [0.3.0] - 2024-03-12 ### Added - RSS Feed to tl;dr tech news. diff --git a/homenetwork.html b/homenetwork.html index a9f5bbd..dc57826 100644 --- a/homenetwork.html +++ b/homenetwork.html @@ -6,9 +6,15 @@ + - - + + + + + + + @@ -19,51 +25,59 @@
-
+
../ - Home datacenter project + homenetwork.html
- What first started as a project to play around with declarative deployments and container orchestration has now grown into a server stack that runs critical services for my day to day life. +

Datacenter at Home

+
Written by Xander Bazzi on 24-03-12.
+
+ Embarking on a homelab journey often starts with a spark of curiosity and a dash of ambition. For me, it began as a playful experiment with declarative deployments and container orchestration but swiftly evolved into an essential part of my daily life. This transformation wasn't just about growth in scale; it was about creating a robust infrastructure capable of supporting my day-to-day digital needs with resilience and efficiency. Let's delve deeper into the intricacies of my homelab setup, a testament to the power of hyper-converged infrastructure and the meticulous engineering that sustains it.

- The hyper-converged infrastructure consists of 3 physical servers, all running Proxmox Virtual Environment as a hypervisor. - One of these machines has a 6-slot HDD bay, which is where the TrueNAS instance is virtualized. Another server runs an OPNsense appliance for firewalling and routing. - All servers run k3s master/worker Debian nodes, declaratively provisioned with Ansible and a gitops workflow through flux. Every server is equipped with 10gbps SFP+ NICs, and - the Juniper EX3300 L3 switch also comes with 4 SFP+ 10gbps slots, allowing for relatively fast data transfer speeds on LAN. + + At the heart of my setup are three physical servers, each playing a pivotal role in the orchestration of my digital domain. These servers are powered by Proxmox Virtual Environment, a versatile hypervisor that underpins the entire infrastructure. Proxmox's flexibility and efficiency make it the perfect candidate for running a variety of virtual machines and containers, tailored to my specific requirements. One server, distinct with its 6-slot HDD bay, is the stronghold of my data storage capabilities, hosting a TrueNAS instance. This virtualized environment is not just about storage; it's about reliable, accessible, and secure data management.

- All these virtualized environments and containerized applications need space for persistent storage, which is where TrueNAS comes in. It's a FreeBSD-based NAS system that runs on top of ZFS, which allows - for the creation of highly available and fault tolerant networked file systems. It currently consists of 2 x 6 TB HDDs configured in a mirrored pool, with a 500 GB NVMe SSD as an L2 cache, and 64 GB of RAM as L1 cache. - Because of the layered approach to caching frequently accessed data, we are able to saturate the 10gbps line when doing large-file data transfers (i.e. restoring backups). + Another server in the stack is dedicated to networking, running an OPNsense appliance that oversees firewalling and routing. This setup ensures that my network is not only secure from external threats but also smartly managed to facilitate seamless communication between different services and devices. The backbone of this interconnected ecosystem is a trio of servers, each hosting k3s master/worker Debian nodes. These nodes are provisioned declaratively with Ansible, leveraging a GitOps workflow through Flux. This methodological approach ensures consistency, reproducibility, and scalability, allowing the infrastructure to evolve without compromising reliability.



- - The diagram below depics the logical topology of the network and the connections to external services, namely Cloudflare and AWS. - + Connectivity within this homelab is nothing short of revolutionary, with each server equipped with 10Gbps SFP+ NICs. The inclusion of a Juniper EX3300 L3 switch, featuring 4 SFP+ 10Gbps slots, elevates the network's data transfer capabilities, ensuring that high-speed connectivity is not just a luxury but a standard. This setup facilitates incredibly fast LAN speeds, making large-file data transfers and backup restorations a breeze.

- + + Storage solutions within this homelab are meticulously engineered, with TrueNAS serving as the cornerstone of persistent storage. This FreeBSD-based NAS system leverages ZFS to create a networked file system that is both highly available and fault-tolerant. The configuration includes 2 x 6 TB HDDs in a mirrored pool, supplemented by a 500 GB NVMe SSD as an L2 cache and 64 GB of RAM for L1 caching. This layered caching strategy is crucial for optimizing data access speeds, allowing for the full utilization of the 10Gbps network capacity during intensive data transfer operations.

- - Two of the servers are ultra small form factor PCs, which made installing the massive 10gbps NICs extremely fun. - + + A notable feature of this homelab is its physical footprint. Two of the servers are ultra-small form factor PCs, a design choice that posed an interesting challenge when integrating the sizeable 10Gbps NICs. This constraint didn't hinder performance but rather added a layer of complexity and satisfaction to the assembly process.



- - Accessing the main server BMC webUI through the IPMI interface via Ethernet, bypassing any need to output video into a monitor. - + + An essential aspect of managing this homelab is the use of the main server's BMC webUI, accessed through the IPMI interface over Ethernet. This setup bypasses the need for traditional video output to a monitor, allowing for remote management and troubleshooting of the server, further emphasizing the system's versatility and user-centric design.

+
+
+ + The logical topology of this homelab, detailed in the accompanying diagram, reveals not just the complexity and efficiency of the setup but also its connectivity with external services like Cloudflare and AWS. This integration highlights the homelab's role not just as a standalone system but as a node within a larger network of services, benefiting from the robustness and scalability of cloud solutions while maintaining the personalization and control of a private infrastructure. +
+
+ +
+
+ + This homelab is more than just a collection of hardware and software; it's a dynamic ecosystem that balances performance, security, and scalability. It represents the culmination of a journey from curiosity to critical infrastructure, demonstrating the power of modern virtualization, networking, and storage solutions in creating a resilient, efficient, and deeply personal digital environment. +

A home datacenter is what most Americans deserve, but don't need. @@ -73,42 +87,10 @@
- - - + + + + + \ No newline at end of file