DEV Community

Cover image for I have built a minimal blog template with Astro. Feel free to clone it, star it ... it is 100% free
Michael Andreuzza
Michael Andreuzza

Posted on

1

I have built a minimal blog template with Astro. Feel free to clone it, star it ... it is 100% free

Hello everyone, I am learning how to use Astro and at the same time I am building some free templates so everyone can enjoy them.

If you have any questions, feel free to reach me on twitter at:

@Mike_Andreuzza

Thumbnail.
Unwrapped minimal blog template with Astro

Repo:

β”œβ”€β”€ README.md
β”œβ”€β”€ astro.config.mjs
β”œβ”€β”€ package.json
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ favicon.ico
β”‚   β”œβ”€β”€ social.jpg
β”‚   └── social.png
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ components
β”‚   β”‚   β”œβ”€β”€ Author.astro
β”‚   β”‚   β”œβ”€β”€ BlogHead.astro
β”‚   β”‚   β”œβ”€β”€ BlogPost.astro
β”‚   β”‚   β”œβ”€β”€ BlogPostPreview.astro
β”‚   β”‚   β”œβ”€β”€ Heading.astro
β”‚   β”‚   └── Paragraph.astro
β”‚   β”œβ”€β”€ layouts
β”‚   β”‚   └── BlogPost.astro
β”‚   β”œβ”€β”€ pages
β”‚   β”‚   β”œβ”€β”€ index.astro
β”‚  
└── tsconfig.json  
└── tailwind.config
Enter fullscreen mode Exit fullscreen mode

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.
There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

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:3000 |
| npm run build | Build your production site to ./dist/ |
| npm run preview | Preview your build locally, before deploying |

πŸ‘€ Want to learn more?

Feel free to check Astro's documentation or jump into their Discord server.

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay