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:
.
Unwrapped minimal blog template with Astro
Repo:
Preview:
Unwrapped minimal Blog template.
Features:
Inside of your Astro project, you'll see the following folders and files:
βββ 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
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.
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 |
Feel free to check Astro's documentation or jump into their Discord server.