zaduma

an Astro starter template for understated personal websites

Built with:

• SolidJS
• MDX, Remark and Unified
• Shiki Twoslash
• Tailwind CSS
• Vercel and Vercel OG
• GitHub Actions

🏎️ Usage TLDR

1. Click Use this template to create a new repo.
2. Set VERCEL_TOKEN, VERCEL_PROJECT_ID, and VERCEL_ORG_ID secrets to deploy to Vercel from GHA (enables access to git history).
3. Add OG_IMAGE_SECRET to secure your OG image endpoint.

See full usage instructions.

🏛 Project Structure

Inside of your Astro project, you'll see the following folders and files:

├── posts/
│   └── rebuilding-a-blog.mdx — posts written in MDX
├── public/ — static assets apart from images
├── src/
│   ├── build-time/* — remark plugins
│   ├── global-styles/* — fonts, body and prose styles
│   ├── layouts/
│   │   ├── BaseLayout.astro — UI shared between all pages
│   │   └── PostLayout.astro — layout for all posts
│   ├── lib/* — reusable utils and UI components
│   ├── images/* — pictures (need to be here to be optimized by Astro Image)
│   ├── pages/
│   │   ├── [path].astro — Astro dynamic route for posts, supplies MDX components
│   │   └── index.astro — index page, lists all posts
│   ├── env.d.ts
│   └── types.ts
├── astro.config.ts
├── package.json
├── postcss.config.cjs
├── tailwind.config.cjs — Tailwind config, colors, fonts
└── tsconfig.json

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm run dev	Starts local dev server at localhost:3000
pnpm run build	Build your production site to ./dist/
pnpm run preview	Preview your build locally, before deploying
pnpm run astro ...	Run CLI commands like astro add, astro check
pnpm run astro --help	Get help using the Astro CLI

👌 Usage

1. Click Use this template to create a new repo.

2. Clone the repository, install with pnpm install and run with pnpm dev.

3. Style it and personalize however you like 💅

4. Set VERCEL_TOKEN, VERCEL_PROJECT_ID, and VERCEL_ORG_ID secrets to deploy to Vercel from GHA (what enables access to git history). (Settings→Secrets)

   • Alternatively — if all your blog posts have a date in frontmatter, you don't need to deploy through workflows/ci.yml. Feel free to remove the deploy steps from the YML file and connect Vercel/Netlify integration. Go to derivedTitleAndDatePlugin function and remove execSync("git log") from it. (TODO: Can we make it more convenient?)

5. Generate a passphrase for OG_IMAGE_SECRET to secure your OG image endpoint, and add it to Actions Secrets.