2 min read

Astro Sphere

Table of Contents

Astro Sphere

Astro Sphere is a static, minimalist, lightweight, lightning fast portfolio and blog theme based on Mark Horn’s personal website.

It is primarily Astro, Tailwind and Typescript, with a very small amount of SolidJS for stateful components.

πŸš€ 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)
  • βœ… Searchable content (posts and projects)

πŸ’― Lighthouse score

Astro Sphere Lighthouse Score

πŸ•ŠοΈ Lightweight

All pages under 100kb (including fonts)

⚑︎ 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 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 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