DOCSEARCHbyAlgolia
Submit Docs

AstroWind Documentation

repository·main·Indexed 27 days ago

https://github.com/arthelokyo/astrowind

A high-performance, production-ready Astro v6 starter theme and template featuring Tailwind CSS v4. Designed for SEO-friendly blogs and websites, it includes built-in support for image optimization, RSS feeds, analytics, and MDX content. The template provides a comprehensive configuration system via config.yaml for site metadata, i18n, and theme settings, along with a structured approach to landing page design and content collections.

Tokens
6.5K
Snippets
21
Records
46
Agent score
88%

What's inside AstroWind

  1. Project structure overview

    main

    AstroWind follows a standard Astro project structure with specific locations for key assets and configurations:

    • src/pages/: Contains .astro or .md files that define your site routes.
    • src/components/: Location for Astro, React, Vue, Svelte, or Preact components.
    • src/assets/: For images or assets that require transformation (imported directly).
    • public/: For static assets that do not require transformation.
    • src/data/post/: Contains blog post content (.md or .mdx).
    • src/config.yaml: The primary configuration file for site settings, SEO, and app features.
    • src/assets/styles/tailwind.css: Tailwind theme tokens and custom utilities.
    • src/components/CustomStyles.astro: CSS variables for colors and fonts.

  2. Configure Markdown Frontmatter for Posts

    main

    When creating .mdx posts in AstroWind, use YAML frontmatter to define metadata. The following keys are used in the demo post:

    • publishDate: ISO 8601 formatted date string.
    • title: The title of the post.
    • excerpt: A short summary for listing pages.
    • tags: An array of strings for categorization.
    ---
publishDate: 2023-01-02T00:00:00Z
title: Markdown elements demo post
excerpt: Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor.
tags:
  - markdown
  - blog
  - Astro
---

  3. Deploy AstroWind to production

    main

    Manual Deployment

    Generate an optimized production build using:

    npm run build

    The resulting files are located in the dist/ folder and can be hosted on any static hosting service.

    Automated Deployment

    You can deploy by cloning the repository to your own GitHub account and using one of the following services:

    • Netlify
    • Vercel
    • PandaStack

  4. Elements of a high-converting Landing Page

    main

    To create an effective landing page using the AstroWind template (built with Astro and Tailwind CSS), ensure you include these core elements:

    • Benefit-Centric Headline: Immediately communicates the value proposition.
    • Engaging Imagery: Visuals that complement and enhance the text.
    • Compelling Copy: Clear, concise, and persuasive text addressing visitor needs.
    • Clear Call-to-Action (CTA): A prominent button or link that urges immediate action.
    • Minimalist Design: A clutter-free layout (leveraging Tailwind CSS) that emphasizes the offer and removes distractions like excessive navigation.
    • Trust Indicators: Reviews, endorsements, or badges to build credibility.

  6. Customize design with Tailwind CSS v4

    main

    AstroWind uses a CSS-first configuration for Tailwind CSS v4. To customize the visual design:

    1. Colors and Fonts: Edit CSS variables in src/components/CustomStyles.astro.
    2. Theme Tokens and Utilities: Modify src/assets/styles/tailwind.css to add @theme tokens, @utility classes, or plugins.

  7. Manage and delete your Personal Data

    main

    Users have rights regarding their collected information:

    • Self-Service Deletion: If you have an Account, you can update, amend, or delete your information via the account settings section.
    • Manual Request: You can contact the Company to request access to, correction of, or deletion of any personal information provided.

    Note: The Company may be required to retain certain information to comply with legal obligations or lawful bases.

  8. Identify Landing Page types and purposes

    main

    Landing pages are standalone web pages designed for a single objective: converting visitors into leads or sales. Depending on your marketing goal, you can implement different types:

    • Lead Generation: Captures user data (e.g., email, contact details) via forms, often in exchange for a value proposition like an eBook or free trial.
    • Long-form Sales: Uses extensive narrative, product details, and social proof to persuade visitors to make a direct purchase.
    • Click-through: Acts as an intermediary step, providing benefits and details to warm up a visitor before directing them to a final conversion point (like a checkout page).
    • Product Details: Focuses on transparency by presenting specific features, specifications, and technical details of a product.
    • Coming Soon / Pre-Launch: Generates buzz for upcoming products using countdown timers and teaser content to capture early interest.
    • Subscription: Focuses on securing long-term, recurring commitments, such as newsletter sign-ups or service subscriptions.

  9. Configure AstroWind via config.yaml

    main

    The ./src/config.yaml file is used to manage site metadata, SEO, i18n, blog settings, and analytics.

    Key configuration sections:

    • site: Name, URL, base path, and trailing slash settings.
    • metadata: Default SEO titles, descriptions, robots tags, Open Graph, and Twitter settings.
    • i18n: Language and text direction (e.g., ltr).
    • apps.blog: Enable/disable the blog, set posts per page, and configure permalink patterns using variables like %slug%, %year%, %month%, etc.
    • analytics: Configure Google Analytics via vendors.googleAnalytics.id.
    • ui.theme: Set the default theme (system, light, dark, light:only, or dark:only).
    site:
  name: 'Example'
  site: 'https://example.com'
  base: '/'
  trailingSlash: false

metadata:
  title:
    default: 'Example'
    template: '%s — Example'
  description: 'This is the default meta description'
  robots:
    index: true
    follow: true
  openGraph:
    site_name: 'Example'
    images:
      - url: '~/assets/images/default.png'
        width: 1200
        height: 628
    type: website
  twitter:
    handle: '@twitter_user'
    site: '@twitter_user'
    cardType: summary_large_image

i18n:
  language: en
  textDirection: ltr

apps:
  blog:
    isEnabled: true
    postsPerPage: 6
    post:
      isEnabled: true
      permalink: '/blog/%slug%'
      robots:
        index: true
    list:
      isEnabled: true
      pathname: 'blog'
      robots:
        index: true
    category:
      isEnabled: true
      pathname: 'category'
      robots:
        index: true
    tag:
      isEnabled: true
      pathname: 'tag'
      robots:
        index: false
    isRelatedPostsEnabled: true
    relatedPostsCount: 4

analytics:
  vendors:
    googleAnalytics:
      id: null

ui:
  theme: 'system'

  10. Run AstroWind using Docker Compose

    main

    You can run the AstroWind project in a containerized environment using Docker Compose. The service is configured to build from the current directory and exposes the application on port 8080.

    services:
  astrowind:
    build: .
    container_name: astrowind
    ports:
      - 8080:8080