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)