npm create astro@latest -- --template basics
🧑🚀 Seasoned astronaut? Delete this file. Have fun!
Inside of your Astro project, you'll see the following folders and files:
/
├── public/
│ └── favicon.svg
├── src/
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
└── package.json
To learn more about the folder structure of an Astro project, refer to our guide on project structure.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
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 |
Feel free to check our documentation or jump into our Discord server.
The site configuration is centralized in src/config/siteConfig.js. Here's how to customize different aspects of your site:
seo: {
// Website title used in browser tab and social sharing
title: "Your Site Title",
// Website description for search engines and social sharing
description: "Your site description",
// Base URL of your website
siteUrl: "https://example.com",
// Social sharing image
socialImage: "/preview.webp",
// Favicon configuration
favicon: {
// Default favicon
default: "/favicon.svg",
// Optional: Configure multiple favicon sizes/types
icons: [
{ rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" },
{ rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" },
{ rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }
]
},
// Sitemap configuration
sitemap: {
lastmod: "2024-12-24",
changefreq: "weekly",
priority: 1.0
},
// Robots.txt configuration
robots: {
userAgent: "*", // User-agent string
allow: ["/"], // Paths to allow
disallow: [] // Paths to disallow
}
}theme: {
// Default theme mode: 'light', 'dark', or 'system'
defaultMode: "light",
// Theme style customization
styles: {
colors: {
accent: "136, 58, 234",
accentLight: "224, 204, 250",
accentDark: "49, 10, 101",
},
fonts: {
system: "system-ui, sans-serif",
code: "Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace"
},
components: {
navIcon: {
base: [
"rounded-full",
"text-foreground",
// ... other utility classes
],
variants: {
ghost: "ghost",
icon: "icon"
}
}
}
}
}// Author information
author: {
name: "Your Name",
handle: "@your_handle"
},
// Social links configuration
social: {
website: {
url: "https://yoursite.com",
label: "Personal Website",
icon: "Globe"
},
github: {
url: "https://github.com/yourusername",
label: "GitHub",
icon: "Github"
},
twitter: {
url: "https://twitter.com/yourhandle",
label: "Twitter",
icon: "Twitter"
}
}The sitemap and robots.txt files are generated dynamically based on your configuration. They will be available at:
/sitemap.xml/robots.txt
No additional configuration needed - they use the siteUrl from your SEO config.
The theme switcher supports three modes: light, dark, and system. Configure the default mode in theme.defaultMode.
Social icons in the footer and navbar are automatically generated from your social configuration. To add a new social link:
- Add a new entry to the
socialobject - Provide the URL, label, and icon
- If using a custom SVG icon, include the SVG path
All SEO-related meta tags (including Open Graph and Twitter Cards) are automatically generated from your SEO configuration. To customize:
- Update the relevant fields in
seoconfiguration - Meta tags will be automatically updated in all pages
To customize the site's appearance:
- Update colors in
theme.styles.colors - Modify fonts in
theme.styles.fonts - Adjust component styles in
theme.styles.components
social: {
instagram: {
url: "https://instagram.com/yourhandle",
label: "Instagram",
icon: "instagram",
svg: "..." // Your Instagram icon SVG path
}
}theme: {
styles: {
colors: {
accent: "255, 62, 0",
accentLight: "255, 182, 162",
accentDark: "180, 43, 0"
}
}
}seo: {
favicon: {
default: "/favicon.svg",
icons: [
{ rel: "icon", type: "image/png", sizes: "192x192", href: "/android-chrome-192x192.png" },
{ rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }
]
}
}