The personal website of Alex Chavez. All serverless. Built on AWS.
Below architecture diagram shows how S3/CloudFront hosts this site using HTTPS:
Mostly for future Alex when he inevitably abandons the site and tries to remember what he did a couple of years ago...
I originally provisioned and configured the services needed for my site using the AWS Console. I ended up creating a CloudFormation (not to be confused with CloudFront btw) template using CloudFormer after the fact. You'll want to modify the CloudFormation template under infra/cloudformation.json if you would like to autonomously provision needed AWS infrastructure using CloudFormation.
As of April 2020, CloudFormation doesn't support AWS Certificate Manager so you'll have to create your own SSL certificate using the AWS Console. In addition, I had to configure my domain's DNS records on Namecheap to point to Route53. Buying your domain through Route53 will save you a couple of steps.
Push or approve PR changes into the master branch. Github Actions defined in .github/workflows/pipeline.yml will build the Webpack project, sync contents from the public/ subdirectory to the S3 bucket, then send a request to CloudFormation to invalidate the distribution's cache in order to propogate site changes across all AWS edge locations.
This is a React static website built and scaffolded by Gatsby primarily for it's React support and plethora of available plugins.
-
Checkout repo and install dependencies from
package.json.npm install
-
Start developing.
Navigate into the site’s directory and start it up:
gatsby develop
-
Open the source code and start editing!
The site is now running at
http://localhost:8000!Note: You'll also see a second link:
http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.