AstroPaper-S is a fork of AstroPaper, based on Astro.
This fork extends AstroPaper with additional features:
- Auto-generate post description based on word count or up to the
<!-- more -->tag. - Sidebar with auto-expanding & collapsing table of contents (powered by Tocbot), and a back-to-top button.
- Basic Hexo compatibility, including Markdown frontmatter and support for Categories.
- Expressive Code for syntax highlighting, same as Astro's Starlight theme.
- Image optimizations:
loading="lazy"anddecoding="async"(via rehype-rewrite). - Auto-generate
<figcaption>using image alt text (rehype-figure). - External links open in new tab with
target="_blank"andrel="noopener noreferrer"(rehype-external-links). - Adds
widthandheightattributes to<img>with caching support, improve CLS(rehype-img-size-cache). - Responsive table (rehype-wrap-all)
- Static i18n (internationalization) support with customizable locale and date formats.
- Sitemap generation adjusted to prioritize post pages.
- Lazy loading Disqus comment component added.
- Add KaTeX support (remark-math).
- Heading anchors generated at build time (rehype-autolink-headings).
- Minify HTML, CSS, and SVG (astro-minify).
- Enable Gzip and Brotli compression (astro-compressor).
- URLs without trailing slashes.
- Adjust visual weight for bold text for better readability.
- Style and layout adjustments, with some components (e.g., breadcrumb, scroll progress bar) disabled.
Most of the other features, such as light/dark mode, fuzzy search, sitemap generation, and more, remain largely unchanged.
# install dependencies
pnpm install
# start running the project
pnpm run dev
# to build static site
pnpm run buildRefer to the guide.
Also see the original AstroPaper documentation.
Inside of AstroPaper, you'll see the following folders and files:
/
├── public/
│ ├── assets/
│ ├── pagefind/ # auto-generated when build
│ ├── favicon.svg
│ ├── astropaper-og.jpg
│ ├── favicon.svg
│ └── toggle-theme.js
├── src/
│ ├── assets/
│ │ ├── icons/
│ │ └── images/
│ ├── components/
│ ├── data/
│ │ └── blog/ # Markdown posts
│ │ └── some-blog-posts.md
│ ├── layouts/
│ ├── pages/
│ ├── styles/
│ ├── utils/
│ ├── config.ts
│ ├── constants.ts
│ └── content.config.ts
└── astro.config.ts
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.
You 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.