website/website.html
2024-07-03 23:39:09 -06:00

135 lines
5.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xbazzi.com</title>
<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/school-book.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="assets/scripts/footer.js"></script>
</head>
<body>
<div id="container">
<a href="https://www.xbazzi.com"><div class="topbar" ></div></a>
<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, 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-light2.png"><img src="assets/img/website-diagram-light2.png"
class="blog-image"></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 class="language-yaml"> 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>Even though I injected complexity by implementing a cloud-based, declarative, highly-available architecture,
I still haven't touched a single JS framework; the whole codebase is simple HTML, CSS and javascript.
Maybe one day I'll learn React, Vue, or Svelte... maybe even JQuery... but not today.
</p>
</div>
</div>
</main>
</div>
<footer id="footer"></footer>
</div>
<style>
main {
background-color: transparent !important;
}
.content {
background-color: var(--background);
}
.title {
margin-top: var(--content-spacing);
}
.title:first-child {
margin-top: 0 !important;
}
</style>
</body>
</html>