AstroPaper

AstroPaper 📄

AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on my personal blog.

Read the blog posts or check the README Documentation Section for more info.

🔥 Features

• type-safe markdown
• super fast performance
• accessible (Keyboard/VoiceOver)
• responsive (mobile ~ desktops)
• SEO-friendly
• light & dark mode
• static search (Pagefind)
• draft posts & pagination
• sitemap & rss feed
• MDX support
• collapsible table of contents
• followed best practices
• highly customizable
• dynamic OG image generation for blog posts (Blog Post)
• i18n ready

Note: I've tested screen-reader accessibility of AstroPaper using VoiceOver on Mac and TalkBack on Android. I couldn't test all other screen-readers out there. However, accessibility enhancements in AstroPaper should be working fine on others as well.

✅ Lighthouse Score

🚀 Project Structure

Inside of AstroPaper, you'll see the following folders and files:

1
/
2
├── public/
3
│   ├── pagefind/          # auto-generated on build
4
│   ├── favicon.svg
5
│   └── default-og.jpg
6
├── src/
7
│   ├── assets/
8
│   │   ├── icons/
9
│   │   └── images/
10
│   ├── components/
11
│   ├── content/
12
│   │   ├── pages/
13
│   │   │   └── about.md
14
│   │   └── posts/
15
│   │       └── some-blog-posts.md
16
│   ├── i18n/
17
│   ├── layouts/
18
│   ├── pages/
19
│   ├── scripts/
20
│   ├── styles/
21
│   ├── types/
22
│   ├── utils/
23
│   ├── config.ts
24
│   └── content.config.ts
25
├── astro-paper.config.ts  # user-defined configurations
26
└── astro.config.ts

All blog posts are stored in the src/content/posts/ directory. You can organise posts into subdirectories — the subdirectory name becomes part of the post URL.

📖 Documentation

Documentation can be read in two formats_ markdown & blog post.

• Configuration - markdown | blog post
• Add Posts - markdown | blog post
• Customize Color Schemes - markdown | blog post
• Predefined Color Schemes - markdown | blog post

💻 Tech Stack

Main Framework - Astro
Type Checking - TypeScript
Styling - TailwindCSS
UI/UX - Figma Design File
Static Search - Pagefind
Icons - Tablers
Code Formatting - Prettier
Deployment - Cloudflare Pages
Linting - ESLint
Dynamic OG images - Satori + Sharp + Astro Fonts

👨🏻‍💻 Running Locally

You can start using this project locally by running the following command in your desired directory:

1
# pnpm
2
pnpm create astro@latest --template satnaing/astro-paper
3

4
# npm
5
npm create astro@latest -- --template satnaing/astro-paper
6

7
# yarn
8
yarn create astro --template satnaing/astro-paper
9

10
# bun
11
bun create astro@latest -- --template satnaing/astro-paper

Then start the project by running the following commands:

1
# install dependencies if you haven't done so in the previous step.
2
pnpm install
3

4
# start running the project
5
pnpm dev

Google Site Verification (optional)

You can add your Google Site Verification HTML tag by setting site.googleVerification in astro-paper.config.ts:

1
export default defineAstroPaperConfig({
2
  site: {
3
    // ...
4
    googleVerification: "your-google-site-verification-value",
5
  },
6
  // ...
7
});

See this discussion for adding AstroPaper to the Google Search Console.

🧞 Commands

All commands are run from the root of the project, from a terminal:

✨ Feedback & Suggestions

If you have any suggestions/feedback, you can contact me via my email. Alternatively, feel free to open an issue if you find bugs or want to request new features.

📜 License

Licensed under the MIT License, Copyright © 2026

Made with 🤍 by Sat Naing 👨🏻‍💻 and contributors.