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:
- https://github.com/michael-andreuzza/astro-build-minimal-blog-starter # Preview:
- https://unwrapped-minimal-blog-template.netlify.app/ # Unwrapped minimal Blog template. Features:
- β SEO-friendly setup with canonical URLs and OpenGraph data
- β Full Markdown support ## π Project Structure 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.
π§ 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)