xbazzi/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2 from alexbazzi/project-hotfix

Browse Source 
build(0.4.0): Update content and add CORS.
This commit is contained in:
Alexander Bazzi 2024-04-02 00:45:03 -06:00 committed by GitHub
commit 0b00dab4d2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 343 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.github/workflows/deploy-site.yaml vendored
View File

@ -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

BIN
Monocraft.ttf Normal file
View File

Binary file not shown.

6
README.md
View File

@ -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.
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 <a href="https://www.xbazzi.com/website.html">article</a>.

BIN
assets/img/css.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

0
assets/img/alien2_clr.gif → assets/img/gifs/alien2_clr.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
assets/img/email.gif → assets/img/gifs/email.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
assets/img/gifs/thispageisunderconstruction.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

0
assets/img/vim_on_fire.gif → assets/img/gifs/vim_on_fire.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
assets/img/github.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

BIN
assets/img/linkedingif.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
assets/img/penguin.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
assets/img/website-diagram-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
assets/img/website.drawio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

46
assets/scripts/aside.js Normal file
View File

@ -0,0 +1,46 @@
document.addEventListener('DOMContentLoaded', (event) => {
var sidebarHtml = `
<aside>
<div class="sidebar-container">
<div class="sidebar-title">Quick links</div>
<nav id="nav">
<ul>
<li>
<a href="index.html">Home</a>
</li>
</ul>
<ul>
<li>
<a href="https://github.com/alexbazzi" target="_blank"><span class="fa-brands fa-github"></span>GitHub</a>
</li>
</ul>
<ul>
<li>
<a href="https://linkedin.com/in/alexbazzi" target="_blank"><span class="fa-brands fa-linkedin"></span>LinkedIn</a>
</li>
</ul>
<a target='_blank' rel='noreferrer noopener'
href='mailto:xander@xbazzi.com'>
<img style="height: 40px; margin: 10px;" src="assets/img/gifs/email.gif">
</a>
</nav>
</div>
<div class="sidebar-container">
<div class="sidebar-title">Cyware RSS feed</div>
<div id="rss-feed">Loading...</div>
</div>
</aside>
`;
// 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();
}
}
});

5
assets/scripts/rss.js
View File

@ -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();
// Make script available globally
window.loadRSSFeed = displayRSSFeed;

73
assets/style/style.css
View File

@ -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%;

11
changelog.md
View File

@ -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 \<aside\> 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.

96
homenetwork.html
View File

@ -6,9 +6,15 @@
<meta property="og:image"
content="https://sadgrl.online/images/og/homepage.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/style/style.css">
<!-- <script src="assets/scripts/load.js"></script> -->
<!-- <script src="//gc.zgo.at/count.js" data-goatcounter="https://sadgrl.goatcounter.com/count" async=""></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="assets/scripts/rss.js"></script>
<script src="assets/scripts/aside.js"></script>
<script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script>
<link rel="icon" href="/assets/images/fav.gif" type="image/gif">
</head>
@ -19,51 +25,59 @@
<main>
<div class="wrapper">
<div class="title">
<div class="title" style="font-style: italic;">
<a href="index.html">../</a>
Home datacenter project
homenetwork.html
</div>
<div class="content">
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.
<h1>Datacenter at Home</h1>
<div class="author">Written by Xander Bazzi on 24-03-12.</div>
<br>
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.
<br>
<br>
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.
<br>
<br>
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.
<br>
<br>
<a href="assets/img/dc1.JPG"><img src="assets/img/dc1.JPG" class="blog-image"></a>
<br>
<br>
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.
<br>
<br>
<a href="assets/img/homelab_logical.png"><img src="assets/img/homelab_logical.png" class="blog-image"></a>
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.
<br>
<br>
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.
<br>
<br>
<a href="assets/img/dc2.JPG"><img src="assets/img/dc2.JPG" class="blog-image"></a>
<br>
<br>
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.
<br>
<br>
<a href="assets/img/mb1.JPG"><img src="assets/img/mb1.JPG" class="blog-image"></a>
<br>
<br>
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.
<br>
<br>
<a href="assets/img/homelab_logical.png"><img src="assets/img/homelab_logical.png" class="blog-image"></a>
<br>
<br>
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.
<br>
<br>
A home datacenter is what most Americans deserve, but don't need.
@ -73,42 +87,10 @@
</main>
<aside>
<div class="sidebar-container">
<div class="sidebar-title">Quick links</div>
<nav id="nav">
<ul>
<li>
<a href="index.html">Home</a>
</li>
</ul>
<ul>
<li>
<a href="https://github.com/alexbazzi" target="_blank"><span class="fa-brands fa-github"></span>GitHub</a>
</li>
</ul>
<ul>
<li>
<a href="https://linkedin.com/in/alexbazzi" target="_blank"><span class="fa-brands fa-linkedin"></span>LinkedIn</a>
</li>
</ul>
<a target='_blank' rel='noreferrer noopener'
href='mailto:x@xbazzi.com'>
<img style="height: 40px; margin: 10px;" src="assets/img/email.gif">
</a>
</nav>
</div>
<div class="sidebar-container">
<div class="sidebar-title">RSS feeds</div>
<div id="rss-feed">Loading...</div>
<script src="assets/scripts/rss.js" crossorigin="anonymous"></script>
</div>
</aside>
</div>
<footer id="footer"></footer>
<footer id="footer">
This site is hosted in an AWS S3 bucket, cached globally by a CloudFront distribution, and updated programmatically through GitHub Actions.
</footer>
</div>
<style>
.update {

79
index.html
View File

@ -7,10 +7,9 @@
content="https://sadgrl.online/images/og/homepage.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/style/style.css">
<!-- <script src="assets/scripts/load.js"></script> -->
<!-- <script src="//gc.zgo.at/count.js" data-goatcounter="https://sadgrl.goatcounter.com/count" async=""></script> -->
<script src="assets/scripts/rss.js"></script>
<script src="assets/scripts/aside.js"></script>
<script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script>
<link rel="icon" href="/assets/images/fav.gif" type="image/gif">
</head>
<body>
@ -22,73 +21,37 @@
<div class="title"><span class="fa-solid fa-user"></span> whoami</div>
<div class="content">
<p>
Network, aerospace, and software engineer turned
cybersecurity professional. Exploring the applications of AI in offensive security,
software-defined networking, and serverless architectures.
Network, aerospace, and software engineer working in cybersecurity.
Exploring the applications of AI in red teaming,
software-defined networking, and reverse engineering.
</p>
</div>
<div class="title"><span class="fa-solid fa-wrench"></span> updates
</div>
<div class="content">
<p class="update">01/10/2024: Generated the cool bg image with DALL-E.</p>
<p class="update">12/26/2023: This site is officially online.</p>
<p class="update">12/05/2023: Finished the home datacenter project.</p>
</div>
<div class="title"><span class="fa-solid fa-lightbulb"></span> projects </div>
<div class="content flex">
<a href="./homenetwork.html"><img src="assets/img/dc1.JPG" alt="Datacenter preview" class="project-image"></a>
<p class="blog"><a href='./homenetwork.html'>
Home datacenter
</a>
</p>
<a href=""><img src="assets/img/website.png" alt="Website preview" class="project-image"></a>
<p class="blog"><a href='./website.html'>
This website
</a>
</p>
<div class="content" style="display: flex;">
<div class="project">
<a href="./homenetwork.html"><img src="assets/img/dc1.JPG" alt="Datacenter preview" class="project-image"></a>
<a href='./homenetwork.html'><span class="caption">
Datacenter at Home
</span></a>
</div>
<div class="project">
<a href="./website.html"><img src="assets/img/website.png" alt="Website preview" class="project-image"></a>
<a href='./website.html'><span class="caption">
Overengineered Static Site (this website)
</span></a>
</div>
</div>
</div>
</main>
<aside>
<div class="sidebar-container">
<div class="sidebar-title">Quick links</div>
<nav id="nav">
<ul>
<li>
<a href="index.html">Home</a>
</li>
</ul>
<ul>
<li>
<a href="https://github.com/alexbazzi" target="_blank"><span class="fa-brands fa-github"></span>GitHub</a>
</li>
</ul>
<ul>
<li>
<a href="https://linkedin.com/in/alexbazzi" target="_blank"><span class="fa-brands fa-linkedin"></span>LinkedIn</a>
</li>
</ul>
<a target='_blank' rel='noreferrer noopener'
href='mailto:x@xbazzi.com'>
<img style="height: 40px; margin: 10px;" src="assets/img/email.gif">
</a>
</nav>
</div>
<div class="sidebar-container">
<div class="sidebar-title">RSS feeds</div>
<div id="rss-feed">Loading...</div>
<script src="assets/scripts/rss.js" crossorigin="anonymous"></script>
</div>
</aside>
</div>
<footer id="footer">
This site is hosted in an AWS S3 bucket, cached globally by a CloudFront distribution, and updated programmatically through GitHub Actions.
</footer>
<div class="under-construction">
<img src="assets/img/gifs/thispageisunderconstruction.gif" alt="Under construction gif"></img>
</div>
</div>
<style>
.update {

153
website.html Normal file
View File

@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xbazzi.com</title>
<meta property="og:image" content="https://sadgrl.online/images/og/homepage.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/style/style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="assets/scripts/rss.js"></script>
<script src="assets/scripts/aside.js"></script>
<script src="https://kit.fontawesome.com/e6a86da546.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="container">
<div class="topbar"></div>
<div id="flex">
<main>
<div class="wrapper">
<div class="title" style="font-style: italic;">
<a href="index.html">../</a>
website.html
</div>
<div class="content">
<h1>Overengineered Static Site</h1>
<div class="author">Written by Xander Bazzi on 24-04-01.</div>
<br>
In the ever-evolving landscape of web development and hosting, the journey of deploying a
personal website can often traverse through complex and intriguing paths. My recent adventure in
launching my own website is a testament to the myriad of possibilities that cloud technologies
offer, albeit with an overcomplicated flair that could rival one of Rube Goldberg's
contraptions. Let's
delve into the intricacies of hosting a static site on AWS, using services such as
S3, CloudFront, API Gateway, and a sprinkle of GitHub Actions magic.
<br>
<br>
The cornerstone of this digital architecture is the AWS S3 bucket, renowned for its simplicity
and reliability. I decided to serve the website through CloudFront,
AWS's content delivery network,
to reduce latency and improve load times for users across the globe.
To seamlessly incorporate an RSS feed from cyware.com and mitigate CORS errors, I implemented an
AWS HTTP API Gateway to act as a backend proxy. This HTTP endpoint works as a bridge, fetching
the RSS feed from a server (as opposed to a client browser) and
presenting it as if it were a native component of the site, thereby circumventing any CORS
limitations.
<br>
<br>
<a href="assets/img/website-diagram-dark.png"><img src="assets/img/website-diagram-dark.png"
class="diagram"></a>
<br>
<br>
The quest for automation and seamless updates led me down the path of
integrating GitHub Actions into the workflow. Each push to the master branch
triggers a series of actions that programmatically update the contents of the S3
bucket. Furthermore, the
CloudFront distribution cache is invalidated, forcing it to fetch and distribute the newest
content.
Here is the <code> deploy-site.yaml</code> file that runs the CI pipeline:
<pre><code class="language-yaml">name: Deploy to AWS S3 and Invalidate CloudFront
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Sync to S3
uses: jakejarvis/s3-sync-action@master
with:
args: >
--follow-symlinks
--delete
--exclude '.git/*'
--exclude '.github/*'
env:
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'
SOURCE_DIR: './'
- name: Invalidate CloudFront Distribution
uses: chetan/invalidate-cloudfront-action@v1
env:
DISTRIBUTION: E3VV7PXHG95EM0
PATHS: '/*'
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: 'us-east-1'</code></pre>
</p>
</div>
</div>
</main>
</div>
<footer id="footer">
This site is hosted in an AWS S3 bucket, cached globally by a CloudFront distribution, and updated
programmatically through GitHub Actions.
</footer>
</div>
<style>
.update {
border: 2px dashed var(--main-color);
padding: 5px;
}
main {
background-color: transparent !important;
}
.content {
background-color: var(--background);
}
.title {
margin-top: var(--content-spacing);
}
.title:first-child {
margin-top: 0 !important;
}
.myButton {
display: flex;
margin: 0 auto;
width: 150px;
}
.yw-content {
text-align: center;
}
</style>
</body>
</html>