npm create astro@latest -- --template hvxley/cloudstrap
This free Astro starter template brings Bootstrap, Astro-Icons, and Sass to your project.
Check back again soon!
Features:
- Astro v4.9
- Bootstrap v5.3
- Color mode featuring Light, Dark, and Auto.
- Icon Pack from astro-icons, iconify, and remix
- Mobile-first design
- SEO Optimization
- Netlify-ready Contact Form with Recaptcha
- Sitemap
Inside Cloudstrap template, you'll see the following folders and files:
/
โโโ public/
โ โโโ favicons/
โ โ โโโ favicon.svg
โ โโโ bootstrap-logo-white.svg
โ โโโ lighthouse.png
โ โโโ humans.txt
โ โโโ robots.txt
โโโ src/
โ โโโ components/
โ โ โโโ ColorModeButton.astro
โ โ โโโ ColorModeGraphics.astro
โ โ โโโ FormattedDate.astro
โ โ โโโ Footer.astro
โ โ โโโ Meta.astro
โ โ โโโ Navbar.astro
โ โโโ content/
โ โ โโโ blog/
| โ โ โโโ bootstrap-cheatsheet.md
| โ โ โโโ bootstrap-grid.md
โ โ โโโ config.ts
โ โโโ layouts/
โ โ โโโ BlogPost.astro
โ โ โโโ Layout.astro
โ โโโ pages/
โ โ โโโblog/
| โ โ โโโ [...slug].astro
| โ โ โโโ index.astro
โ โ โโโ about.astro
โ โ โโโ index.astro
โ โ โโโ thankyou.astro
โ โโโ scripts/
โ โ โโโ bs-initial.js
โ โ โโโ color-modes.js
โ โโโ styles/
โ โ โโโ stylesheet.scss
โ โโโ env.d.ts
โโโ .gitignore
โโโ astro.config.mjs
โโโ package.json
โโโ README.md
โโโ tsconfig.json
โโโ ...
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 if they do not require any transformation or in the assets/
directory if they are imported directly.
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:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add , astro check |
npm run astro -- --help |
Get help using the Astro CLI |
To generate a new Sitemap, update your domain URL in astro.config.mjs
and run npm run build
.