
These themes are created by the freecloudhost team. All of these themes are currently under **MIT Licnese** and can be used for personal or commercial projects.


Free Cloud Host

CloudCannon

Contentful

Decap

Ghost

GraphCMS

Markdown

Sanity

Spinal

StaticCMS

Tina

FreeCloudHost is the largest directory of **<themes>** themes, starters, UI kits, and tools for Website Generators. Find the perfect starting point for your next project and save hours.

Library

Free


Astro is an all-in-one web framework for building fast, content-focused websites. Astro was designed for building content-rich websites. This includes most marketing sites, publishing sites, documentation sites, blogs, portfolios, and some ecommerce sites.


Looking for the Astro themes? These Astro themes,starter and templates are ideal for any type of website, from businesses to personal blogs.

Check out the showcase of a variety of Astro website examples. Get inspired about building your next web project on the Astro static site generator.

Top collection of Astro Website examples to inspire the creation of your business or personal website.

Astro Website Examples - FreeCloudHost

Astro Examples

<themes> Astro Themes & Templates (Hand-picked) | FreeCloudHost

Astro Themes

Astro


Eleventy is a fast web site builder. Initially marketed as a JavaScript alternative to Jekyll, it has now become a widely used modern web generator. Creating a website, with a predefined design and structure that can be easily customized to suit the needs of the user.


Looking for the best Eleventy themes for your next project? These handpicked eleventy themes are ideal for any type of eleventy website

Check out the showcase of a variety of Eleventy website examples. Get inspired about building your next web project on the Eleventy static site generator.

Top collection of Eleventy Website examples to inspire the creation of your business or personal website.

Eleventy Website Examples - FreeCloudHost

Eleventy Examples

Eleventy Themes & Templates (Free & Premium) | FreeCloudHost

Eleventy Themes

Eleventy


Gatsby is a static site generator that lets you build websites and apps with speed. It offers the control of dynamically rendered sites with scalability - all in a free open source framework!


Are you looking for the best Gatsby themes and templates a to get started with your next project? Here we've listed awesome themes and templates

Check out the showcase of a variety of Gatsby website examples. Get inspired about building your next web project on the Gatsby static site generator.

A collection of Astro Website examples to inspire the creation of your next online Projects.

Gatsby Website Examples - FreeCloudHost

Gatsby Examples

<themes> Gatsby Themes (Free & Premium) | FreeCloudHost

Gatsby Themes

Gatsby


Hexo is a fast, simple, and powerful static site generator. They provide a quick and easy way to customize the look and feel of a website without having to build everything from scratch. With a wide range of styles and features, Hexo themes allow users to create a unique and professional website with ease.


Are you looking for the best Hexo themes? Checkout this comprehensive collection of Hexo themes

Check out the showcase of a variety of Hexo website examples. Get inspired about building your next web project on the Hexo static site generator.

Top collection of Hexo Website examples to inspire the creation of your next online Project

Hexo Website Examples - FreeCloudHost

Hexo Examples

Best Hexo Themes (Hand-picked) | FreeCloudHost

Hexo Themes

Hexo


Hugo is a popular static site generator written in Go. It's simple to use and easy to learn, making it a popular choice for developers who want to build a website without having to learn complex coding languages. Hugo is open source and free to use.


Check out our collection of hand-picked Hugo themes and templates that will give your website a professional and polished appearance.

Check out the showcase of a variety of Hugo website examples. Get inspired about building your next web project on the Hugo static site generator

A collection of Hugo Website examples to inspire the creation of your next web Project

Hugo Website Examples - FreeCloudHost

Hugo Examples

<themes> Hugo Themes (Free & Premium) | FreeCloudHost

Hugo Themes

Hugo


Jekyll is a simple and easy-to-use blog-aware static site generator for personal, project, or organization websites.


Checkout this collection of free and premium Jekyll themes to jumpstart your next Jekyll project.

Check out the showcase of a variety of jekyll website examples. Get inspired about building your next web project on the Jekyll static site generator

A collection of Jekyll Website examples to inspire the creation of your next web Project.

Jekyll Website Examples - FreeCloudHost

Jekyll Examples

<themes> Jekyll Themes (Free & Premium) | FreeCloudHost

Jekyll Themes

Jekyll


Nextjs is one of the most popular static site generators right now. It offers a simple interface with powerful features, making it the perfect tool for creating high-performance static sites. Nextjs offers built-in features such as asset management, routing, and server-side rendering.


Discover 140+ free and premium Nextjs theme and templates to jumpstart your next project.

Check out the showcase of a variety of Nextjs website examples. Get inspired about building your next web project on the Nextjs static site generator

Are you looking for inspiration for creating Next.js website? Check out our collection of stunning Next.js website examples, featuring beautiful designs.

Nextjs Website Examples - FreeCloudHost

Nextjs Examples

<themes> Nextjs Themes & Templates (Free & Premium) | FreeCloudHost

Nextjs Templates

Nextjs


Nuxtjs is a static site generator built on top of Vue.js that allows you to create static websites and applications using Vue.js. Static sites are faster and more secure than dynamic websites, and with Nuxt, you can create them without anyomplicated setup process.


Explore a wide range of Nuxt.js themes and templates for your next web development project

Check out the showcase of a variety of Nuxtjs website examples. Get inspired about building your upcoming web project with Nuxtjs static site generator.

A collection of Nuxtjs Website examples to inspire the creation of your next online Project.

Nuxtjs Website Examples - FreeCloudHost

Nuxtjs Examples

<themes> NuxtJs Themes & Templates (Free & Premium)| FreeCloudHost

NuxtJs




## Introduction

Accessible Astro Components is a collection of easy-to-use, accessible front-end UI components designed specifically for Astro. These components are built with accessibility in mind, ensuring they work well for all users, including those with disabilities. The package offers a variety of components such as Accordion, Breadcrumbs, Card, DarkMode, Media, Modal, Notification, Pagination, and SkipLinks.

## Main Features

- Accessibility-focused components
- Easy integration with Astro projects
- Keyboard navigation support
- Screen reader friendly
- Customizable styles
- Responsive design
- ARIA attributes for improved accessibility
- LocalStorage support for user preferences (e.g., DarkMode)

## Installation Steps

1. Open your terminal or command prompt.
2. Navigate to your Astro project directory.
3. Run the following command to install the package:

```
npm install accessible-astro-components --save-dev
```

## Usage Instructions

1. Import the desired components in your Astro file:

```astro
---
import { Accordion, AccordionItem, Card, Modal } from 'accessible-astro-components'
---
```

2. Use the components in your Astro template:

```astro
<Accordion>
  <AccordionItem header="First Item">
    <p>Content for the first item</p>
  </AccordionItem>
  <AccordionItem header="Second Item">
    <p>Content for the second item</p>
  </AccordionItem>
</Accordion>

<Card url="/my-post" img="/assets/cover.jpg" title="My Post" footer="Author Name">
  Short description of the post
</Card>

<button id="modal-trigger">Open Modal</button>
<Modal triggerId="modal-trigger" title="My Modal">
  <p>Modal content goes here</p>
</Modal>
```

3. Customize styles as needed using global CSS or component-specific classes.

## Important Notes

1. Always provide appropriate ARIA labels and attributes for better accessibility.
2. Use semantic HTML structure when implementing components (e.g., unordered lists for Breadcrumbs).
3. Test components with various assistive technologies to ensure proper functionality.
4. Refer to the documentation for specific usage instructions and props for each component.
5. Consider the context and user experience when implementing interactive components like Modals or Notifications.
6. Regularly update the package to benefit from the latest accessibility improvements and features.

A set of Accessible, easy to use, Front-end UI Components for Astro.

Accessible Astro Components



## Introduction

Accessible Astro Dashboard is an open-source admin dashboard theme built with Astro, focusing on accessibility and user-friendly features. It provides a login page, dashboard overview, and various admin pages, all designed with accessibility in mind. The theme includes landmarks, improved focus outlines, and skip-links navigation to enhance the user experience for all users, including those with disabilities.

## Main Features

- Built with Astro Static Site Builder
- Accessible components, including keyboard-accessible responsive navigation
- Login page with example authentication using localStorage
- Dashboard overview and admin page examples (media, messages, products, settings, users)
- Dark mode toggle with user preference saved in localStorage
- Responsive design with mobile-friendly navigation
- Accessibility features like skip links, screen reader support, and focus indicators
- Utilizes Accessible Astro Components package for additional accessible components
- Design system utilities for layout, spacing, and styling

## Installation Steps

1. Clone the repository or download the project files.
2. Navigate to the project directory in your terminal.
3. Run the following command to install dependencies and start the development server:
   ```
   npm install && npm start
   ```

## Usage Instructions

1. Customize the login page (`login.astro`) and authentication logic as needed for your project.
2. Modify the dashboard (`index.astro`) and admin pages to fit your specific requirements.
3. Utilize the provided components like `DashboardWidget.astro`, `Pagination.astro`, and `EmpyState.astro` to build your admin interface.
4. Customize the navigation in `Navigation.astro` to include your desired menu items.
5. Use the Design System utilities (found in `public/scss/base`) to maintain consistent styling throughout your project.
6. Implement your own secure authentication system, replacing the example login flow.
7. Customize the 404 error page (`404.astro`) to match your project's branding.
8. Utilize the Accessible Astro Components package for additional pre-built accessible components.
9. Adjust the color scheme, typography, and other design elements in the SCSS files to match your brand.

## Important Notes

1. The example login system uses localStorage and is not secure for production use. Implement a proper authentication system for real-world applications.

2. Consider enabling Astro's Server-Side Rendering (SSR) for better authentication and redirecting functionality.

3. The theme includes various utility classes for layout, spacing, and styling. Familiarize yourself with these utilities to efficiently build your admin interface.

4. Accessibility features are built-in, but ensure you maintain accessibility standards when adding custom content or components.

5. The project uses npm as the package manager. Make sure you have npm installed on your system.

6. Regularly update the Astro framework and other dependencies to benefit from the latest features and security patches.

7. The theme is fully responsive, but test thoroughly on various devices and screen sizes to ensure a consistent user experience.

8. Customize the color scheme in the `_colors.scss` file to match your brand's palette.

9. Utilize the provided grid system and auto-grid feature for creating responsive layouts easily.

10. When deploying, build the project using the appropriate Astro build command and host the generated static files on your preferred hosting platform.

An Accessible Admin Dashboard Theme for Astro with a login page and a dashboard overview. Includes accessibility features such as landmarks, better focus-outline and skip-links navigation.

Accessible Astro Dashboard




## Introduction

Accessible Astro Starter is a user-friendly, SEO-optimized, and accessibility-focused theme for Astro 4.0. It provides a solid foundation for building websites with a strong emphasis on accessibility. The theme includes various pre-built accessible components, Tailwind CSS integration, and example pages such as a dynamic blog, 404 page, and Markdown/MDX support. It's designed to help developers quickly create accessible and performant websites.

## Main Features

- Built with Astro 4.0 and Tailwind CSS
- Accessibility features including landmarks, skip links, and keyboard navigation
- SEO-friendly with customizable meta tags
- Dark mode toggle with system preference detection
- Responsive design with mobile-friendly navigation
- Dynamic routing for blog posts and pages
- Markdown and MDX support
- Integration with Prettier and ESLint for code quality
- High performance with excellent Lighthouse scores
- Various pre-built accessible components (accordions, modals, pagination, etc.)
- View Transitions support (with accessibility considerations)

## Installation Steps

1. Clone the repository to your local machine.
2. Navigate to the project directory in your terminal.
3. Run the following command to install dependencies:
   ```
   npm install
   ```
4. Start the development server with:
   ```
   npm run dev
   ```
5. Open your browser and visit `http://localhost:4321` to see the site.

## Usage Instructions

1. Customize the `src/pages` directory to add or modify pages.
2. Use the pre-built components in `src/components` to construct your pages.
3. Modify the `DefaultLayout.astro` in `src/layouts` to change the overall page structure.
4. Update the `Header.astro` and `Footer.astro` components to match your site's design.
5. Customize the color scheme and typography in the Tailwind configuration file.
6. Add your own blog posts in the `src/pages/blog` directory using Markdown or MDX.
7. Adjust the `SiteMeta.astro` component to set appropriate SEO meta tags for each page.
8. Use the utility classes in `src/assets/scss/base` for consistent styling.
9. Implement the `DarkMode.astro` component to add a dark mode toggle to your site.
10. Leverage the `ResponsiveToggle.astro` for creating a mobile-friendly navigation menu.

## Important Notes

1. Ensure all custom components and content maintain accessibility standards.

2. Test the website thoroughly with screen readers and keyboard navigation.

3. Use the provided ESLint configuration to catch potential accessibility issues in your code.

4. When adding new pages, remember to update the navigation component accordingly.

5. Regularly update Astro and other dependencies to benefit from the latest features and security patches.

6. Be mindful of accessibility considerations when using View Transitions.

7. Utilize the `.sr-only` utility class for content that should only be visible to screen readers.

8. Consider the `prefers-reduced-motion` setting when implementing animations.

9. Customize the 404 error page (`404.astro`) to match your site's design and provide helpful information.

10. Leverage the dynamic routing capabilities for creating additional content types beyond blog posts if needed.

An Accessible Starter Theme for Astro including accessibility features such as landmarks, better focus-outline and skip-links navigation. Ships with Tailwind, Prettier and ESLint support.

Accessible Astro Starter




## Introduction

AgenceX Landing Page is a simple yet powerful template for creating a digital agency landing page. Built with Astro and TailwindCSS, this project offers a modern, responsive, and customizable solution for agencies looking to showcase their services online. The template leverages the speed and simplicity of Astro's static site generation capabilities, combined with the flexibility of TailwindCSS for styling.

## Main Features

- Built with Astro v3 for fast, efficient static site generation
- Styled using TailwindCSS v3.3 for rapid and customizable design
- Responsive layout suitable for various screen sizes
- Modular component structure for easy customization
- Optimized for performance and SEO
- Clean and modern design tailored for digital agencies
- Easy to deploy on platforms like Vercel

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/unify-ui-dev/agency-landing-page-Astrojs.git
   ```
2. Navigate to the project directory:
   ```
   cd agency-landing-page-Astrojs
   ```
3. Install dependencies:
   ```
   npm install
   ```
4. Start the development server:
   ```
   npm run dev
   ```

## Usage Instructions

1. Customize the content by editing the Astro components in the `src/components` directory
2. Modify the layout in `src/layouts/Layout.astro` to fit your needs
3. Update the main page content in `src/pages/index.astro`
4. Add or replace images in the `public/images` directory
5. Adjust styles using TailwindCSS classes or by modifying `tailwind.config.cjs`
6. Test your changes locally using the development server
7. Build your site for production:
   ```
   npm run build
   ```
8. Preview the built site before deployment:
   ```
   npm run preview
   ```
9. Deploy your site to your preferred hosting platform (e.g., Vercel)

## Important Notes

1. The project uses Astro v3, ensure compatibility when adding new dependencies
2. Familiarity with TailwindCSS is beneficial for customizing styles
3. The template is structured with separate components for easy maintenance
4. Images and logos are stored in the `public` directory for easy access
5. The layout is responsive, but always test on various devices
6. Customize the content to reflect your agency's unique offerings and brand
7. Optimize images and assets for web to ensure fast loading times
8. Consider adding analytics and SEO meta tags for better performance
9. The project is open-source under the MIT license, allowing for extensive modification
10. For any issues or feature requests, refer to the GitHub repository's issue tracker

A simple agency landing page made with astrojs and tailwindcss.

AgenceX




## Introduction

AstroAgnosticUIStarter is an experimental project that combines the power of Astro, a modern static site generator, with AgnosticUI, a library of framework-agnostic UI components. This starter template demonstrates the ability to render React, Vue 3, and Svelte components on the same Astro page, showcasing the versatility and flexibility of both Astro and AgnosticUI.

## Main Features

- Built with Astro, a modern static site generator
- Integrates AgnosticUI components for consistent UI across different frameworks
- Demonstrates simultaneous rendering of React, Vue 3, and Svelte components
- Provides a starting point for building multi-framework web applications
- Leverages Astro's component islands architecture for optimal performance

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/AgnosticUI/AstroAgnosticUIStarter.git
   ```

2. Navigate to the project directory:
   ```
   cd AstroAgnosticUIStarter
   ```

3. Install dependencies:
   ```
   npm install
   ```

4. Start the development server:
   ```
   npm run dev
   ```

## Usage Instructions

1. The development server will start at `localhost:3000`. Open this in your browser to view the project.

2. Explore the `src` directory to find the Astro pages and components.

3. To add or modify components, work with the respective framework files in the `src` directory.

4. For building the production site, run:
   ```
   npm run build
   ```

5. To preview the built site before deployment, use:
   ```
   npm run preview
   ```

6. Customize the project by adding your own components, styles, and content as needed.

7. Refer to the Astro and AgnosticUI documentation for more advanced usage and customization options.

## Important Notes

1. This project is experimental and designed to showcase the capabilities of Astro and AgnosticUI working together.

2. Ensure you have a good understanding of Astro, React, Vue 3, and Svelte to make the most of this starter template.

3. The project structure follows Astro conventions. Familiarize yourself with Astro's file-based routing and component structure.

4. AgnosticUI components can be used across different frameworks, providing a consistent UI experience.

5. For production deployment, make sure to thoroughly test the built version of your site.

6. Keep your dependencies updated regularly to ensure compatibility and security.

7. Contribute to the project or report issues on the GitHub repository if you encounter any problems or have suggestions for improvement.

8. Join the Astro Discord server for community support and discussions related to Astro development.

Experiment leveraging the Astro https://astro.build/ starter + AgnosticUI https://agnosticui.com/. Renders React, Vue 3, and Svelte components on the same .astro page

AstroAgnosticUIStarter


## Key Features

- 16+ Unique Pages
- Highly customizable (Color, Font, Menu, Social Links, SEO Meta Tags, etc.)
- Fast by default (95+ Google PageSpeed Score)
- Built with Tailwind CSS framework
- Netlify setting pre-configured
- Contact form support
- Support OG image
- Multi-Author
- Video Showcase
- Related Posts Suggestions
- Support Disqus Comments
- Write and update content in Markdown / MDX
- MDX components auto import
- Includes draft pages and posts
- Fully responsive on desktops, tablets, and smartphones
- SEO Friendly


Andromeda Astro is multipurpose SaaS theme designed to showcase any SaaS product or solution.

Andromeda Astro




## Introduction

Art Theme is a beautiful blog template built with Astro, designed to create aesthetically pleasing and functional blogs. This theme offers a range of features and customization options, making it suitable for developers and content creators looking for an elegant and efficient blogging platform.

## Main Features

- Built with Astro for optimal performance
- Responsive design for various screen sizes
- Customizable comment system
- Support for flowcharts and sequence diagrams using Mermaid
- LaTeX support via MathJax for mathematical equations
- GitHub-themed article styling
- Collapsible Table of Contents (TOC)
- Tailwind CSS integration for easy styling
- TypeScript support for improved development experience

## Installation Steps

1. Ensure you have Node.js (version 16.15.0 or later) and pnpm installed on your system.
2. Clone the repository to your local machine.
3. Navigate to the project directory in your terminal.
4. Run the following command to install dependencies:
   ```
   pnpm install
   ```
5. Start the development server with:
   ```
   pnpm dev
   ```
6. Open your browser and visit the local development URL (typically http://localhost:3000).

## Usage Instructions

1. Customize the blog configuration in the `astro.config.mjs` file.
2. Add or modify blog posts in the `article` directory using Markdown or MDX format.
3. Adjust the site's appearance by modifying the Tailwind CSS configuration in `tailwind.config.js`.
4. Customize the comment system by updating the configuration as described in the README.
5. Use Mermaid syntax to create flowcharts and sequence diagrams in your blog posts.
6. Utilize MathJax for rendering mathematical equations in your content.
7. Modify the default layouts and components in the `src` directory to match your desired design.
8. Add custom styles in the SCSS files located in the `src` directory.
9. Use TypeScript for type-safe development when creating or modifying components.
10. Deploy your blog to a hosting platform like Netlify for easy publishing.

## Important Notes

1. The theme requires Node.js version 16.15.0 or later and uses pnpm as the package manager.

2. The comment system configuration can be generated externally and then copied into the project.

3. The theme has recently undergone significant updates, including upgrading dependencies and changing some core functionalities.

4. Flowcharts and sequence diagrams are now supported using Mermaid, replacing the previous flowchart.js.

5. LaTeX support has been changed to use MathJax for rendering mathematical equations.

6. The default article theme has been changed to a GitHub-inspired style.

7. Table of Contents (TOC) is hidden by default in the latest version.

8. The astro-icon package has been disabled in recent updates.

9. Some hack code has been disabled; review the changes if you were relying on these features.

10. Keep an eye on the CHANGELOG for future updates and feature changes to ensure compatibility with your existing content.

Art Theme




## Introduction

Astro Me is a crisp, minimal personal portfolio theme designed for Astro. It offers a lightweight solution for creating performant personal websites with a focus on minimalism and reduced JavaScript usage. The theme is inspired by Gatsby Intro and provides essential features for a beautiful, functional portfolio, including dark mode support and resume download capabilities.

## Main Features

- Minimal and crisp design optimized for markdown content
- Responsive layout for various screen sizes
- Data configuration using YAML files for easy customization
- Svelte integration for interactive components like theme switchers
- Modular structure with focused, single-purpose components
- Support for 6+ color themes, configurable via tailwind.config.js
- Dark mode support across all color themes
- Print-ready styling for one-page portfolio printing
- Resume download functionality via /api/resume endpoint

## Installation Steps

1. Clone the repository to your local machine.
2. Navigate to the project directory in your terminal.
3. Run the following command to install dependencies:
   ```
   yarn install
   ```
4. Start the development server with:
   ```
   yarn start
   ```
5. Open your browser and visit the local development URL (typically http://localhost:3000).

## Usage Instructions

1. Customize the YAML files in the `content` directory to update your personal information and portfolio details.
2. Modify the components in the `src/components` directory to adjust the layout and design as needed.
3. Update the color themes in `tailwind.config.js` to match your preferred color scheme. Remember to restart the development server after making changes.
4. Add your resume file to the appropriate directory for the download functionality to work correctly.
5. Create or modify markdown files in the `content` directory to add or update your portfolio projects and information.
6. Adjust the Svelte components in the `src` directory if you need to modify interactive elements like the theme switcher.
7. Test the print functionality by using your browser's print feature to ensure the layout is correct for physical copies.
8. Deploy your site to a hosting platform like Vercel for easy publishing and API support.

## Important Notes

1. The theme uses `yarn start` instead of `yarn dev` for local development to maintain compatibility with `vercel dev` for local function development.

2. When modifying color themes in `tailwind.config.js`, always restart the development server to see the changes.

3. The modular structure of the theme allows for easy customization, but be mindful of maintaining the overall design consistency.

4. While the theme is lightweight by default, be cautious when adding new features or components to preserve performance.

5. Test the dark mode functionality thoroughly to ensure all components and content are visible in both light and dark themes.

6. When adding new pages or sections, remember to update the navigation component accordingly.

7. The print-ready feature is designed for one-page portfolios. Test the print layout if you add significant amounts of content.

8. Keep the resume file updated in the correct location for the download feature to work properly.

9. Future planned features include Form Spree integration for contact forms and improved styles, so check for updates regularly.

10. When deploying, ensure that your hosting platform supports serverless functions if you're using the resume download API.

Crisp, minimal, personal portfolio theme for Astro

Astro Me




## Introduction

Astrodev is a beautifully crafted Astro template designed specifically for developers. This template provides a sleek and professional platform for developers to showcase their portfolio, projects, and skills. Built using Astro, a modern static site generator, Astrodev offers excellent performance and flexibility for creating stunning developer websites.

## Main Features

- Built with Astro for optimal performance and fast loading times
- Responsive design suitable for various devices and screen sizes
- Clean and modern aesthetics tailored for developer portfolios
- Easy customization and content management
- SEO-friendly structure
- Optimized for showcasing coding projects and skills
- Lightweight and fast-loading pages

## Installation Steps

1. Ensure you have Node.js installed on your system.

2. Clone the repository:
   ```
   git clone https://github.com/alamguardin/astrodev.git
   ```

3. Navigate to the project directory:
   ```
   cd astrodev
   ```

4. Install dependencies:
   ```
   npm install
   ```

5. Start the development server:
   ```
   npm run dev
   ```

## Usage Instructions

1. Customize content:
   - Update your personal information, projects, and skills in the appropriate files within the `src` directory.

2. Modify styles:
   - The template uses CSS for styling. Customize the CSS files in the `src` directory to match your personal brand.

3. Add or modify pages:
   - Create or edit `.astro` files in the `src/pages` directory to manage your site's pages.

4. Build for production:
   ```
   npm run build
   ```

5. Preview the production build:
   ```
   npm run preview
   ```

6. Deploy:
   - The built files will be in the `./dist/` directory. Deploy these files to your preferred hosting platform.

## Important Notes

1. This template is optimized for developer portfolios. While it can be adapted for other uses, it's best suited for showcasing coding projects and technical skills.

2. Familiarity with Astro will be beneficial for customizing the template to your specific needs. Refer to the Astro documentation for advanced customizations.

3. The template uses a combination of Astro and CSS for its structure and styling. No additional CSS frameworks are used, allowing for lightweight and fast-loading pages.

4. Regularly update dependencies to benefit from the latest features and security patches of Astro and other packages.

5. Optimize your project images and assets for web to ensure fast loading times, which is crucial for a developer portfolio.

6. Customize the SEO metadata for each page to improve your site's visibility in search engines.

7. Test your website across different browsers and devices to ensure a consistent experience for all visitors.

8. Consider adding analytics to track visitor engagement and gather insights about your portfolio's performance.

9. If you plan to add a blog or more dynamic content, explore Astro's content collections and dynamic routing features.

10. The template is designed to be a starting point. Feel free to expand upon it, adding sections like a blog, testimonials, or a more detailed about page to fully showcase your developer journey and expertise.

A beautiful astro template for developers.

Astrodev




## Introduction

Astrofy is a free and open-source template for creating personal portfolio websites. Built with Astro and TailwindCSS, it offers a quick and efficient way to set up a professional online presence. The template includes sections for a blog, CV, projects, store, and RSS feed, making it a comprehensive solution for showcasing your work and skills.

## Main Features

- Built with Astro and TailwindCSS for optimal performance
- Responsive design suitable for various devices
- Blog section with pagination and individual post pages
- CV section with timeline component
- Project showcase area
- Store functionality with item listings
- RSS feed for content distribution
- Easy customization and theming options
- SEO-friendly structure

## Installation Steps

1. Ensure you have Node.js and pnpm installed on your system.

2. Clone the repository:
   ```
   git clone https://github.com/manuelernestog/astrofy.git
   ```

3. Navigate to the project directory:
   ```
   cd astrofy
   ```

4. Install dependencies:
   ```
   pnpm install
   ```

5. Start the development server:
   ```
   pnpm run dev
   ```

## Usage Instructions

1. Customize content:
   - Update personal information in the `src/config.ts` file
   - Modify sidebar content in the `src/components/SideBar.astro` file
   - Add blog posts as markdown files in the `src/content/blog/` directory
   - Create project entries in the appropriate section
   - Add store items in the `src/content/store/` directory

2. Modify layouts:
   - Customize page layouts in the `src/layouts/` directory
   - Adjust components in the `src/components/` directory

3. Add or modify pages:
   - Create or edit pages in the `src/pages/` directory

4. Styling:
   - Modify the theme by changing the `data-theme` attribute in `BaseLayout.astro`
   - Customize styles using TailwindCSS classes or by editing the `src/styles/global.css` file

5. Build for production:
   ```
   pnpm run build
   ```

6. Preview the production build:
   ```
   pnpm run preview
   ```

7. Deploy:
   - Upload the contents of the `dist/` directory to your preferred hosting platform

## Important Notes

1. The template uses Astro's content collections for blog posts and store items. Ensure you follow the correct frontmatter format when adding new content.

2. Customize the `robots.txt` file in the public folder with your site's URL for proper sitemap functionality.

3. The blog pagination uses dynamic route parameters, which may be incompatible with some SSR deploy configurations. Stick to static deploy options for best results.

4. Regularly update dependencies to benefit from the latest features and security patches of Astro and TailwindCSS.

5. The template includes various pre-built components like TimeLine, Card, and HorizontalCard. Refer to the README for usage instructions of these components.

6. You can extend the template by adding custom components. Create new `.astro` files in the `src/components/` directory following the provided component template structure.

7. The template supports easy theming. Explore the 30 available themes or create a custom one by modifying the `data-theme` attribute.

8. Make use of the SEO-friendly structure by properly filling out metadata for each page and post.

9. The template is open-source and welcomes contributions. Feel free to open issues or submit pull requests for improvements or bug fixes.

10. Remember to respect the MIT license terms when using or modifying this template for your projects.

Astrofy is a free and open-source template for your Personal Portfolio Website built with Astro and TailwindCSS. Create in minutes a website with Blog, CV, Project Section, Store and RSS Feed.

Astrofy




## Introduction

AstroKit: Content is an Astro-based template designed to streamline the development of content-rich websites. This template leverages Astro's content collections feature, providing a robust foundation for managing and displaying various types of content. It's ideal for developers looking to quickly set up a project with organized content structure and modern web development practices.

## Main Features

- Content collections for organized content management
- Tailwind CSS integration for styling
- SEO optimization out of the box
- MDX support for enhanced Markdown capabilities
- React integration for dynamic components
- Mobile-responsive design with a mobile menu
- Sitemap and robots.txt generation
- Vercel Analytics integration for performance tracking
- Card image clickability for improved user interaction

## Installation Steps

1. Use the following command to create a new project with this template:
   ```
   pnpm create astro@latest -- --template jllahi/astrokit-content
   ```

2. Navigate to your project directory.

3. Install dependencies:
   ```
   pnpm install
   ```

4. Start the development server:
   ```
   pnpm run dev
   ```

5. Open your browser and visit `http://localhost:4321` to see your site.

## Usage Instructions

1. Content Management:
   - Add or modify content in the `src/content` directory.
   - Use Markdown or MDX files for content creation.

2. Page Creation:
   - Create new pages in the `src/pages` directory using `.astro` or `.md` files.

3. Styling:
   - Utilize Tailwind CSS classes for styling your components and pages.

4. Component Development:
   - Add Astro, React, or other framework components in the `src/components` directory.

5. Static Assets:
   - Place images and other static files in the `public` directory.

6. Build for Production:
   ```
   pnpm run build
   ```

7. Preview Production Build:
   ```
   pnpm run preview
   ```

## Important Notes

1. The project uses pnpm as the package manager. Ensure it's installed on your system.

2. Familiarize yourself with Astro's content collections feature for efficient content management.

3. The template includes SEO optimization, but remember to customize meta tags and descriptions for your specific content.

4. Vercel Analytics is pre-configured; ensure you set up your Vercel project correctly to utilize this feature.

5. The mobile menu and responsive design are implemented, but test thoroughly on various devices.

6. Some features like search functionality, photo gallery, subscription, and contact form are marked as TODO items and may require additional implementation.

7. Consider exploring Astro's documentation and Discord community for further assistance and advanced usage tips.

Astrokit Content




## Introduction

AstroKit: Minimal is a streamlined template for creating websites using Astro, a modern static site generator. This template provides a minimal setup with essential features, making it an ideal starting point for developers who want a clean slate to build their Astro projects. It incorporates popular tools and best practices to enhance development efficiency and code quality.

## Main Features

- Minimal Astro setup for quick project initiation
- Tailwind CSS integration for efficient styling
- ESLint and Prettier configuration for code quality and consistency
- TypeScript support for enhanced development experience
- Ready-to-use project structure with organized directories
- Built-in commands for development, building, and previewing
- Optional integrations for React, Svelte, and database functionality
- Serverless route support for Preview mode
- Sanity Studio configuration (optional)

## Installation Steps

1. Open your terminal.

2. Run the following command to create a new project using this template:
   ```
   pnpm create astro@latest -- --template jllahi/astrokit-minimal
   ```

3. Navigate to the newly created project directory.

4. Install dependencies:
   ```
   pnpm install
   ```

## Usage Instructions

1. Start the development server:
   ```
   pnpm dev
   ```

2. Build your production site:
   ```
   pnpm build
   ```

3. Preview the build locally:
   ```
   pnpm preview
   ```

4. Format your code:
   ```
   pnpm format
   ```

5. Lint your code:
   ```
   pnpm lint
   ```

6. Clean generated code:
   ```
   pnpm clean
   ```

7. To add optional integrations:
   - React: `pnpm astro add react -y`
   - Svelte: `pnpm astro add svelte -y`
   - Database: `pnpm astro add db -y`
   - Server-Side Rendering (SSR): `pnpm astro add vercel -y`

## Important Notes

1. The project structure follows Astro conventions, with pages located in `src/pages/` directory.

2. Static assets should be placed in the `public/` directory.

3. Tailwind CSS configuration can be customized in `tailwind.config.mjs`.

4. Global configuration variables are stored in `/data/config.ts`.

5. Utility functions for handling styles are available in `/utils/styles.ts`.

6. The template includes a serverless route for triggering Preview mode at `/pages/api/preview.ts`.

7. If using Sanity Studio, content types are defined in the `/schemas` directory.

8. Advanced Sanity Studio customizations can be set up in the `/plugins` directory.

9. Sanity Content Lake client configuration is located in `/lib/sanity.api.ts` and `/lib/sanity.image.ts`.

10. Live Preview Mode configuration can be found in `/lib/sanity.preview.ts`.

Astrokit Minimal




## Introduction

Astrolus is a home page template built using Astro and Tailwind CSS, incorporating Tailus blocks. This template provides a modern, responsive design that can be easily customized for various web projects. It's designed to offer a clean starting point for developers looking to create attractive and functional websites quickly.

## Main Features

- Built with Astro framework
- Styled using Tailwind CSS
- Incorporates Tailus UI blocks
- Responsive design
- Easy to customize and extend
- Fast performance
- SEO-friendly structure

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/Tailus-UI/astro-theme.git
   ```
2. Navigate to the project directory:
   ```
   cd astro-theme
   ```
3. Install dependencies:
   ```
   npm install
   ```
4. Start the development server:
   ```
   npm run dev
   ```
5. Open your browser and visit `http://localhost:3000` to see the template in action.

## Usage Instructions

1. Customize the content:
   - Edit the files in the `src/pages/` directory to modify the page content.
   - Update components in `src/components/` to change specific UI elements.

2. Modify the styling:
   - Tailwind CSS classes can be adjusted in the component files.
   - For global style changes, edit the `tailwind.config.cjs` file.

3. Add new pages:
   - Create new `.astro` files in the `src/pages/` directory.

4. Integrate additional features:
   - Astro supports various integrations which can be added to enhance functionality.

5. Build for production:
   - Run `npm run build` to create a production-ready version of your site.
   - The built files will be in the `dist/` directory, ready for deployment.

## Important Notes

1. The project structure follows Astro conventions, with pages in `src/pages/` and components in `src/components/`.
2. Static assets should be placed in the `public/` directory for direct access.
3. The template uses Tailwind CSS for styling, allowing for rapid UI development.
4. Astro's partial hydration feature can be used for interactive components if needed.
5. Regularly update dependencies to ensure you have the latest features and security patches.
6. The template is licensed under the MIT License, allowing for both personal and commercial use.
7. For optimal performance, minimize the use of client-side JavaScript where possible.
8. Leverage Astro's built-in optimizations for images and assets.
9. Customize the meta tags and SEO elements in the `Layout.astro` file for better search engine visibility.
10. Refer to the Astro documentation for advanced usage and configuration options.

Modern Sass home page template that supports light and dark theme built with tailwindcss using tailus blocks.

Astrolus




## Introduction

Astronot with Astro is a starter template for building blogs using Astro, a modern static site generator, combined with Astronot CSS, a custom CSS framework. This template provides a quick and efficient way to create stylish and performant blog websites. It's designed to offer a streamlined development experience while producing fast-loading, SEO-friendly sites.

## Main Features

- Built with Astro for optimal performance and static site generation
- Integrated Astronot CSS for unique styling and layout options
- Blog-focused template structure
- Easy customization and extension
- SEO-friendly design
- Responsive layout for various device sizes
- Fast loading times due to static site generation

## Installation Steps

1. Ensure you have Node.js installed on your system.

2. Open your terminal and run the following command to create a new Astro project using the Astronot with Astro template:

   ```
   npm create astro@latest -- --template mesinkasir/astronot-with-astro
   ```

3. Navigate to your new project directory:

   ```
   cd your-project-name
   ```

4. Install the project dependencies:

   ```
   npm install
   ```

5. Start the development server:

   ```
   npm run dev
   ```

6. Open your browser and visit `http://localhost:3000` to see your new Astronot with Astro blog.

## Usage Instructions

1. Familiarize yourself with the project structure, focusing on the `src` directory where most of your development will occur.

2. Create new blog posts by adding Markdown (.md) or Astro (.astro) files in the `src/pages/blog` directory.

3. Customize the layout and styles by modifying the Astro components in the `src/components` directory and the Astronot CSS styles.

4. Update the site configuration and metadata in the appropriate files within the `src` directory.

5. Add images and other static assets to the `public` directory.

6. To build your project for production, run:

   ```
   npm run build
   ```

7. Preview the production build locally using:

   ```
   npm run preview
   ```

8. Deploy the contents of the `dist` directory to your chosen hosting platform.

## Important Notes

1. This template is specifically designed for blog websites, but can be adapted for other purposes with some modifications.

2. Astronot CSS is a custom framework, so be sure to refer to the documentation at https://astronot.axcora.com/cms/ for styling guidelines and available classes.

3. Astro's static site generation approach means your blog will be fast and SEO-friendly out of the box.

4. The template is open-source and available for both personal and commercial use.

5. Regular updates to Astro may introduce new features or changes. Keep your project dependencies up to date for the best experience.

6. While the template provides a solid foundation, basic knowledge of Astro and web development will be beneficial for customization.

7. The project structure is designed to be intuitive, but feel free to reorganize it to fit your specific needs.

8. Optimize images and other assets for web use to maintain fast loading times.

9. Consider implementing a content management system (CMS) if you need a more user-friendly way to manage blog content.

10. For any issues or feature requests, consider opening an issue on the GitHub repository or contributing to the project.

A starter astro build with astronot css template themes

Astronot With Astro




## Introduction

AstroPaper is a minimal, responsive, accessible, and SEO-friendly blog theme built with Astro. It's designed to provide a clean and efficient blogging experience while adhering to best practices in web development. The theme is self-documented, meaning that the blog posts within the theme serve as documentation.

## Main Features

- Type-safe markdown support
- High-performance optimization
- Accessibility features for keyboard and screen reader users
- Responsive design for various devices
- SEO-friendly structure
- Light and dark mode
- Fuzzy search functionality
- Draft post support and pagination
- Sitemap and RSS feed generation
- Customizable color schemes
- Dynamic OG image generation for blog posts

## Installation Steps

1. Choose a package manager and run one of the following commands:

   ```
   # npm 6.x
   npm create astro@latest -- --template satnaing/astro-paper

   # npm 7+
   npm create astro@latest -- --template satnaing/astro-paper

   # yarn
   yarn create astro --template satnaing/astro-paper

   # pnpm
   pnpm dlx create-astro --template satnaing/astro-paper
   ```

2. Install dependencies:

   ```
   npm install
   ```

3. Start the development server:

   ```
   npm run dev
   ```

Alternatively, you can use Docker:

1. Build the Docker image:

   ```
   docker build -t astropaper .
   ```

2. Run the Docker container:

   ```
   docker run -p 4321:80 astropaper
   ```

## Usage Instructions

1. Create blog posts as Markdown files in the `src/content/blog` directory.

2. Customize the theme by modifying files in the `src` directory:
   - `src/styles` for styling
   - `src/components` for reusable components
   - `src/pages` for page templates
   - `src/config.ts` for site configuration

3. Use the provided npm scripts for various tasks:
   - `npm run dev` for local development
   - `npm run build` for production build
   - `npm run preview` to preview the build
   - `npm run format:check` and `npm run format` for code formatting
   - `npm run lint` for linting

4. Explore the theme's features like fuzzy search, dark mode, and dynamic OG image generation.

5. Customize color schemes by following the documentation in the blog posts or README.

## Important Notes

1. The theme is designed to be accessible and follows best practices for SEO and performance.

2. It supports type-safe markdown, ensuring consistency in your content.

3. The project structure is organized for easy maintenance and customization.

4. You can add Google Site Verification by setting the `PUBLIC_GOOGLE_SITE_VERIFICATION` environment variable.

5. The theme is licensed under the MIT License, allowing for free use and modification.

6. Contributions and feedback are welcome through GitHub issues or by contacting the creator.

7. For Windows PowerShell users, you may need to install the `concurrently` package for running diagnostics during development.

8. The theme has been tested with VoiceOver on Mac and TalkBack on Android for accessibility.

9. Regular updates and releases are provided, with the latest version being v4.4.0 as of August 19, 2024.

10. The project uses various technologies including Astro, TypeScript, React, TailwindCSS, and more for a robust development experience.

A minimal, accessible and SEO-friendly Astro blog theme.

Astro Paper




## Introduction

Astroplate is a comprehensive starter template designed for building modern websites using Astro, TailwindCSS, and TypeScript. Created by Zeon Studio, this free and open-source project provides developers with a robust foundation to jumpstart their Astro projects. Astroplate is packed with features and pre-designed pages, making it an excellent choice for developers looking to save time and effort in setting up their web projects.

## Main Features

- Built with Astro, TailwindCSS, and TypeScript
- Multi-author support
- Multilingual capabilities
- Similar posts suggestion
- Search functionality
- Dark mode implementation
- Tags and categories system
- Netlify pre-configuration
- Contact form support
- Fully responsive design
- Markdown and MDX content writing
- Disqus comment integration
- Syntax highlighting
- 15+ pre-designed pages
- Docker support for easy deployment

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/zeon-studio/astroplate.git
   ```
2. Navigate to the project directory:
   ```
   cd astroplate
   ```
3. Install dependencies:
   ```
   npm install
   ```
4. Start the development server:
   ```
   npm run dev
   ```

## Usage Instructions

1. Develop your site using the pre-designed pages and components
2. Customize styles using TailwindCSS classes
3. Write content in Markdown or MDX format
4. Utilize the multi-author and multilingual features as needed
5. Implement the search functionality and similar posts suggestion
6. Toggle between light and dark modes
7. Categorize content using tags and categories
8. Build your site for production:
   ```
   npm run build
   ```
9. Deploy using Netlify or your preferred hosting platform

For Docker deployment:
1. Build the Docker image:
   ```
   docker build -t astroplate .
   ```
2. Run the Docker container:
   ```
   docker run -p 3000:80 astroplate
   ```

## Important Notes

1. Astroplate is licensed under the MIT license, allowing for both personal and commercial use
2. The template requires Node.js v20.10+ and npm v10.2+
3. Astro v4.12+ and Tailwind v3.4+ are used in this project
4. The template includes integrations like astro/react, astro/sitemap, and astro/tailwind
5. Custom development services are available from Zeon Studio if needed
6. The project structure is organized for scalability and easy maintenance
7. Regular updates to dependencies are recommended for optimal performance and security
8. The template is designed to be a starting point, encouraging further customization
9. Images used in the demo are for demonstration purposes only and may have separate licenses
10. For issues or feature requests, use the GitHub Issues page of the project

Astroplate is a free starter template built with Astro, TailwindCSS & TypeScript, providing everything you need to jumpstart your Astro project and save valuable time.

Astroplate - Boilerplate & Starter




## Introduction

Astro & Tailwind CSS Starter Kit is a powerful and flexible template designed for building modern websites and web applications. Created by Lexington Themes, this open-source project combines the speed and simplicity of Astro with the utility-first approach of Tailwind CSS. It provides developers with a solid foundation for creating responsive, performant, and visually appealing web projects.

## Main Features

- Built with Astro for fast, static site generation
- Integrates Tailwind CSS for flexible and rapid styling
- Includes @astrojs/sitemap for automatic sitemap generation
- Open-source and licensed under GPL-3.0
- Optimized project structure for easy development
- Ready-to-use components and layouts
- Fast development and build times
- SEO-friendly with sitemap integration
- Responsive design capabilities through Tailwind CSS
- Easy to customize and extend

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/michael-andreuzza/astrosaas.git
   ```
2. Navigate to the project directory:
   ```
   cd astrosaas
   ```
3. Install dependencies:
   ```
   npm install
   ```
4. Start the development server:
   ```
   npm run dev
   ```

## Usage Instructions

1. Explore and modify files in the `src/pages/` directory to create your website structure
2. Customize or create new components in `src/components/` (if available)
3. Utilize Tailwind CSS classes for styling your content
4. Add static assets like images to the `public/` directory
5. Develop your site using Astro's `.astro` files or other supported formats
6. Test your changes locally using the development server
7. Build your site for production:
   ```
   npm run build
   ```
8. Preview the production build:
   ```
   npm run preview
   ```
9. Deploy the contents of the `dist/` directory to your chosen hosting platform

## Important Notes

1. The template is licensed under GPL-3.0, allowing for modification and use in various projects
2. Astro is the primary framework, offering excellent performance for static site generation
3. Tailwind CSS is integrated for efficient and responsive styling
4. The project includes automatic sitemap generation through @astrojs/sitemap
5. Familiarity with Astro and Tailwind CSS will be beneficial for customization
6. The project structure is organized for scalability and ease of maintenance
7. Regular updates to Astro and other dependencies are recommended
8. The template is designed to be a starting point, encouraging further customization
9. Refer to Astro's documentation for advanced usage and configuration options
10. Consider exploring Lexington Themes for additional resources and inspiration

Astrosaas is an open source template for your next product.

AstroSaas


## Key Features

- 10+ Pages Included
- Blog with Pagination Support
- Pricing with Comparison
- Features & Integrations Page
- Responsive Navbar with Dropdown
- Working Contact form
- About & Team Page


Astroship Pro is a pro version of the popular starter template Astroship. Astroship Pro template can be used for SAAS, startups, marketing websites & landing pages. Built with Astro & TailwindCSS. You can quickly create any website with this website template.

Astroship Pro




## Introduction

Astroship is a versatile starter template designed for startups, marketing websites, landing pages, and blogs. Created by surjithctly, this template leverages the power of Astro and TailwindCSS to provide a robust foundation for building modern web projects. Astroship offers a free version with essential features and a pro version with advanced capabilities, making it suitable for various project needs.

## Main Features

- Built with Astro v3 and TailwindCSS
- Content Collections for efficient content management
- Mobile-responsive design
- Working contact page
- Free updates
- Blog functionality (pagination in Pro version)
- View Transitions (Pro version)
- Advanced homepage design (Pro version)
- Features and Integrations pages (Pro version)
- 6 months support (Pro version)

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/surjithctly/astroship.git myProjectName
   ```
   or
   ```
   git clone https://github.com/surjithctly/astroship.git .
   ```

2. Install dependencies:
   ```
   pnpm install
   ```
   (npm and yarn are also supported)

3. Start the development server:
   ```
   pnpm dev
   ```

4. For production build:
   ```
   pnpm build
   ```

5. To preview the production build:
   ```
   pnpm preview
   ```

## Usage Instructions

1. Project Structure:
   - `public/`: Store static assets like images
   - `src/components/`: Contains reusable components
   - `src/layouts/`: Holds page layouts
   - `src/pages/`: Contains `.astro` or `.md` files for each page

2. Creating Pages:
   - Add new `.astro` or `.md` files in the `src/pages/` directory

3. Styling:
   - Use TailwindCSS classes for styling components and pages

4. Content Management:
   - Utilize Astro's Content Collections for efficient content organization

5. Customization:
   - Modify existing components in `src/components/`
   - Create new components as needed
   - Adjust layouts in `src/layouts/` to fit your design requirements

6. Blog Posts:
   - Add blog posts as `.md` files in the appropriate content collection directory

7. Deploying:
   - Use the provided deploy buttons for quick deployment to Vercel or Netlify
   - Alternatively, follow your hosting provider's deployment instructions

## Important Notes

1. The free version has limitations compared to the pro version. Review the feature comparison before deciding which version suits your needs.

2. Astroship is built with Astro v3, ensuring compatibility with the latest Astro features and optimizations.

3. The template is mobile-responsive, but always test your customizations across various devices and screen sizes.

4. While the free version is under the GPL-3.0 license, the pro version comes with a commercial license.

5. Regular updates are provided for both free and pro versions. Keep your project updated to benefit from the latest improvements.

6. The pro version offers 6 months of support, which can be valuable for complex projects or if you need assistance with customizations.

7. Astroship uses pnpm as the recommended package manager, but npm and yarn are also supported.

8. Leverage Astro's built-in optimizations for performance, such as partial hydration and static site generation.

9. The project structure follows Astro's conventions, making it easy to understand and extend for developers familiar with Astro.

10. Always refer to the official Astro documentation for best practices and advanced usage of Astro features.

Astroship is a starter template for startups, marketing websites & landing pages. Built with Astro, TailwindCSS & Alpine.js

Astro Ship




## Introduction

AstroVerse is a cutting-edge Astro theme designed for visual storytelling and impactful image-text blogging. This theme is tailored for content creators who want to blend stunning visuals with engaging written content, creating immersive digital experiences. AstroVerse leverages the power of Astro, a modern static site generator, combined with Tailwind CSS and Preline UI for a responsive and visually appealing design.

## Main Features

- Powered by Astro for fast, content-focused websites
- Responsive design using Tailwind CSS and Preline UI
- Perfect 100/100 Lighthouse Performance Score
- SEO optimized structure
- Built-in site search functionality
- Sitemap and RSS feed support
- Markdown and MDX ready for flexible content creation
- Tag statistics and last modified time display
- Optimized image handling for improved performance
- Automatic dark mode switching
- Pagination for easy content navigation
- Code formatting with Prettier

## Installation Steps

1. Ensure you have Node.js and pnpm installed on your system.

2. Use the template or fork the repository:
   ```
   https://github.com/isooosi/astroverse/generate
   ```

3. Clone your new repository locally.

4. Navigate to the project directory:
   ```
   cd astroverse
   ```

5. Install dependencies:
   ```
   pnpm install
   ```

6. Start the development server:
   ```
   pnpm run dev
   ```

## Usage Instructions

1. Adding content:
   - Create new .md or .mdx files in the `src/content/posts` directory to add blog posts.

2. Configuration:
   - Modify `src/consts.ts` to update global site information, metadata, and navigation links.

3. Customization:
   - Use Tailwind CSS classes to style components and pages.
   - Modify or create new components in the `src/components` directory.

4. Building for production:
   ```
   pnpm run build
   ```

5. Previewing the production build:
   ```
   pnpm run preview
   ```

6. Formatting code:
   ```
   pnpm run format
   ```

## Important Notes

1. AstroVerse is optimized for photo-text storytelling. Ensure your content leverages this strength by using high-quality images alongside your text.

2. The theme supports automatic dark mode switching. Test your content in both light and dark modes to ensure readability.

3. When adding new posts, pay attention to the frontmatter in your Markdown files. This information is used for metadata, tags, and categories.

4. The built-in search functionality indexes your content automatically. No additional setup is required for search to work.

5. AstroVerse uses Astro's image optimization features. Follow Astro's guidelines for image handling to maintain optimal performance.

6. The theme is SEO-optimized out of the box, but consider customizing meta descriptions and titles for each post for best results.

7. Regularly update your dependencies to benefit from the latest features and security patches:
   ```
   npx @astrojs/upgrade
   ```

8. Contributions to the theme are welcome. Follow the project's contribution guidelines when submitting issues or pull requests.

9. For deployment, the theme is configured for easy deployment on Vercel. Follow the deployment button in the README for a quick setup.

10. While the theme provides a solid foundation, feel free to extend and modify it to suit your specific needs. The Astro and Tailwind CSS communities are great resources for additional customization ideas.

an Astro theme tailored for impactful image-text blogging, ideal for content creators.

AstroVerse




## Introduction

Astroberry is an elegant, accessible, and SEO-friendly blog theme designed for Astro, a modern static site generator. Built with TailwindCSS, this theme offers a beautiful and responsive design that's perfect for bloggers, writers, and content creators. Astroberry focuses on providing a seamless user experience while ensuring your content is optimized for search engines.

## Main Features

- Accessible design for improved user experience
- SEO-friendly structure to boost search engine rankings
- Beautiful and responsive layout powered by TailwindCSS
- Easy to customize and extend
- Fast performance due to Astro's static site generation
- Compatible with Markdown for easy content creation
- Optimized for quick deployment on platforms like Vercel

## Installation Steps

1. Ensure you have Node.js installed on your system.

2. Open your terminal and run the following command to create a new Astro project using the Astroberry theme:

   ```
   pnpm create astro@latest --template boluoim/astroberry
   ```

3. Follow the prompts to set up your project.

4. Once installation is complete, navigate to your project directory:

   ```
   cd your-project-name
   ```

5. Start the development server:

   ```
   pnpm run dev
   ```

6. Open your browser and visit `http://localhost:3000` to see your new Astroberry-powered blog.

## Usage Instructions

1. Customize the theme by editing the configuration files in the project root and `src` directory.

2. Add your blog posts as Markdown files in the `src/content` directory (or wherever your content is configured to be stored).

3. Modify the TailwindCSS configuration in `tailwind.config.mjs` to adjust the theme's styles to your preferences.

4. Update the site metadata, navigation, and other global settings in the appropriate configuration files (usually found in `src/config` or similar).

5. To build your site for production, run:

   ```
   pnpm run build
   ```

6. Deploy the contents of the `dist` folder to your chosen hosting platform.

## Important Notes

1. Astroberry is open-source and released under the MIT license, allowing for both personal and commercial use.

2. The theme is built with accessibility in mind, but always test your site to ensure it meets accessibility standards for your target audience.

3. While the theme is SEO-friendly, remember to create high-quality, relevant content to maximize your search engine visibility.

4. Regularly update Astro and other dependencies to ensure you have the latest features and security patches.

5. The theme is designed to be fast, but be mindful of image sizes and third-party scripts that could impact performance.

6. Astroberry is compatible with Vercel for easy deployment. You can use the "Deploy to Vercel" button in the repository for a quick start.

7. If you encounter any issues or have suggestions for improvements, consider opening an issue on the GitHub repository.

8. Familiarize yourself with Astro's documentation to take full advantage of the framework's capabilities when customizing your site.

9. While the theme provides a solid foundation, some knowledge of Astro, TailwindCSS, and web development may be necessary for advanced customizations.

10. Keep your content well-organized and use Markdown effectively to maintain a clean and efficient blog structure.

An accessible, SEO-friendly, beautiful blog theme for Astro, built with TailwindCSS.

Astrowberry




## Introduction

AstroWind is a free and open-source template designed for creating websites using Astro 4.0 and Tailwind CSS. It's a highly customizable starter theme that incorporates web development best practices and focuses on high performance. AstroWind provides a solid foundation for building modern, SEO-friendly websites with minimal setup required.

## Main Features

- Built with Astro 4.0 and Tailwind CSS
- Dark mode and RTL support
- Fast and SEO-friendly blog functionality
- Image optimization using Astro Assets and Unpic
- Automatic sitemap generation
- Open Graph tags for social media sharing
- Built-in analytics integration (Google Analytics and Splitbee)
- Responsive design
- High PageSpeed Insights scores
- MDX support for blog posts
- Categories and tags for blog organization
- Social sharing capabilities

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/onwidget/astrowind.git
   ```
2. Navigate to the project directory:
   ```
   cd astrowind
   ```
3. Install dependencies:
   ```
   npm install
   ```
4. Start the development server:
   ```
   npm run dev
   ```
5. Open your browser and visit `http://localhost:3000` to see the website.

## Usage Instructions

1. Customize the configuration in `src/config.yaml` to match your project details.
2. Modify or add pages in the `src/pages/` directory.
3. Create blog posts by adding Markdown or MDX files in `src/content/post/`.
4. Adjust the design by editing `src/components/CustomStyles.astro` and `src/assets/styles/tailwind.css`.
5. Update components in the `src/components/` directory to fit your needs.
6. Add or modify widgets in `src/components/widgets/` for new sections.
7. Run `npm run build` to create a production-ready version of your site.
8. Deploy the contents of the `dist/` folder to your preferred hosting platform.

## Important Notes

1. AstroWind supports static, hybrid, and server output configurations.
2. The blog functionality currently works only with `prerender = true`.
3. Minimal vanilla JavaScript is used, allowing flexibility in choosing a framework.
4. Regularly check for updates and new features in the AstroWind repository.
5. Contribute to the project by opening issues or pull requests on GitHub.
6. Customize the template to fit your specific project requirements.
7. Leverage Astro's ecosystem and plugins for additional functionality.
8. Optimize images and assets for better performance.
9. Test your site thoroughly across different devices and browsers.
10. Keep an eye on the upcoming AstroWind 2.0 release for new features and improvements.

AstroWind is a free and open-source template to make your website using Astro + Tailwind CSS. Ready to start a new project and designed taking into account best practices.

AstroWind




## Introduction

Bau.js is a lightweight, reactive JavaScript library for building web user interfaces. It offers a simple and efficient approach to creating UI components using pure JavaScript, without the need for JSX, templating, or virtual DOM. Bau.js focuses on reactivity, where data mutations drive view updates through carefully designed JavaScript proxies.

## Main Features

- Reactive UI library in under 350 lines of code
- No JSX, templating, or virtual DOM
- Pure JavaScript approach to component creation
- Reactive data binding with automatic DOM updates
- Ecosystem of additional libraries (bau-css, bau-ui, bau-router, bau-kit)
- Tiny bundle size (5KB for full feature set)
- TypeScript support
- High performance in benchmarks
- Simple API with key functions: tags, state, loop, derive, and batch

## Installation Steps

1. Install Bau.js using npm:
   ```
   npm install @grucloud/bau
   ```

2. Import Bau in your JavaScript file:
   ```javascript
   import Bau from "@grucloud/bau";
   ```

3. Initialize Bau:
   ```javascript
   const bau = Bau();
   ```

4. Start using Bau to create your UI components.

## Usage Instructions

1. Creating a component:
   ```javascript
   const { div, button } = bau.tags;
   
   function MyComponent() {
     return div("Hello, Bau!");
   }
   ```

2. Managing state:
   ```javascript
   const count = bau.state(0);
   
   function Counter() {
     return div(
       count,
       button({ onclick: () => ++count.val }, "+")
     );
   }
   ```

3. Rendering to DOM:
   ```javascript
   document.getElementById("app").replaceChildren(MyComponent());
   ```

4. Using lifecycle methods:
   ```javascript
   function ComponentWithLifecycle() {
     return div({
       bauCreated: () => console.log("Created"),
       bauMounted: () => console.log("Mounted"),
       bauUnmounted: () => console.log("Unmounted")
     }, "Lifecycle Component");
   }
   ```

5. Creating derived state:
   ```javascript
   const doubled = bau.derive(() => count.val * 2);
   ```

6. Conditional rendering:
   ```javascript
   function ConditionalComponent() {
     return div(
       count.val > 5 ? "High" : "Low"
     );
   }
   ```

## Important Notes

1. Bau.js promotes a single paradigm: views derive from state. Avoid direct DOM manipulation for better maintainability.

2. The library is designed to be "hard to misuse," encouraging best practices in reactive programming.

3. Bau.js supports undefined or null attributes, providing flexibility in component design.

4. The ecosystem includes additional libraries like bau-css, bau-ui, and bau-router. Explore these for extended functionality.

5. Bau.js performs well in benchmarks, often outperforming larger, more established frameworks.

6. The library exports TypeScript definition files, enhancing the development experience with code completion and type checking.

7. Bau.js is inspired by van.js but offers extended capabilities, especially in state management and lifecycle methods.

8. The project is open-source and welcomes contributions. Report bugs and suggestions on the GitHub repository.

9. For larger applications, consider using bau-kit, which combines all features in a compact 5KB bundle.

10. Explore the examples directory in the repository for practical usage patterns and best practices.

Reactive library and components for building web user interface




## Introduction

Astro Big Doc is an Astro theme designed for creating large documentation websites. It offers a zero-configuration approach to rendering standard Markdown files with enhanced functionality through custom Astro components. The theme provides features like hierarchical page menus, table of contents, and various interactive elements such as panzoom, galleries, code highlighting, diagrams, 3D models, and more.

## Main Features

- Zero-config hierarchical menu and table of contents
- Standard Markdown rendering with custom Astro components
- Panzoom and Modal functionality for images
- URL parameter support for text focus and modal opening
- Image galleries with SVG and Photoswipe support
- Interactive tables using DataTables
- Code blocks with VSCode-like highlighting and copy button
- Diagram rendering from code blocks or file links
- 3D model viewer for .glb files
- Markdown enhancements (notes, details, relative asset referencing)
- External link identification and rendering

## Installation Steps

1. Clone the repository
2. Install dependencies:
   ```
   pnpm install
   ```
3. Start the development server:
   ```
   pnpm run dev
   ```
4. Build the project:
   ```
   pnpm run build
   ```

## Usage Instructions

1. Place your Markdown content in the `content` directory (configurable).
2. Use standard Markdown syntax, enhanced with custom Astro components.
3. Utilize front-matter in Markdown files for titles, slugs, and order.
4. Add `icons.yaml` in the content root for custom app bar icons.
5. Use URL parameters for text focus and modal opening.
6. Leverage custom Markdown directives for centering images and defining sizes.
7. Create interactive tables using Markdown syntax or xlsx file links.
8. Use code blocks for syntax highlighting and diagram generation.
9. Reference 3D models and create galleries using Markdown syntax.
10. Customize the theme using environment variables in a `.env` file.

## Important Notes

1. The project uses pnpm as the package manager.
2. Environment variables can be set in a `.env` file (see `.env.example` for reference).
3. An optional Express.js server is available for serving the static site with authentication.
4. The content structure is parsed and stored in a `.structure` directory.
5. Assets are managed with zero-copy during development and optimized for production builds.
6. The theme supports both light and dark modes (toggle feature in development).
7. SVG handling may require specific attributes for proper rendering and interactivity.
8. Local development of the `content-structure` module is possible using a submodule.
9. Authentication can be set up using GitHub OAuth (requires additional configuration).
10. The project is open-source and licensed under MIT, welcoming contributions and improvements.

Astro Theme for big doc websites. Hierarchical pages menu from files structure and table of content, Markdown rendered as CMS with Astro components for panzoom, 3D, links, interactive tables and more.

Astro Big Doc




## Introduction

Bigspring Light Astro is a highly customizable theme designed specifically for SaaS and marketing websites. Built using Astro, a modern static site generator, this theme offers a perfect blend of performance and flexibility. It's ideal for businesses looking to create a strong online presence with a fast, responsive, and visually appealing website.

## Main Features

- 10+ pre-designed pages for various purposes
- Highly customizable design elements (colors, fonts, menu, social links, SEO meta tags)
- Exceptional performance with 95+ Google PageSpeed Score
- Pre-configured Netlify settings for easy deployment
- Contact form support
- Pricing table functionality
- OG Image support for better social media sharing
- Content management using Markdown and MDX
- Auto-import of MDX components
- Draft pages and posts support
- Built with Tailwind CSS for responsive design
- SEO-friendly structure

## Installation Steps

1. Ensure you have Node.js installed on your system.

2. Clone the repository or download the theme files.

3. Open the project folder in your preferred IDE (VS Code recommended).

4. Open the terminal in your IDE or navigate to the project directory in your system terminal.

5. Install dependencies by running:
   ```
   npm install
   ```

6. Start the development server:
   ```
   npm run dev
   ```

## Usage Instructions

1. Customize the theme:
   - Modify colors, fonts, and other design elements in the Tailwind configuration file.
   - Update menu items, social links, and SEO meta tags in the appropriate configuration files.

2. Create and edit content:
   - Add or modify pages using Markdown or MDX files in the designated content directories.
   - Utilize the pre-designed pages as templates for your content.

3. Develop custom components:
   - Create new components or modify existing ones in the components directory.

4. Test your changes:
   - Use the development server to preview changes in real-time.

5. Build for production:
   - When ready to deploy, run:
     ```
     npm run build
     ```

6. Deploy:
   - Use the pre-configured Netlify settings or deploy to your preferred hosting platform.

## Important Notes

1. The theme includes 10+ pre-designed pages, including Home, Blog, Pricing, Contact, FAQ, and more. Utilize these as a starting point for your website structure.

2. Bigspring Light Astro is built with Tailwind CSS, allowing for easy customization of the design. Familiarize yourself with Tailwind CSS for efficient styling.

3. Content can be written and updated using Markdown or MDX, making it easy for non-technical users to manage the website content.

4. The theme is optimized for performance, with a 95+ Google PageSpeed score. Maintain this performance by optimizing any additional assets or code you add.

5. Take advantage of the draft feature for pages and posts to prepare content without publishing it immediately.

6. The theme is fully responsive, ensuring a good user experience across desktop, tablet, and mobile devices.

7. Customize the OG Image settings to improve the appearance of your links when shared on social media platforms.

8. If you need custom development services or theme customization, the Themefisher team offers professional services.

9. The theme is released under the MIT license, allowing for both personal and commercial use. However, demo images have their own licenses and are not included for redistribution.

10. For any issues or feature requests, use the GitHub Issues page of the repository to report or track problems.

Bigspring is a highly customizable Astro theme designed specifically for SaaS & marketing websites.

Bigspring Light Astro


## Key Features

- Google PageSpeed Score 93/100 (Desktop)
- Highly customizable (Color, Font, Menu, Social Links, SEO Meta Tags, etc.)
- 17 Unique Pages
- Built with Tailwind CSS framework
- Integrated Swiper JS for slider
- Netlify Settings Predefine
- Google Map integrated
- Taxonomy support
- Contact form support
- Disqus Comments available
- Support OG image
- Fully responsive on desktops, tablets, and smartphones
- SEO Friendly
- Clean folder structure
- Simple and easy development environment setup
- Free Update and Lifetime Premium Support
- Detail Documentation.


Biztrox Astro is multipurpose business theme designed for SaaS, startups, and agencies.

Biztrox Astro




## Introduction

Astro Blog is a Jamstack blog project built using Astro.js. It's designed to showcase articles, contact information, and an about page. This project serves as a template for creating a modern, fast, and SEO-friendly blog using the Astro framework.

## Main Features

- Minimal starter kit with TypeScript base
- Responsive design using SCSS for styling
- SEO optimization with structured data (JSON-LD)
- Article categorization and tagging
- Pagination for blog posts
- Contact and About pages
- 404 error page
- Easily customizable navigation and site data

## Installation Steps

1. Clone the repository
2. Install dependencies:
   ```
   npm install
   ```
3. Install SASS for styling:
   ```
   npm install sass
   ```
4. Run the development server:
   ```
   npm run dev
   ```

## Usage Instructions

1. Customize site data in `data/siteData.js` and navigation in `data/navData.js`
2. Add or modify pages in the `src/pages/` directory
3. Create blog posts as Markdown files in the appropriate directory
4. Customize components in `src/components/` to fit your needs
5. Modify layouts in `src/layouts/` for different page types
6. Add images and other static assets to the `public/` directory
7. Customize global styles in `src/styles/global.scss`
8. Implement SEO best practices using the provided JSON-LD scripts
9. Use the Astro routing API for creating new routes based on the folder structure
10. Build your project for production:
    ```
    npm run build
    ```

## Important Notes

1. This project uses SCSS for styling, with styles written directly in Astro files except for the global styles
2. Astro's built-in routing is based on the folder structure in `src/pages/`
3. SEO and Open Graph structures are implemented based on best practices
4. The project is set up for easy deployment on platforms like Vercel
5. Consider using Tina CMS for blog administration (requires additional setup)
6. Astro offers great performance benefits for static site generation
7. The project structure is organized for scalability and easy maintenance
8. Customizing the template requires basic knowledge of Astro, SCSS, and JavaScript
9. Regular updates to Astro and its dependencies are recommended for optimal performance and security
10. Refer to the Astro documentation and community resources for advanced customization and troubleshooting

Blog Astro




## Introduction

Openblog is an elegant, simple, and user-friendly blog template built with Astro and designed for optimal accessibility, SEO, and performance. This template provides a solid foundation for creating a modern, fast-loading blog with a focus on user experience and search engine visibility. It combines powerful features with a clean design, making it an excellent choice for developers and content creators looking to establish a professional online presence.

## Main Features

- Minimal styling for a clean, professional look
- Mobile-responsive design
- Perfect 100/100 Lighthouse performance score
- SEO-friendly with canonical URLs and OpenGraph data
- Sitemap and RSS Feed support
- Markdown and MDX content support
- Syntax highlighting for code blocks
- Image optimization
- Table of contents for easy navigation
- Dark mode support
- Reading time estimation
- Pagefind static search library integration
- Related posts functionality
- Social media sharing for posts (LinkedIn, Twitter)
- Draft mode for unpublished content
- Copy code block functionality
- Integrated CMS using Tina CMS
- Pagination support
- View Transitions for smooth page changes

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/danielcgilibert/blog-template.git my-blog
   ```

2. Navigate to the project directory:
   ```
   cd my-blog
   ```

3. Install dependencies:
   ```
   pnpm install
   ```

4. Run the development server:
   ```
   pnpm dev
   ```

## Usage Instructions

1. Configuration:
   - Edit `src/data/site.config.ts` for basic blog metadata
   - Update `astro.config.mjs` with your domain
   - Modify files in the `/public` folder (favicon, robots.txt, open-graph images)
   - Edit social network links in `src/components/Header.astro`

2. Adding Categories:
   - Add new categories in `src/data/categories.ts`

3. Creating Posts:
   - Add `.md` or `.mdx` files to `src/content/blog`
   - Use the filename to create the post's slug/URL

4. Frontmatter:
   - Required: title, description, pubDate, heroImage, category
   - Optional: draft, tags

5. Draft Mode:
   - Add `draft: true` to the frontmatter to prevent a post from being displayed

6. Using Tina CMS:
   - Access the CMS to create and edit posts visually

7. Build for production:
   ```
   pnpm run build
   ```

8. Preview the production build:
   ```
   pnpm run preview
   ```

## Important Notes

1. The template uses Tailwind CSS for styling, providing utility-first CSS capabilities.

2. Zod is used for schema validation, ensuring post frontmatter is correctly formatted.

3. The template includes ESLint and Prettier for code formatting and linting.

4. Tina CMS integration is optional and can be removed if not needed.

5. The project uses TypeScript for improved type safety and developer experience.

6. View Transitions are implemented for smooth page navigation, enhancing user experience.

7. The template is optimized for SEO with features like canonical URLs and OpenGraph data.

8. Regular updates to dependencies are recommended to maintain security and performance.

9. Customization options are available for colors, post authors, and internationalization in future updates.

10. The project is open-source and welcomes contributions, with a roadmap for future enhancements.

Openblog is an elegant, simple, and user-friendly blog. Focused on accessibility, SEO and performance.

Openblog




## Introduction

Blogster is a collection of beautiful, accessible, and performant blog templates built with Astro and Markdoc. These templates are designed to provide bloggers with a range of stylish options that are not only visually appealing but also optimized for speed and accessibility. Blogster offers multiple themes, each with its unique design philosophy, catering to different aesthetic preferences while maintaining high performance standards.

## Main Features

- Fast loading times due to Astro's static site generation
- Built-in light and dark mode for all themes
- Mobile-first responsive design
- Accessible content structure
- Perfect lighthouse scores (100 across all categories)
- Easy content authoring using Markdown (.md) files
- Extended Markdown capabilities with Markdoc
- Custom components support (e.g., YouTube embed, Twitter embed) in Markdown files
- Built-in RSS feed for blogs
- Excellent SEO optimization
- Multiple theme options: Minimal, Sleek, Newspaper, and Bubblegum

## Installation Steps

1. Open your terminal.

2. Run the following command, replacing `<theme>` with your chosen theme (minimal, sleek, newspaper, or bubblegum):
   ```
   npx create-blogster@latest --theme <theme>
   ```

3. Follow the prompts to complete the installation process.

4. Navigate to the newly created project directory.

5. Install dependencies (if not done automatically):
   ```
   npm install
   ```

## Usage Instructions

1. Start the development server:
   ```
   npm run dev
   ```

2. Create new blog posts:
   - Add Markdown (.md) files in the designated content directory.
   - Use Markdoc syntax for extended features and custom components.

3. Customize your blog:
   - Modify the configuration files to adjust site-wide settings.
   - Edit theme files to change the appearance of your blog.

4. Build your site for production:
   ```
   npm run build
   ```

5. Preview the production build:
   ```
   npm run preview
   ```

## Important Notes

1. Blogster is currently in alpha preview. Users are encouraged to provide feedback through GitHub discussions or issues.

2. The project was built before Astro released content collections. It may not receive future updates due to Astro's built-in support for similar features.

3. Each theme (Minimal, Sleek, Newspaper, Bubblegum) has its own unique design and features. Choose the one that best fits your needs.

4. Blogster uses Markdoc instead of MDX for extended Markdown capabilities, allowing for more flexible content authoring without leaking code into Markdown files.

5. The templates are designed to be performant by default, with zero or minimal JavaScript depending on the theme.

6. Custom components (like YouTube or Twitter embeds) can be easily integrated into your Markdown content using Markdoc syntax.

7. All themes are built with accessibility in mind, ensuring a wide range of users can interact with your content.

8. The project structure separates themes and shared packages, making it easier to maintain and contribute to the project.

9. When searching for references across the repository, exclude the `templates/` directory as it contains auto-generated content.

10. Blogster is open-source and licensed under the MIT License, allowing for both personal and commercial use with proper attribution.

A collection of beautiful, accessible and performant Astro blog templates.

Blogster




## Introduction

Astro Boilerplate is a comprehensive starter template for building responsive blogs and portfolio websites using Astro, a modern static site generator. This boilerplate combines the power of TypeScript, React, and Tailwind CSS to create fast, SEO-friendly websites with an emphasis on developer experience. It's designed to provide a solid foundation for both beginners and experienced developers looking to quickly set up a new project.

## Main Features

- Complete blog functionality with syntax highlighting and pagination
- SEO optimization with sitemap.xml and robots.txt
- RSS feed support
- Dark theme option
- Responsive design using Tailwind CSS
- Image lazy loading for improved performance
- TypeScript integration for enhanced code quality
- ESLint and Prettier configuration for consistent code style
- Git hooks with Husky, lint-staged, and Commitlint
- One-click deploy to Netlify

## Installation Steps

1. Clone the repository:
   ```
   git clone --depth=1 https://github.com/ixartz/Astro-boilerplate my-project-name
   ```

2. Navigate to the project directory:
   ```
   cd my-project-name
   ```

3. Install dependencies:
   ```
   npm install
   ```

4. Start the development server:
   ```
   npm run dev
   ```

## Usage Instructions

1. Customize your blog:
   - Add or modify Markdown files in the appropriate content folder
   - Adjust the site configuration in Astro config files

2. Develop components:
   - Use TypeScript and React to create new components in the `src` directory
   - Style components using Tailwind CSS classes

3. Run linting and formatting:
   ```
   npm run lint
   ```

4. Build for production:
   ```
   npm run build
   ```

5. Preview the production build:
   ```
   npm run preview
   ```

6. Deploy your site:
   - Use the generated `dist` folder to deploy manually, or
   - Set up automatic deployment with Netlify

## Important Notes

1. The boilerplate is designed with a "developer experience first" philosophy, incorporating tools like ESLint, Prettier, and TypeScript for code quality.

2. It uses Node.js and npm, with tested compatibility for Node v16.15.1. Using nvm or volta for version management is recommended.

3. The project includes a dark theme option, enhancing user experience and accessibility.

4. SEO optimization is built-in, with automatic generation of sitemap.xml and robots.txt files.

5. The boilerplate supports image lazy loading to improve page load times and performance.

6. It includes a complete blog feature set, making it ideal for content-heavy websites.

7. The project uses Tailwind CSS for styling, allowing for rapid UI development.

8. Git hooks are set up using Husky, lint-staged, and Commitlint to ensure code quality and consistent commit messages.

9. The boilerplate is open-source and licensed under the MIT License, allowing for both personal and commercial use.

10. Contributions are welcome, and issues can be opened for questions or bug reports on the GitHub repository.

Astro boilerplate with responsive blog and portfolio template using TypeScript and React styled with Tailwind CSS

Astro Boilerplate




## Introduction

Bookworm Light Astro is a feature-rich, minimal, and highly customizable blog theme built for the Astro static site generator. It's designed to be easy to use, fast, and SEO-friendly, making it an excellent choice for bloggers, content creators, and developers looking to set up a professional-looking blog quickly. The theme supports multiple authors, offers a clean design, and includes various features to enhance the blogging experience.

## Main Features

- Highly customizable (colors, fonts, menus, social links, SEO meta tags)
- Multi-author support with dedicated author pages
- Search functionality powered by FuseJS
- Tags and categories for content organization
- Social sharing options for posts
- Similar post suggestions
- Fast performance (95+ Google PageSpeed Score)
- Responsive design for all devices
- Built with Tailwind CSS for easy styling
- SEO-friendly structure
- Markdown and MDX support for content creation
- Draft post support
- Contact form integration
- OG Image support for better social media sharing

## Installation Steps

1. Ensure Node.js is installed on your system.

2. Clone the Bookworm Light Astro repository:
   ```
   git clone https://github.com/themefisher/bookworm-light-astro.git
   ```

3. Navigate to the project directory:
   ```
   cd bookworm-light-astro
   ```

4. Install dependencies:
   ```
   npm install
   ```

5. Run the development server:
   ```
   npm run dev
   ```

6. Open your browser and visit `http://localhost:3000` to see the site.

## Usage Instructions

1. Customize the theme by editing the configuration files in the project root and `src/config` directory.

2. Add or modify content by creating Markdown or MDX files in the `src/content` directory.

3. Customize styles using Tailwind CSS classes or by modifying the `tailwind.config.js` file.

4. Add new authors by creating entries in the authors' configuration file.

5. Use the provided MDX components to enhance your content with custom elements.

6. To create a production build, run:
   ```
   npm run build
   ```

7. Deploy the contents of the `dist` folder to your preferred hosting platform.

## Important Notes

1. The theme is open-source and released under the MIT license, allowing for both personal and commercial use.

2. While the code is free to use, the demo images are not included in the license and should not be used without permission.

3. The theme is optimized for performance, but users should be mindful of image sizes and third-party scripts that may affect load times.

4. Regular updates to Astro and dependencies may require periodic maintenance of your site.

5. Custom development services are available from the theme creators for more advanced customization needs.

6. The theme supports Netlify out of the box, making deployment straightforward on that platform.

7. Users are encouraged to report any issues or suggest improvements through the GitHub issue tracker.

8. The theme's SEO features should be leveraged by properly setting meta tags and using provided SEO components.

9. While the theme is feature-rich, users may need basic knowledge of Astro and web development for advanced customizations.

10. The community is encouraged to contribute to the theme's development, making it a collaborative open-source project.

Bookworm Light is a feature-rich, minimal, highly customizable, easy-to-use Astro blog starter theme.

Bookworm Light Astro




## Introduction

Brutal is a minimalist neobrutalist theme for Astro, a modern static site generator. This theme embraces the neobrutalist web design movement, which focuses on creating websites with a stripped-down, functional aesthetic. Brutal offers a range of features including image optimization, RSS feed generation, and sitemap creation to enhance your site's SEO performance. It's designed to be lightweight, with no JavaScript out of the box, but allows for easy customization and extension.

## Main Features

- Built with Astro for optimal performance
- Neobrutalist design philosophy for a unique visual style
- UnoCSS integration for efficient styling
- Automatic sitemap generation
- RSS feed support
- Image optimization
- SEO-friendly structure
- Customizable color schemes
- Responsive design
- Zero JavaScript by default (can be added as needed)

## Installation Steps

1. Create a new Astro project using Brutal as the template:
   ```
   # Using npm
   npx create astro@latest -- --template eliancodes/brutal

   # Using pnpm
   pnpm dlx create-astro --template eliancodes/brutal

   # Using yarn
   yarn create astro --template eliancodes/brutal
   ```

2. Navigate to the project directory.

3. Install dependencies:
   ```
   pnpm install
   ```

4. Start the development server:
   ```
   pnpm dev
   ```

## Usage Instructions

1. Customize the site configuration:
   - Edit `astro.config.mjs` to set your site URL and other Astro configurations.

2. Create and edit content:
   - Add blog posts as Markdown files in the `src/content/blog` directory.

3. Modify components:
   - Customize existing components or create new ones in the `src/components` directory.

4. Styling:
   - Use UnoCSS utility classes for styling. Customize the `uno.config.ts` file if needed.

5. Add pages:
   - Create new `.astro` files in the `src/pages` directory for additional pages.

6. Build for production:
   ```
   pnpm build
   ```

7. Preview the production build:
   ```
   pnpm preview
   ```

## Important Notes

1. The theme uses UnoCSS, which is compatible with TailwindCSS syntax but offers additional features like PureCSS icons.

2. Sitemap generation is automatic. Ensure you set the correct `site` URL in `astro.config.mjs`.

3. The RSS feed is generated from blog posts in `src/content/blog`. Customize `src/pages/feed.xml.js` if needed.

4. The theme includes pre-defined color schemes that can be easily customized or extended in `astro.config.mjs`.

5. Components are organized into specific directories (blog, errors, generic, home, layout) for easy management.

6. The theme is designed to be JavaScript-free by default, but you can add JavaScript as needed for additional functionality.

7. Image optimization is built-in, helping to improve page load times and overall performance.

8. The neobrutalist design philosophy emphasizes minimalism and functionality, which may require a different approach to visual design compared to more traditional websites.

9. While the theme is minimal, it's built to be extensible. You can easily add more features or integrations as your project grows.

10. Regular updates to Astro or the theme itself may introduce new features or changes, so it's recommended to check the repository for updates periodically.

Brutal




## Introduction

The bun-test-astro-template is a hands-on code repository designed to demonstrate the integration of Bun, a fast all-in-one JavaScript runtime, with Astro, a modern static site builder. This template serves as a practical example for developers looking to explore the capabilities of Bun in conjunction with Astro for web development projects.

## Main Features

- Built with Bun v1.0.18 for enhanced JavaScript runtime performance
- Integrates Astro for efficient static site generation
- Includes example components and tests to showcase Bun's capabilities
- Supports TypeScript for improved code quality and developer experience
- Provides a ready-to-use template for quick project setup
- Includes WebSocket server example for real-time applications
- Demonstrates testing setup with Bun's built-in test runner

## Installation Steps

1. Ensure Bun is installed on your system. If not, install it from the official Bun website.

2. Clone the repository:
   ```
   git clone https://github.com/mingderwang/bun-test-astro-template.git
   ```

3. Navigate to the project directory:
   ```
   cd bun-test-astro-template
   ```

4. Install dependencies:
   ```
   bun install
   ```

## Usage Instructions

1. To run the project:
   ```
   bun run index.ts
   ```

2. To run tests:
   ```
   bun test
   ```

3. Explore the example components:
   - Check `Counter.tsx` and `UserList.tsx` for React component examples
   - Review `fetch.test.tsx` for an example of testing API calls
   - Examine `wss.js` for WebSocket server implementation

4. Modify the Astro configuration in `astro.config.mjs` to customize your project settings.

5. Use the `src` directory to add or modify Astro pages and components.

6. Leverage Bun's fast runtime for development and testing processes.

## Important Notes

1. This template is designed as a learning resource for the integration of Bun and Astro. It's suitable for developers looking to experiment with these technologies.

2. The project uses TypeScript, ensuring type safety and improved developer experience. Make sure to maintain proper typing in your components and functions.

3. The WebSocket server example in `wss.js` demonstrates how to set up real-time communication capabilities within the Bun environment.

4. The `happydom.ts` file is included for DOM testing purposes, allowing for component testing in a Node.js environment.

5. The `bunfig.toml` file contains Bun-specific configurations. Modify this file to adjust Bun's behavior for your project needs.

6. Remember to update the `package.json` file with your project-specific information and dependencies as your project grows.

7. This template is hosted on Vercel, as indicated by the provided URL. You can easily deploy your own version of this project to Vercel or other similar platforms for showcasing your work.

hands-on code for https://codewithme.muzamint.com/

Bun Test Astro Template




## Introduction

Astro Collaborative Starter is an innovative toolkit designed to add real-time collaboration features to Astro-based projects. This starter kit provides a set of easy-to-use components that enable developers to incorporate multiplayer presence and interactive elements into their Astro applications. Built with modern web technologies, it offers a seamless way to create collaborative experiences within the Astro framework.

## Main Features

- Ready-to-use collaborative components
- Real-time multiplayer functionality
- Integration with Liveblocks for powering multiplayer features
- Lit-based web components for efficient rendering
- tldraw integration for collaborative drawing capabilities
- Optimized for Astro projects
- Easy to customize and extend

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/CTNicholas/astro-collaborative-starter.git
   ```
2. Navigate to the project directory:
   ```
   cd astro-collaborative-starter
   ```
3. Install dependencies:
   ```
   npm install
   ```
4. Set up environment variables:
   - Copy the `.env` file and rename it to `.env.local`
   - Add your Liveblocks API key to the `.env.local` file
5. Start the development server:
   ```
   npm run dev
   ```

Alternatively, you can install the collaborative components directly from NPM:
```
npm i astro-collab
```

## Usage Instructions

1. Import the desired collaborative components in your Astro pages or components
2. Use the components by adding them to your Astro markup
3. Customize the components as needed to fit your project requirements
4. Implement user authentication if required for your collaborative features
5. Test the real-time functionality across multiple browser instances or devices
6. Build your project for production:
   ```
   npm run build
   ```
7. Deploy your Astro application to your preferred hosting platform

## Important Notes

1. This starter kit is specifically designed for Astro projects
2. Familiarity with Astro, Lit, and Liveblocks will be beneficial
3. Ensure you have a Liveblocks account and API key for full functionality
4. The collaborative components are modular and can be used individually
5. The LiveDrawing component utilizes tldraw, which may require additional setup
6. Always secure your Liveblocks API key and other sensitive information
7. Test collaborative features thoroughly to ensure smooth user experience
8. The project is open for contributions and improvements
9. Refer to the demo website for a comprehensive guide on using the components
10. For updates and more collaborative projects, follow the creator on Twitter

Looking to add collaboration to Astro? You've come to the right spot, Astronaut! This starter kit contains a set of quick and easy elements for adding multiplayer presence to your app.

Astro Collaborative Starter




## Introduction

Astro-commerce is a versatile e-commerce template designed for small businesses, built using Astro, a modern static site generator. While the template showcases audio devices, it's adaptable for any product type. This project employs the atomic design structure, providing a scalable and maintainable architecture for e-commerce websites.

## Main Features

- Built with Astro for optimal performance
- Follows atomic design principles for component organization
- Tailwind CSS integration for styling
- Responsive design for various screen sizes
- Product showcase pages
- Easily customizable for different product types
- Deployed on Vercel for fast, global content delivery

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/asoluka/astro-commerce.git
   ```

2. Navigate to the project directory:
   ```
   cd astro-commerce
   ```

3. Install dependencies:
   ```
   npm install
   ```

## Usage Instructions

1. Start the development server:
   ```
   npm run dev
   ```
   This will launch the site at `localhost:4321`

2. Build the project for production:
   ```
   npm run build
   ```

3. Preview the production build locally:
   ```
   npm run preview
   ```

4. To customize the template:
   - Modify components in the `src/components` directory
   - Update styles in the `src/design-system` folder
   - Edit pages in the `src/pages` directory

5. Add your products by updating the relevant components and pages

6. Deploy your site:
   - The project is set up for easy deployment on Vercel
   - You can also deploy to other platforms that support static site hosting

## Important Notes

1. The project structure follows the atomic design pattern. Familiarize yourself with this concept for efficient development.

2. The `public` folder contains all static assets, including product images. Optimize these for web to ensure fast loading times.

3. Tailwind CSS is used for styling. Customize the `tailwind.config.cjs` file to match your brand's design system.

4. The template is initially set up for audio devices, but can be easily adapted for other product types.

5. Ensure to update SEO metadata in each page for better search engine visibility.

6. The project uses TypeScript. Make sure to maintain type safety when making changes.

7. Regularly update dependencies for security and performance improvements.

8. Test thoroughly across different devices and browsers before deploying to production.

9. The `astro.config.mjs` file contains Astro-specific configurations. Modify this if you need to add integrations or change build settings.

10. Consider contributing back to the project if you make significant improvements or add useful features for e-commerce functionality.

An ecommerce template for small bussiness. Although this template showcases a store for audio devices, it could be used showcase any type of product.

Commerce


## Key Features

- 17+ Unique Pages
- Highly customizable (Color, Font, Menu, Social Links, SEO Meta Tags, etc.)
- Fast by default (95+ Google PageSpeed Score)
- Built with Tailwind CSS framework
- Netlify setting pre-configured
- Contact form support
- Support Disqus Comments
- Write and update content in Markdown / MDX
- MDX components auto-import
- Fully responsive on desktops, tablets, and smartphones
- SEO Friendly
- No jQuery. Only Vanilla JavaScript
- Simple and easy development environment setup
- Compatible with all modern browsers
- Free Google fonts
- Font Awesome icons
- Lifetime free updates


Copper is a modern, fully customizable SaaS theme built with Astro and Tailwind CSS. It includes 17+ pre-built pages that you can easily customize to match your branding and needs.

Copper Astro




## Introduction

Craftzdog-uses is a project that showcases a curated list of technology used by the developer Takuya. It's built using Astro and Tailwind CSS, providing a sleek and modern website to display the tech stack. This project serves as both a personal reference and a resource for others interested in the tools and technologies used by a professional developer.

## Main Features

- Built with Astro, a modern static site generator
- Styled using Tailwind CSS for responsive and customizable design
- Incorporates React for component-based UI
- Uses Headless UI for unstyled interactive components
- Includes React Icons for a comprehensive icon set
- Optional integration with Inkdrop for markdown note-taking and content management
- Category-based organization of tech items
- Responsive layout for various screen sizes

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/craftzdog/craftzdog-uses.git
   ```

2. Navigate to the project directory:
   ```
   cd craftzdog-uses
   ```

3. Install dependencies:
   ```
   npm install
   ```
   or
   ```
   yarn install
   ```

4. Run the development server:
   ```
   npm run dev
   ```
   or
   ```
   yarn dev
   ```

5. Build for production:
   ```
   npm run build
   ```
   or
   ```
   yarn build
   ```

## Usage Instructions

1. Customize content:
   - Edit or add new `.md` files in the `src/pages/posts/` directory to update or add new tech items.
   - Modify category pages in `src/pages/categories/` to organize your tech items.

2. Styling:
   - Adjust global styles in the `src/styles/` directory.
   - Modify Tailwind CSS configuration in `tailwind.config.cjs` if needed.

3. Components:
   - Create or edit components in the `src/components/` directory.

4. Inkdrop Integration (optional):
   - Set up a `.env` file with your Inkdrop credentials and configuration.
   - Run `npm run live-import` to import notes from your Inkdrop local server.

5. Deployment:
   - The project includes a `vercel.json` file, making it easy to deploy on Vercel.
   - Alternatively, you can deploy to any static site hosting platform of your choice.

## Important Notes

1. This project is open-source and available under the MIT License.

2. If you fork this project, make sure to:
   - Delete the original blog content and assets.
   - Add a link to the original creator's homepage (https://www.craftz.dog/).

3. The project structure is organized for easy maintenance and scalability:
   - `public/`: Contains static assets.
   - `src/`: Houses the main source code, including components, layouts, pages, and styles.
   - `tools/`: Contains scripts for Inkdrop integration.

4. For developers interested in the build process, there's a YouTube tutorial available showing how the website was built: https://youtu.be/3_JE76PKBWE

5. The project uses a combination of Astro, React, and Tailwind CSS, providing a powerful and flexible foundation for creating and maintaining a tech showcase website.

A curated list of the tech I use, built with Astro and Tailwind CSS

Craftzdog Uses




## Introduction

Cute Blog is a free, modern blog template built using Astro, a static site generator. Designed by mesinkasir, this template offers a sleek and minimalist design perfect for bloggers and content creators. It leverages Astro's powerful features to create fast, efficient websites with a focus on simplicity and ease of use.

## Main Features

- Built with Astro for optimal performance and static site generation
- Clean and minimalist design suitable for various blog types
- Responsive layout for seamless viewing across devices
- Easy customization and content management
- Fast loading times due to static site architecture
- SEO-friendly structure
- Compatible with various hosting platforms (Firebase, Netlify demonstrated)

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/mesinkasir/cute-blog.git
   ```

2. Navigate to the project directory:
   ```
   cd cute-blog
   ```

3. Install dependencies:
   ```
   npm install
   ```

4. Start the development server:
   ```
   npm run dev
   ```

## Usage Instructions

1. Customize content:
   - Edit Markdown files in the `src/pages` directory to create or modify blog posts
   - Update site metadata and configuration in `astro.config.mjs`

2. Modify design:
   - Adjust styles in the CSS files located in the `src` directory
   - Customize components in the `src/components` folder

3. Build for production:
   ```
   npm run build
   ```
   This generates static files in the `dist` directory

4. Deploy:
   - Upload the contents of the `dist` directory to your preferred hosting platform
   - The template is ready for deployment on platforms like Firebase, Netlify, or any static site host

5. For detailed customization, refer to the Astro documentation and the template's structure

## Important Notes

1. This template is designed for simplicity. Familiarize yourself with Astro's concepts for more advanced customizations.

2. Regularly update dependencies to ensure security and access to the latest features.

3. Optimize images and assets for web to maintain fast loading times.

4. Customize meta tags and SEO elements for each page to improve search engine visibility.

5. The template uses minimal JavaScript, focusing on static content for performance. Add interactive elements carefully if needed.

6. Test your site across various devices and browsers before deploying to ensure responsiveness.

7. Consider contributing back to the project if you make significant improvements or add useful features.

8. The template is open-source. Ensure you comply with the license terms when using or modifying it.

9. For support or more information, refer to the documentation link provided in the repository.

10. This template is an excellent starting point for bloggers new to Astro or those seeking a clean, minimalist design.

Cuteblog blog template for astro modern generator static site - Created with StackBlitz ️

Cute Blog




## Introduction

Astro CV Theme is a specialized template designed for creating professional resumes or CVs using the Astro framework. This theme offers a clean, modern layout that's perfect for showcasing your skills, experience, and achievements. Built with Astro, it provides fast performance and easy customization, making it an ideal choice for job seekers and professionals looking to create an impressive online presence.

## Main Features

- Built with Astro for optimal performance
- Integrated with Forestry CMS for easy content management
- Responsive design for various screen sizes
- Google Fonts integration for typography
- Font Awesome icons for visual elements
- Easy deployment to Netlify
- Customizable sections for personal information, skills, experience, and education
- Clean and professional layout based on w3.css CV Template

## Installation Steps

1. Clone the repository:
   ```
   git clone https://github.com/dofbi/astro-cv-theme.git
   ```

2. Navigate to the project directory:
   ```
   cd astro-cv-theme
   ```

3. Install dependencies:
   ```
   npm install
   ```

4. Start the development server:
   ```
   npm run dev
   ```

## Usage Instructions

1. Open your browser and go to `localhost:3000` to view the site locally.

2. Customize the content by editing the files in the `src` directory.

3. To use Forestry CMS:
   - Import the theme into Forestry CMS using the provided button in the repository.
   - Edit your content through the Forestry interface.

4. To build the site for production:
   ```
   npm run build
   ```

5. Preview the built site before deployment:
   ```
   npm run preview
   ```

6. Deploy to Netlify using the "Deploy to Netlify" button in the repository for easy hosting.

7. Customize the theme further by modifying the CSS and Astro components as needed.

## Important Notes

1. This theme is MIT licensed, allowing for free use and modification.

2. The theme uses Google Fonts and Font Awesome, ensure you have an internet connection for these resources to load properly.

3. For best results, use high-quality, professional images for your profile picture.

4. Regularly update your CV content to reflect your latest experiences and skills.

5. Test your CV on various devices to ensure responsiveness across different screen sizes.

6. If you find the theme helpful, consider supporting the creator through the provided donation links.

7. For any issues or feature requests, you can report them on the GitHub repository.

8. Join the Astro Discord server for community support and updates related to Astro development.

Astro Cv Theme




## Introduction

Dante is a sleek and minimalist Astro.js theme designed for single-author blogs and portfolios. It offers a clean, responsive layout that prioritizes content presentation. Built with Astro.js and Tailwind CSS, Dante provides a modern development experience while ensuring optimal performance and SEO-friendliness.

## Main Features

- Dark and light color mode support
- Hero section with bio
- Portfolio collection
- Pagination functionality
- Post tagging system
- Subscription form integration
- View transitions for smooth navigation
- Tailwind CSS for styling
- Mobile-first responsive design
- SEO optimization with canonical URLs and OpenGraph data
- Sitemap and RSS feed support
- Markdown and MDX content compatibility

## Installation Steps

1. Click the "Deploy to Netlify" button on the GitHub repository page to create a new repo and set it up for deployment.

2. Clone the newly created repository to your local machine.

3. Navigate to the project directory and install dependencies:
   ```
   npm install
   ```

4. Start the development server:
   ```
   npm run dev
   ```

5. Open your browser and visit `http://localhost:4321` to see the site.

## Usage Instructions

1. Content Management:
   - Blog posts: Add or edit Markdown/MDX files in `src/content/blog/`
   - Portfolio items: Manage in the appropriate content collection (location not specified in README)

2. Customization:
   - Modify site-wide settings in `astro.config.mjs`
   - Adjust styles using Tailwind CSS classes or by editing `tailwind.config.cjs`
   - Update components in `src/components/` directory

3. Page Creation:
   - Add new pages as `.astro` or `.md` files in the `src/pages/` directory

4. Static Assets:
   - Place images and other static files in the `public/` directory

5. Building for Production:
   ```
   npm run build
   ```

6. Previewing the Production Build:
   ```
   npm run preview
   ```

## Important Notes

1. The theme is designed for single-author use, so customization may be needed for multi-author setups.

2. Familiarize yourself with Astro.js and its content collection system for efficient content management.

3. Utilize the provided integrations (@astrojs/tailwind, @astrojs/sitemap, @astrojs/mdx, @astrojs/rss) to extend functionality.

4. The theme uses view transitions, which may require additional configuration for complex animations.

5. Ensure all SEO-related fields are properly filled out in your content frontmatter for optimal search engine performance.

6. The subscription form is included, but you'll need to integrate it with your preferred email service provider.

7. Regularly update dependencies to benefit from the latest features and security patches.

8. The theme is licensed under GPL-3.0, which has specific requirements for distribution and modification.

9. For additional Astro.js themes, check out justgoodui.com.

10. When adding custom content, make sure to respect copyright and licensing of any third-party assets you use.

Dante - a single-author blog and portoflio theme for Astro.js and Tailwind CSS.

Dante




## Introduction

Astro Design System is a theme/starter project designed for creating comprehensive design systems using Astro, a modern static site generator. This project provides an easy-to-use framework for documenting design decisions and components, making it ideal for developers and designers who want to establish a cohesive visual language for their projects. The theme's flexibility allows for the integration of components from various frameworks, making it a versatile choice for teams working with different technologies.

## Main Features

- Easy setup for creating a design system
- Compatible with multiple frontend frameworks (React, Vue, Svelte)
- Customizable core design elements (colors, typography, shadows)
- Markdown support for easy documentation
- Responsive layout with sidebar navigation
- Component preview functionality
- Customizable page layouts
- Built with Astro for optimal performance

## Installation Steps

1. Ensure you have Node.js installed on your system.

2. Clone the Astro Design System repository:
   ```
   git clone https://github.com/jordienr/astro-design-system.git
   ```

3. Navigate to the project directory:
   ```
   cd astro-design-system
   ```

4. Install dependencies:
   ```
   npm install
   ```
   or
   ```
   yarn install
   ```

5. Start the development server:
   ```
   npm run dev
   ```
   or
   ```
   yarn dev
   ```

6. Open your browser and visit `http://localhost:3000` to see the design system.

## Usage Instructions

1. Add new sections by creating folders in the `src/pages` directory and updating the navigation config in `src/config.ts`.

2. Create new pages by adding `.astro` or `.md` files in the appropriate section folders.

3. Customize core design elements by editing the `src/config/design.config.ts` file.

4. Modify page layouts by editing the CSS in `src/styles/content.scss`.

5. Import and document your components by following the example of the `MainButton` component in `src/pages/en/buttons.md`.

6. Use the `.component-preview` class to create visually appealing component demonstrations.

7. To build for production, run:
   ```
   npm run build
   ```
   or
   ```
   yarn build
   ```

8. Deploy the contents of the `dist` folder to your preferred hosting platform.

## Important Notes

1. The theme is open-source and available for both personal and commercial use under the MIT license.

2. Astro's multi-framework support allows you to import components from React, Vue, or Svelte, making it versatile for different tech stacks.

3. The sidebar navigation is configured in `src/config.ts`. Remember to update this file when adding new sections or pages.

4. The theme uses Markdown for documentation, allowing for easy content creation and maintenance.

5. Custom components can be previewed using the `.component-preview` utility class for consistent presentation.

6. The core design elements (colors, typography, shadows) are centralized in the `design.config.ts` file for easy management.

7. While the theme provides a solid foundation, familiarity with Astro and basic web development concepts will be beneficial for customization.

8. The project structure is flexible, allowing you to organize your design system pages as you see fit.

9. Regular updates to Astro and other dependencies may be necessary to maintain compatibility and security.

10. For any issues or feature requests, consider opening an issue on the GitHub repository or contributing to the project.

Free
Library

Sponsor Slot

Hugoplate

Spydea Astro

Modernize Next Js Admin Dashboard

Bigspring Light Astro

Flexy NextJs Dashboard – MUI (App Directory)

Hydrogen Astro

Flexy Admin Nextjs Free

Taxonomy

Search Themes, Tools, And Blogs

Themes

Tools

Blog

Free Library

Free
Library