Dorkodu's Astro Template

Dorkodu's Astro Template is a minimalist Astro starter for portfolios, blogs, landing pages, and personal websites, built with React, TypeScript, and Mantine UI.

What is Dorkodu's Astro Template?

Dorkodu's Astro Template is a website starter built on the Astro framework. It takes source files in .astro and .md formats from the src/pages directory and builds a static site into ./dist when you run the build command. The template is developed by Dorkodu and uses React, TypeScript, Mantine UI, MDX, Partytown, and Sitemap. It comes with a site.config.ts file for central configuration and PostCSS setup.

Key Features

• Astro-based routing — Every .astro or .md file placed in src/pages becomes a route whose URL matches the file name, so adding a page is just adding a file.
• Mantine UI styling — The template includes theme.ts, index.css, index.css.ts, and Layout.css.ts in src/styles, with Mantine UI providing the component styling system.
• React and TypeScript — Components are written in React with TypeScript for typed props; default components include Header, Footer, Hero, and Card in src/components.
• MDX support — Markdown pages can contain embedded JSX, letting authors mix prose with interactive elements.
• PostCSS preconfiguration — A postcss.config.js sits in the project root so CSS transformations are ready out of the box.
• Partytown integration — Third-party scripts can be executed in a web worker via Partytown, keeping the main thread free.
• Sitemap integration — Sitemap generation is included as part of the used stack, simplifying search engine indexing.
• Central site configuration — site.config.ts holds site-wide settings, while public/ holds images, fonts, favicon.svg, robots.txt, and site.webmanifest.

Who is it for?

• Developers starting a personal site — Clone the repo, run pnpm install and pnpm dev, then edit index.astro and about.astro in src/pages.
• Portfolio owners — Use the Card and Hero components to present projects and a headline, with styling controlled by the Mantine theme.
• Bloggers — Write posts in Markdown or MDX; each file in src/pages becomes a route automatically.
• Small landing page creators — The Hero section and Card grid give a ready-made structure for a product or service landing page.

What can you do with it?

• Launch a personal homepage — Edit src/pages/index.astro and about.astro to publish a two-page site with a shared layout from src/layouts/Layout.astro.
• Showcase a portfolio — Add project cards using the Card component and configure site metadata in site.config.ts.
• Publish a blog — Drop .md or .mdx files into src/pages; they compile to static pages with no extra routing setup.
• Build a landing page — Customize the Hero component as the top section and keep the rest minimal using the built-in layout.

How does Dorkodu's Astro Template work?

The template uses pnpm for all commands. Run pnpm install to install dependencies, pnpm dev to start a local server at localhost:4321, and pnpm build to output the production site to ./dist. Static files placed in public/ are copied as-is to the output, and src/pages determines the site's routes.