Computer Techniques

The introduction goes here.

Requirements

Design

High-Level Architecture

Components

AWS CloudFront

AWS CloudFront is the content delivery network used to distribute the contents of the Computer Techniques website. There is a CloudFront distribution created for the kylehugh.es S3 bucket. When HTTP(S) requests are made to kylehugh.es they are routed to this CloudFront distribution by Route 53.

CloudFront caches the contents of the kylehugh.es S3 bucket on the edges of its network, globally. The CloudFront cache is invalidated by the build system after a successful deployment to the S3 bucket.

CloudFront is also where the TLS connection to kylehugh.es is terminated.

AWS Route 53

AWS Route 53 is the domain name registrar and Domain Name System provider for the kylehugh.es domain name that the Computer Techniques website is hosted under. The A Record for .kylehugh.es points to the CloudFront distribution for the kylehugh.es S3 bucket.

AWS S3

AWS S3 is the hosting provider for the Computer Techniques website. There is a kylehugh.es bucket that contains the latest contents of the website. The bucket is configured for static website hosting.

The contents of the bucket are not accessed directly by users. Users access the CloudFront distribution for the bucket which contains a cache of the contents.

GitHub

GitHub is where the Computer Techniques git repository is hosted.

GitHub Actions

GitHub Actions is used to model the deployment pipeline (“workflow” in GitHub Actions terminology) for the Computer Techniques website.

gulp.js

gulp.js is used by the Computer Techniques website module to model the build and deploy actions.

The GitHub Actions workflow invokes a gulp.js command to perform its own build and deploy actions. This is done because the third-party support for publishing to AWS is currently more robust with node.js than with GitHub Actions. The balance may change in the future.

Hugo

Hugo is the static site generator used to build the Computer Techniques website.

The GitHub Actions deployment workflow invokes Hugo to produce the HTML that is then uploaded to the S3 bucket.

Deployment

The deployment sequence for the Computer Techniques website can be modeled as a pipeline.

1. Listening

2. Building

3. Publishing

4. Invalidating

References

Hugo Example Blog: A public GitHub repository showcasing many Hugo features in a sandbox environment.

Originally published on Thursday, October 31, 2019.
Last modified on Monday, November 25, 2019.