npm create astro@latest -- --template hvxley/cloudstrapThis 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent