--- title: "AstroPaper" description: "A minimal, responsive and SEO-friendly Astro blog theme." url: "https://vercel.com/templates/astro/astro-paper" links: repository: "https://github.com/satnaing/astro-paper" demo: "https://astro-paper.pages.dev/" deploy: "https://vercel.com/new/clone?demo-title=AstroPaper&demo-description=A+minimal%2C+responsive+and+SEO-friendly+Astro+blog+theme.&demo-url=https%3A%2F%2Fastro-paper.pages.dev%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F5HjzyjTR86zHUltXBrlpdZ%2F2bb39d21b535f3fa7b071beb43ac1fb2%2Fastro-paper-hero_-_Tony_Sullivan.png&project-name=AstroPaper&repository-name=astro-paper&repository-url=https%3A%2F%2Fgithub.com%2Fsatnaing%2Fastro-paper&from=templates&skippable-integrations=1" --- # AstroPaper A minimal, responsive and SEO-friendly Astro blog theme. # AstroPaper 📄 ![AstroPaper](https://github.com/satnaing/astro-paper/blob/main/public/default-og.jpg?raw=true) [![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white)](https://www.figma.com/community/file/1356898632249991861) ![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white) ![GitHub](https://img.shields.io/github/license/satnaing/astro-paper?color=%232F3741&style=for-the-badge) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white&style=for-the-badge)](https://conventionalcommits.org) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=for-the-badge)](http://commitizen.github.io/cz-cli/) AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on [my personal blog](https://satnaing.dev/blog). Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info. ## 🔥 Features - [x] type-safe markdown - [x] super fast performance - [x] accessible (Keyboard/VoiceOver) - [x] responsive (mobile ~ desktops) - [x] SEO-friendly - [x] light & dark mode - [x] static search ([Pagefind](https://pagefind.app/)) - [x] draft posts & pagination - [x] sitemap & rss feed - [x] MDX support - [x] collapsible table of contents - [x] followed best practices - [x] highly customizable - [x] dynamic OG image generation for blog posts ([Blog Post](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/)) - [x] 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

AstroPaper Lighthouse Score

## 🚀 Project Structure Inside of AstroPaper, you'll see the following folders and files: ```bash / ├── public/ │ ├── pagefind/ # auto-generated on build │ ├── favicon.svg │ └── default-og.jpg ├── src/ │ ├── assets/ │ │ ├── icons/ │ │ └── images/ │ ├── components/ │ ├── content/ │ │ ├── pages/ │ │ │ └── about.md │ │ └── posts/ │ │ └── some-blog-posts.md │ ├── i18n/ │ ├── layouts/ │ ├── pages/ │ ├── scripts/ │ ├── styles/ │ ├── types/ │ ├── utils/ │ ├── config.ts │ └── content.config.ts ├── astro-paper.config.ts # user-defined configurations └── 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](https://github.com/satnaing/astro-paper/tree/main/src/content/posts/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/) - Add Posts - [markdown](https://github.com/satnaing/astro-paper/tree/main/src/content/posts/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/) - Customize Color Schemes - [markdown](https://github.com/satnaing/astro-paper/tree/main/src/content/posts/customizing-astropaper-theme-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/) - Predefined Color Schemes - [markdown](https://github.com/satnaing/astro-paper/tree/main/src/content/posts/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/) ## 💻 Tech Stack **Main Framework** - [Astro](https://astro.build/) **Type Checking** - [TypeScript](https://www.typescriptlang.org/) **Styling** - [TailwindCSS](https://tailwindcss.com/) **UI/UX** - [Figma Design File](https://www.figma.com/community/file/1356898632249991861) **Static Search** - [Pagefind](https://pagefind.app/) **Icons** - [Tablers](https://tabler-icons.io/) **Code Formatting** - [Prettier](https://prettier.io/) **Deployment** - [Cloudflare Pages](https://pages.cloudflare.com/) **Linting** - [ESLint](https://eslint.org) **Dynamic OG images** - [Satori](https://github.com/vercel/satori) + [Sharp](https://sharp.pixelplumbing.com/) + [Astro Fonts](https://docs.astro.build/en/guides/fonts/) ## 👨🏻‍💻 Running Locally You can start using this project locally by running the following command in your desired directory: ```bash # pnpm pnpm create astro@latest --template satnaing/astro-paper # npm npm create astro@latest -- --template satnaing/astro-paper # yarn yarn create astro --template satnaing/astro-paper # bun bun create astro@latest -- --template satnaing/astro-paper ``` Then start the project by running the following commands: ```bash # install dependencies if you haven't done so in the previous step. pnpm install # start running the project pnpm dev ``` ## Google Site Verification (optional) You can add your [Google Site Verification HTML tag](https://support.google.com/webmasters/answer/9008080#meta_tag_verification&zippy=%2Chtml-tag) by setting `site.googleVerification` in `astro-paper.config.ts`: ```ts file="astro-paper.config.ts" export default defineAstroPaperConfig({ site: { // ... googleVerification: "your-google-site-verification-value", }, // ... }); ``` > See [this discussion](https://github.com/satnaing/astro-paper/discussions/334#discussioncomment-10139247) for adding AstroPaper to the Google Search Console. ## 🧞 Commands All commands are run from the root of the project, from a terminal: | Command | Action | | :--------------- | :------------------------------------------------------------------------------------------------------------------------------- | | `pnpm install` | Installs dependencies | | `pnpm dev` | Starts local dev server at `localhost:4321` | | `pnpm build` | Type-checks, builds the site, runs Pagefind indexing, and copies the index to `public/pagefind/` | | `pnpm preview` | Preview your build locally, before deploying | | `pnpm sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). | | `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` | ## ✨ Feedback & Suggestions If you have any suggestions/feedback, you can contact me via [my email](mailto:satnaingdev+astropaper@gmail.com). 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](https://satnaing.dev) 👨🏻‍💻 and [contributors](https://github.com/satnaing/astro-paper/graphs/contributors). ## Related Templates ### [Odyssey](https://vercel.com/templates/astro/odyssey) A modern, full-featured theme for a business or startup marketing site. ### [Astroship](https://vercel.com/templates/astro/astroship) Starter template for startups, marketing websites & blogs built with Astro and TailwindCSS. ### [Astro Blog](https://vercel.com/templates/astro/astro-blog) An ultra-minimal personal site & blog built with Astro. --- ## Additional documentation The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.