Skip to content

hellotham/spotlite

Repository files navigation

Spotlite - Personal Web Site Astro Starter

screenshot

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!

Deploy To Netlify

It uses the following technologies:

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.

πŸš€ Project Structure

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

🧞 Commands

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