3 min read

Astro Nano

Table of Contents

Astro Nano

Astro Nano is a static, minimalist, lightweight, lightning fast portfolio and blog theme.

Built with Astro, Tailwind and Typescript, and no frameworks.

It was designed as an even more minimal theme than Mark Horn’s popular theme Astro Sphere

πŸš€ Deploy your own

πŸ“‹ Features

  • βœ… 100/100 Lighthouse performance
  • βœ… Responsive
  • βœ… Accessible
  • βœ… SEO-friendly
  • βœ… Typesafe
  • βœ… Minimal style
  • βœ… Light/Dark Theme
  • βœ… Animated UI
  • βœ… Tailwind styling
  • βœ… Auto generated sitemap
  • βœ… Auto generated RSS Feed
  • βœ… Markdown support
  • βœ… MDX Support (components in your markdown)

πŸ’― Lighthouse score

Astro Nano Lighthouse Score

πŸ•ŠοΈ Lightweight

No frameworks or added bulk

⚑︎ Fast

Rendered in ~40ms on localhost

πŸ“„ Configuration

The blog posts on the demo serve as the documentation and configuration.

πŸ’» Commands

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

Replace npm with your package manager of choice. npm, pnpm, yarn, bun, etc

npm installInstalls dependencies
npm run devStarts local dev server at localhost:4321
npm run dev:networkStarts local dev server on local network
npm run syncGenerates TypeScript types for all Astro modules.
npm run buildBuild your production site to ./dist/
npm run previewPreview your build locally, before deploying
npm run preview:networkPreview build on local network
npm run astro ...Run CLI commands like astro add, astro check
npm run astro -- --helpGet help using the Astro CLI
npm run lintRun ESLint
npm run lint:fixAuto-fix ESLint issues

πŸ›οΈ License