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

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.

Top comments (0)

Head to your account's Settings to...

🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content