this site
is built with 11ty, a lightweight static site generator. Eleventy seemed to be the lightest and most flexible way to focus on content first. An ancillary goal is to eventually get into the 10kb club, which means keeping the landing page zipped bundle size under 10kb.
All to say, this site uses no front-end JavaScript at all--reducing client-load and decreasing network latency/load times!
I use GitHub actions to automate the build process is as follows:
- my resume data is generated with a custom TypeScript resume builder that outputs a
json
file source of truth 11ty
initially generates static site files- the GitHub action then compresses those files to get the approximate compressed file size
11ty
regenerates the static site files but now with data to populate this page with file size data- a LaTeX Docker process then picks up the json resume data and generates a pdf
- the pdf resume and static site files are pushed to AWS S3 with cache invalidation so the site is up-to-date nearly instantly
tech
Source code for this site is available here: GitHub.
The following dependencies are automatically pulled from the package.json
file.
app dependencies:
- none!
dev dependencies:
- @11ty/eleventy
- @tsconfig/recommended
- @types/node
- clean-css
- date-fns
- lualatex
- rimraf
- ts-node
- tsc
- typescript
infrastructure:
- AWS S3 - hosting
- AWS Route 53 - DNS
- AWS CloudFront - CDN
- GitHub - source hosting
- GitHub actions - ci/cd
stats
AWS Cloudfront automatically compresses files over 1000 bytes in size. Here are the compression stats for this site's pages. Because many of the files are relatively small, its original and compressed sizes might be the same. These values are automatically generated on every build, which fails if the landing page is too big.
page sizes in various states of compression (bytes)
page | orig | gzip | brotli |
---|---|---|---|
home | 3365 | 2122 | 1797 |
about | 1287 | 675 | 483 |
resume | 6109 | 2231 | 1668 |
site | 4593 | 1693 | 1292 |