Synopsis
Notes on building this blog.
Description
This website is where I play around with ultra-low-cost web hosting and this article is where I track my thoughts.
The current iteration of coderberry.com is built on
- The 11ty static website generator with
- pagefind for search and
- @11ty/eleventy-navigation for navigation support and
- @11ty/eleventy-plugin-bundle for managing aggregate page-level content like css/script/etc.
- A mix of
- Plain old javascript/html for most of the site plus
- compiled typescript (no dependencies) for the fake terminal
- font awesome loaded by webfontloader for icons.
Hosting
- Assets are served using AWS cloudfront/s3
- DNS is handled by AWS Route53
- Email is handled by Google Workspace and at $6 a month is BY FAR the most expensive part of running the site.
Development
- All done on an HP x360 14" chromebook which cost about $200.
- Running crostini Linux
- and editing in
Stuff that didn't work
Web Components Suck (Kinda)
- I tried plain Web Components for the terminal
- fiddly, clunky, tedious, verbose, and poorly documented
- State management is worse than old react classes.
- No real jsx/whatever HTML templates.
- Complex, feature-poor CSS integration.
- etc. It's no good.
- Basically unusable without a framework/library.
- Maybe in another 10 years...
Google Workspaces For Email
- Technically worked.
- Seriously is it dead though?
- Setup instructions are misleading and broken.
- Outdated styling.
- Clunky sign up process. ( No matter what option you click, or what resources you request, you are forced to buy a $26 package, then downgrade it )
- Are you OK, google workspaces?
Stuff that did work
Chromebook as a Dev Environment
- $200 for a usable, free Linux Dev environment
Minimal Cloud Deploy/Integration
- The last iteration of this website used codebuilder pipelines/cdk and some API gateway.
- The AWS serverless deploy/run/iterate cycle sucks.
- update CDK
- push code.
- wait for build/package
- wait for deploy
- deploy fails because of cdk type/weird dependency issue.
- It is now 30 minutes later.
- minimal dependencies/static hosting are awesome.
- develop/iterate test on chromebook
- Upload to s3.
- Success.
Plain CSS is Pretty Good
- I used to use semantic UI with react.
- Lots of infrastructure
- Usual deprecation/migration/etc. pain of external projects
- Bland result.
- CSS is pretty consistent and feature rich by itself now.
Static Instead of Hosted Search
- I played around a bit with AWS opensearch
- Mixed CDK support for configuration.
- complicated setup for "I Want to search my small site"
- complicated client-side configuration
- Pagefind
- all local,static.
- 1 minute to configure (max)
- easy to integrate.
Stuff that's... fine
11ty Static Generator
- Replaced next.js from prior site.
- Easy to setup. No complex build.
- Lots of documentation.
- Active community.
- Weirdly inflexible.
- I can't just paginate by tags?
- I can't just generate multiple outputs?
- Weirdly opaque (visibility/traceability)
- What was the final data that generated the site?
- Where did that data come from?
esbuild Transpiler
- I know I said no transpilers. Used to transpile es6 from search/typescript output into ES5.
- Same fiddly unsupported/half-supported, weird error message nonsense as the last x iterations of transpiler tools.
Plain Old Javascript
- Low dependency development is fun.
- But React/JSX/webpack solve a lot of issues.
See Also
Author
Written by Michael Smit
Copyright
©2024 Michael Smit