AstroPaper

AstroPaper - Vercel

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

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:

/
├── 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 [blocked] | blog post
Add Posts - markdown [blocked] | blog post
Customize Color Schemes - markdown [blocked] | blog post
Predefined Color Schemes - markdown [blocked] | 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:

# 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:

# 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 by setting site.googleVerification in astro-paper.config.ts:

export default defineAstroPaperConfig({
  site: {
    // ...
    googleVerification: "your-google-site-verification-value",
  },
  // ...
});

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:

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.
`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. Alternatively, feel free to open an issue if you find bugs or want to request new features.

📜 License

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