take a peek
a look under the hood at how this site is put together.
this site has been through a few forms — jekyll, next.js, plain index.html — and currently runs on astro. here's what's going on behind the scenes.
the stack
intentionally lightweight. 5 npm dependencies total.
framework
astro
static site generator — no client-side JS frameworks
content
markdown + MDX
via astro content collections
css
custom CSS + LightningCSS
no framework — just custom properties, nesting, and clamp()
images
sharp
via astro's built-in <Image> component
hosting
github pages
deployed via github actions on push to master
fonts
system-ui, sans-serif
no web fonts — uses whatever the OS provides
peek the frontmatter
every note on this site starts with a bit of YAML that tells astro what to do with it.
example frontmatter
---
title: "making this website"
description: "notes about the making of this website (kelsy.design)"
pubDate: "Jan 27 2024"
updatedDate: "Mar 29 2024"
tags: ["👨💻-dev", "🌱-early", "🔬-thissite"]
---references
peek the package
the full dependency list. that's it.
package.json dependencies
"dependencies": {
"@astrojs/mdx": "^4.3.0",
"@astrojs/rss": "^4.0.14",
"astro": "^5.16.0",
"lightningcss": "^1.30.0",
"sharp": "^0.34.0"
}peek the structure
how the content and pages are organized.
site structure
content/
notes/
about-this-site.md
figma-embed.mdx
human-made.mdx
inspo-figma-blog.mdx
notes-2024-02-16.mdx
website-experiments.mdx
pages/
notes/
[...id].astro
[page].astro
tags/
[tag].astro
index.astro
samples/
user-story-mapping.astro
timelapse-auditing.mdx
...
about.astro
peek.astro
index.astro