For the past three years this website used Jekyll to generate static HTML pages from markdown files. It was great for its simplicity and integration with GitHub Pages, but I found the Liquid template tags clunky to develop with so I rarely took advantage of components, nor did much beyond add new markdown posts. The irony in these new posts is that they describe projects using React, Vue, or other more capable frameworks. While build times and complexity of these projects is greater, they allow me to take advantage of any Node.js package I may need.
The migration process was not without its challenges. Initially, I tried to migrate the build process to Cloudflare, but the adapter for Astro is limited in which packages will run. This meant no OpenGraph images or responsive images (in part because Cloudflare charges for their own re-sizing service). Debugging these builds was also more difficult than simply using GitHub Actions instead. It took a significant amount of work to rewrite components and pages on new site to make them look exactly the same as the old one - so why bother!? Well, I am worried about about unforeseen changes or issues I may encounter as Astro is updated, but until declarative shadow DOMs are widely supported, I need a way to statically render as much content as possible, reducing JavaScript overheads to only the components where they can’t be avoided. As I’m using markdown files and add-ons to enhance the frontmatter metadata, there will also always be a build step. This is why Astro is a good fit. Compared to working with Jekyll though, the site is more flexible, maintainable, future-proof, and fun! I’m much more motivated to keep it updated. In time, the site may also be upgraded to include features I’ve already implemented elsewhere, such as search, dyslexia-friendly font toggles, and content filtering.
New site features include:
- 🖼️ Automated project and tag images from WikiData (more sources could be added, but these are infrequently used at the moment)
- 🖼️ Automatic OpenGraph images for link sharing (see below), using
svg-to-img. - 🖼️ Responsive Images in the best formats with Astro
<Picture/>. - 🧑💻 Using MDX to enable custom components within specific projects and posts.
- 🎨 Link previews for external pages.
- 🎨 PostCSS for automatic polyfills. Being able to nest CSS makes maintaining it much easier.
- 🎨 Automated accent colors from images, using
color-thief. These are used in CSS variables to theme pages (it may be subtle!). - 🔍 JSON-LD data for rich search engine results. Using ‘Article’, ‘People’, and ‘SearchBox’ types.
- 🏷️ Tag listing pages for easier content discovery.
- 🌙 Dark mode selector
- 🤏 Auto-compressed HTML, CSS, and JavaScript through Astro 3.0.
OpenGraph image
