Part 1 — Customizing This Astro Theme: Identity, Feature Toggles, and Content
A practical guide to cloning, running, and customizing this modular Astro 7.4 + Tailwind CSS v4 site—toggling features, choosing your homepage, and adding content without editing a single .astro template.
The Navigator is built around a simple rule: you can customize 100% of your identity, layout, bio, blog posts, career timeline, and photo gallery—and turn entire sections (blog, photography, log, now, about, tags, contact, contactForm, rss, llms) on or off or choose which page serves as your / homepage—without ever opening an .astro template file.
Here is how the configuration, content folders, and data files fit together—and the step-by-step guide to making the site your own.
Instead of mixing personal content with layout code, src/ is split into three simple layers that build your static site:
- src/.config.ts controls who owns the site (site.config.ts) and which features and integrations are enabled (theme.config.ts). - src/content/ holds your Markdown pages and posts (pages, blog, log, photography), supporting diagrams, YouTube embeds, callout boxes, and automatic term tooltips. - src/data/ holds structured lists (experiences.ts for your career timeline, recommendations.ts for peer quotes, and techTerms.ts for hover definitions).
Before cloning and running the theme locally, make sure you have:
- Node.js >= 20 and npm - Playwright Chromium (used at build time to render Markdown Mermaid diagrams into crisp inline SVGs) - (Optional) A Formspree account (free) — only needed if you want the embedded message form on /contact/, /about/, and blog posts. Set features.contactForm: false or leave the endpoint blank to use simple email and social links instead. - (Optional) An Umami account or self-hosted instance — if you want privacy-friendly analytics (integrations.umami in src/theme.config.ts). - (Optional) A GitLab or GitHub account (free) — for repository hosting and automated CI/CD builds.
Clone the starter repository from GitHub or GitLab and start the development server:
To run a full production build and preview the generated ./dist/ folder locally:
Start by opening src/site.config.ts. This file holds your site URL, name, bio, portrait, and social links:
Updating src/site.config.ts automatically updates your name, domain, portrait (src/images/author.jpg), social links, RSS/Atom feeds, sitemap, and search engine metadata across every page.
