Spotlite is a beautiful personal website template built with Astro and UnoCSS, inspired by a similar sounding template from the Tailwind CSS team. Best of all, it's open source (MIT licence) so feel free to use and modify it!
It uses the following technologies:
- Astro
- Alpine.js
- Typescript
- Prettier
- ESLint
- UnoCSS
@astrojs/sitemap
and@astrojs/rss
preintegrated- Heroicons and SVG Logos preloaded via Iconify
It features:
- A homepage featuring photos, links to blog articles, and a career history.
- An About page that can be edited in Markdown and featuring a profile photo and social media links.
- An Articles page linking to blog articles.
- A Projects page showcasing a portfolio of items with descriptions, images and links.
- A Creations page showcasing linkable artefacts.
- A Uses page providing a bragging list of products and tools used.
Spotlite uses all the latest and greatest features in Astro (>2.5.0) including:
- optimised assets
- dala and content collections
- endpoints
- sitemap
- RSS
Itβs production-ready and easy to customize, making it the perfect starting point for your own personal website.
It's also simple to deploy on Netlify or similar.
Inside of your Astro project, you'll see the following folders and files:
/
βββ astro.config.mjs # Astro configuration file
βββ public/ # Location of static assets
β βββ favicon.svg
βββ src/
β βββ assets/ # Location of dynamic assets (eg. images)
β β βββ screenshot.png
β βββ components/ # Astro components
β β βββ header.astro
β βββ content/ # Location of content (markdown, data and images)
β β βββ config.ts
β βββ layouts/ # Location of layouts for pages
β β βββ Layout.astro
β βββ pages/ # Location of pages
β βββ index.astro
βββ package.json
βββ uno.config.ts # UnoCSS configuration file
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 |