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
๐๏ธ 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
| Command | Action |
|---|---|
npm install | Installs dependencies |
npm run dev | Starts local dev server at localhost:4321 |
npm run sync | Generates TypeScript types for all Astro modules. |
npm run build | Build your production site to ./dist/ |
npm run preview | Preview your build locally, before deploying |
npm run astro ... | Run CLI commands like astro add, astro check |
npm run astro -- --help | Get help using the Astro CLI |
npm run lint | Run ESLint |
npm run lint:fix | Auto-fix ESLint issues |
๐๏ธ License
MIT