135 lines
5.6 KiB
HTML
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> |