Astro-PaperMod is a personal customized theme,based on AstroPaper, a minimal, responsive, accessible and SEO-friendly Astro blog theme.
- Easy to add new blog posts using
npm run newcommand, like whathexoblog does. - When creating a new post,
modDatetimeis initialized withpubDatetime, when modified, usepre-commit(a native hook of git) to updatemodDatetime. - better Table of Contents (TOC).
- type-safe markdown
- super fast performance
- accessible (Keyboard/VoiceOver)
- responsive (mobile ~ desktops)
- SEO-friendly
- light & dark mode
- fuzzy search
- draft posts & pagination
- sitemap & rss feed
- followed best practices
- highly customizable
- dynamic OG image generation for blog posts #15 (Blog Post)
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.
Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.
Any static assets, like images, can be placed in the public/ directory.
All blog posts are stored in src/data/blog directory.
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
You can start using this project locally by running the following command in your desired directory:
npm create astro@latest -- --template satnaing/astro-paperThen start the project by running the following commands:
# install dependencies if you haven't done so in the previous step.
npm install
# start running the project
npm run devYou can easily add your Google Site Verification HTML tag in AstroPaper using an environment variable. This step is optional. If you don't add the following environment variable, the google-site-verification tag won't appear in the HTML <head> section.
# in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-valueSee this discussion for adding AstroPaper to the Google Search Console.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run format:check |
Check code format with Prettier |
npm run format |
Format codes with Prettier |
npm run sync |
Generates TypeScript types for all Astro modules. Learn more. |
npm run lint |
Lint with ESLint |
npm run hooks:install |
Configure Git to use versioned hooks from .githooks/.After this, each git commit updates modDatetime for modified posts in src/data/blog (newly added posts are ignored). |
Warning! Windows PowerShell users may need to install the concurrently package if they want to run diagnostics during development (
astro check --watch & astro dev). For more info, see this issue.
Licensed under the MIT License, Copyright © 2026