This is the personal blog of Constantinos, built using the AstroPaper theme — a minimal, responsive, accessible and SEO-friendly Astro blog template.
- 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
Inside this project, 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/
│ │ └── some-blog-posts.md
│ ├── layouts/
│ └── pages/
│ └── styles/
│ └── utils/
│ └── config.ts
│ └── constants.ts
│ └── content.config.ts
└── astro.config.tsAstro 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.
Main Framework - Astro
Type Checking - TypeScript
Styling - TailwindCSS
Static Search - FuseJS
Icons - Tablers
Code Formatting - Prettier
Linting - ESLint
Clone the repository and run the following commands:
# install dependencies
pnpm install
# start running the project
pnpm 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 constantinos-blog .
# Run the Docker container
docker run -p 4321:80 constantinos-blogYou can easily add your Google Site Verification HTML tag 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-valueAll 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 |
|---|---|
pnpm install |
Installs dependencies |
pnpm run dev |
Starts local dev server at localhost:4321 |
pnpm run build |
Build your production site to ./dist/ |
pnpm run preview |
Preview your build locally, before deploying |
pnpm run format:check |
Check code format with Prettier |
pnpm run format |
Format codes with Prettier |
pnpm run sync |
Generates TypeScript types for all Astro modules. Learn more. |
pnpm run lint |
Lint with ESLint |
docker compose up -d |
Run the blog 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 constantinos-blog . |
Build Docker image for the blog. |
docker run -p 4321:80 constantinos-blog |
Run the blog 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.
Licensed under the MIT License, Copyright © 2025
Built by Constantinos using AstroPaper by Sat Naing 👨🏻💻