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 theSitemap
directive inrobots.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 modifyLayout.astro
as it's dynamically generated bysrc/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 thesite
URL set inastro.config.mjs
.Powerful
Layout.astro
: Leverage the power ofLayout.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!