Build with astro and the astropaper theme. Domains hosted on godaddy Deployed to netlify Analytics with posthog
/
├── public/
│ ├── assets/
│ │ └── logo.svg
│ │ └── logo.png
│ └── favicon.svg
│ └── astropaper-og.jpg
│ └── robots.txt
│ └── toggle-theme.js
├── src/
│ ├── assets/
│ │ └── socialIcons.ts
│ ├── components/
│ ├── content/
│ │ | blog/
│ │ | └── some-blog-posts.md
│ │ └── config.ts
│ ├── layouts/
│ └── pages/
│ └── styles/
│ └── utils/
│ └── config.ts
│ └── types.ts
└── package.jsonAstro 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/content/blog directory.
Documentation can be read in two formats_ markdown & blog post.
- Configuration - blog post
- Add Posts - blog post
- Customize Color Schemes - blog post
- Predefined Color Schemes - blog post
Main Framework - Astro
Type Checking - TypeScript
Component Framework - ReactJS
Styling - TailwindCSS
UI/UX - Figma Design File
Fuzzy Search - FuseJS
Icons - Boxicons | Tablers
Code Formatting - Prettier
Illustration in About Page - https://freesvgillustration.com
Linting - ESLint
You can start using this project locally by running the following command in your desired directory:
# npm 6.x
npm create astro@latest --template satnaing/astro-paper
# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper
# yarn
yarn create astro --template satnaing/astro-paper
# pnpm
pnpm dlx create-astro --template satnaing/astro-paperWarning! If you're using
yarn 1, you might need to installsharpas a dependency.
Then start the project by running the following commands:
# install dependencies
npm run install
# start running the project
npm run devAs an alternative approach, if you have Docker installed, you can use Docker to run this project locally. Here's how:
# Build the Docker image
docker build -t astropaper .
# Run the Docker container
docker run -p 4321:80 astropaperYou 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:
Note! For
Dockercommands we must have it installed in your machine.
| 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 |
docker compose up -d |
Run AstroPaper on docker, You can access with the same hostname and port informed on dev command. |
docker compose run app npm install |
You can run any command above into the docker container. |
docker build -t astropaper . |
Build Docker image for AstroPaper. |
docker run -p 4321:80 astropaper |
Run AstroPaper on Docker. The website will be accessible at http://localhost:4321. |
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.
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.
Licensed under the MIT License, Copyright © 2025