Astro Template

Welcome to the Astro Template, a lightweight and high-performance web development template powered by Astro.

🚀 Getting Started

To start a new project using this template, you can use the following command:

npm create astro@latest -- --template astro-template

📁 Project Structure

Inside your Astro project, you'll find the following folders and files:

/
├── public/
│   ├── favicon.ico
│   ├── robots.txt
├── src/
│   ├── layouts/
│   │   ├── Layout.astro
│   ├── pages/
├── ├── consts.ts
└── package.json

• public/: This directory contains important public files for your project.

  • favicon.ico: Customize the website's favicon.ico to match your branding.

  • robots.txt: Modify the Sitemap directive in robots.txt to point to your site's sitemap: Sitemap: [YOUR_URL]/sitemap-index.xml.

• src/consts.ts: This file contains configuration constants for your Astro project, including metadata and default settings.

• src/layouts/: Layout components for your pages are located here. You typically won't need to modify Layout.astro as it's dynamically generated by src/consts.ts.

• src/pages/: Create as many pages as needed in this directory. Each file automatically becomes a route based on its name.

• src/assets/: Although not included by default, you can create this directory to optimize your images using Astro's image optimization capabilities.

• src/components/: Although not included by default, you can create this directory to store various types of components used in your project.

• src/content/: While this directory isn't included by default, you can create it to manage your content.

  • config.ts: Define your content collections in this file and customize them to fit your specific requirements.

• package.json: Your project's configuration file.

Don't forget to update the base URL of your project by modifying the site value in astro.config.mjs to match your project's URL.

Feel free to adapt and organize your project's structure as needed. You can also create folders like src/assets/, src/components/, src/content/ to better align with your project's goals and content management needs.

✨ Features

Key Features

• Lightweight and lightning-fast: Astro optimizes your site for performance out of the box.

• Versatile: Build static sites, server-rendered apps, or a combination of both.

• Component-driven development: Create reusable UI components for efficient development.

• Markdown and MDX support: Easily integrate content using markdown or MDX for dynamic pages.

• Rapid Content Creation: Utilize Astro's content collection capabilities to create and manage content quickly and efficiently.

• Image Optimization: With astro:assets, you can easily optimize your images for fast loading and improved performance.

• CSS support: Choose your preferred CSS framework or custom styling approach.

Additional Features

• Automated Sitemap Generation: By including the @astrojs/sitemap package, your sitemap is automatically generated based on the site URL set in astro.config.mjs.

• Powerful Layout.astro: Leverage the power of Layout.astro to create SEO-backed pages effortlessly. Simply add <Layout title="[TITLE_OF_THE_PAGE]" description="[DESCRIPTION_OF_THE_PAGE]"></Layout> to your individual pages for SEO optimization and social media sharing.

With these features, you can build high-performance websites with ease and efficiency, ensuring a seamless user experience and strong SEO presence.

🧞 Commands

Here are some useful commands for managing your Astro project:

Command	Action
npm install	Install project dependencies
npm run dev	Start the local development server
npm run build	Build your project for production
npm run preview	Preview your build locally before deploying
npm run astro ...	Run Astro CLI commands like astro add, astro check
npm run astro -- --help	Get help with the Astro CLI

📚 Documentation

For detailed documentation and further information, visit the Astro Documentation.

If you have questions or need assistance, join our community on Discord.

Happy coding with Astro Template!