SpaceDomains is a website built with Astro and Tailwind CSS.
Table of Contents
- ✅ Dark & Light Mode: Clean implementation.
- ✅ Optimized SEO: Automatic meta tags, Structured Data (JSON-LD), RSS Feed, Open Graph, Twitter Cards, and native Sitemap.
- ✅ Native Scroll Animations: High-performance, JS-light scroll reveal animations using
Intersection Observer. - ✅ Clean Architecture: Organized and scalable code.
- ✅ Reusable Components: Navbar, Footer, and modern Layouts with Tailwind v4.
This template is built with modern, high-performance technologies:
- Astro 5: The web framework for building content-driven websites.
- Tailwind CSS 4: A utility-first CSS framework for rapid UI development.
- TypeScript: Strongly typed programming language that builds on JavaScript.
- MDX: Markdown for the component era, allowing you to use JSX in your markdown content.
A quick overview of the folder structure to help you understand where everything is located:
/
├── public/ # Static assets (fonts, favicon, images outside of processing)
├── src/
│ ├── assets/ # Images and assets to be processed by Astro
│ ├── components/ # Reusable UI components (Navbar, Footer, SEO, etc.)
│ ├── config/ # Centralized site configuration (site.ts)
│ ├── content/ # Blog posts and content collections (Markdown/MDX)
│ ├── layouts/ # Base page layouts
│ ├── pages/ # File-based routing (pages and endpoints)
│ ├── styles/ # Global CSS and Tailwind directives
│ ├── types/ # TypeScript type definitions
│ └── content.config.ts # Astro Content Collections configuration
├── astro.config.mjs # Astro configuration file
└── tailwind.config.mjs # Tailwind CSS configuration
To start with this project locally, clone the repository and install dependencies:
pnpm install
pnpm run devAll global site information is managed in src/config/site.ts. Update this file with your data:
// src/config/site.ts
import ogImage from "../assets/og-image.png";
export const siteConfig = {
name: "SpaceDomains",
description: "A fast, SEO-friendly site built with Astro and Tailwind.",
url: "https://spacedomains.com",
lang: "en",
locale: "en_US",
author: "Gregor",
twitter: "",
ogImage: ogImage,
socialLinks: {
twitter: "",
github: "",
discord: "",
},
navLinks: [
{ text: "Home", href: "/" },
{ text: "About", href: "/about" },
{ text: "Services", href: "/services" },
{ text: "Blog", href: "/blog" },
{ text: "Contact", href: "/contact" },
{ text: "Widgets", href: "/widgets" },
],
};<
735C
/pre>This template uses Astro Content Collections to manage blog posts.
To add a new blog post, simply create a new .md or .mdx file inside the src/content/blog/ directory.
Each blog post must include the following frontmatter at the top of the file:
---
title: "Your Post Title"
description: "A brief summary of your post for SEO."
pubDate: 2024-03-20
author: "Author Name"
image: "/images/your-cover-image.webp" # Optional
tags: ["Astro", "Tailwind"] # Optional
category: "Web Development" # Optional
---
Your markdown or MDX content goes here...| Command | Action |
|---|---|
npm run dev |
Starts the development server at localhost:4321. |
npm run build |
Generates the static site in the dist/ folder. |
npm run preview |
Previews the production build locally. |
npm run lint |
Runs ESLint to ensure code quality. |
npm run format |
Formats code with Prettier. |
npm run fix |
Runs format and lint auto-fix. |
npm run check |
Runs astro check for diagnostics. |
npm run typecheck |
Verifies TypeScript types. |
If you find this starter useful, please consider giving it a ⭐ on GitHub! It helps more people discover the project.
This project is under the MIT license. See the LICENSE file for more details.
Built by Gregor.