Screenshot of Astro Paper

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.

Astro Paper

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

Theme Information:

Stars : github star1935
Forks : github fork386
Updated : 19 Feb, 2024
Published : 08 Sep, 2022
Types :
Astro IconTailwind IconMarkdown IconBlog Icon
Sat Naing
Created bySat Naing

Similar Themes To Consider

Screenshot of Astrofy
by manuelernestog
Screenshot of AstroVerse
by isooosi