repository-template
Astro Starter Kit: Minimal
npm create astro@latest -- --template minimal
🧑🚀 Seasoned astronaut? Delete this file. Have fun!
🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
/
├── public/
├── src/
│ └── pages/
│ └── index.astro
└── package.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.
🧞 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: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 |
👀 Want to learn more?
Feel free to check our documentation or jump into our Discord server.
Chocolatey choco-astro
NOTE: This project is used on Chocolatey websites and is being released for the benefit of the community. While we endeavour to help and fix issues, it will be limited to GitHub issues, discussions and pull requests when we are able to.
This repository holds all Astro specific dependencies needed to run Astro on a Chocolatey project.
Installation
To install and use these Astro dependencies in a project, run the following command:
yarn add choco-astro
If you have used to the Astro CLI to install dependencies on a project, you will need to remove those dependencies in replace of this package.
Upgrading choco-astro
Before upgrading Astro dependencies, review the changelog to ensure there is nothing that will need to change in the repositories that use it. If changes are required, issues should be created to track and implement them with the upgrade of the choco-astro package. To upgrade the dependencies in this package that are managed by Astro, run the following command:
yarn dlx @astrojs/upgrade
Overriding Automatically Generated Heading ID's
Astro automatically generates ID's for <h1>
- <h6>
. Unfortunately, it generates invalid ID's when the heading starts with a number. To address this issue, choco-astro uses the remark-custom-header-id plugin. See the example below on how to use this plugin to override an ID:
## 0.12.1 (May 23, 2024) \{#may-23-2024}
Understanding Astro Components
The Chocolatey Design System has all information relating to Astro Components and how to use them:
- Learn about Astro and how to use Components in
.mdx
and.astro
file types. - Learn how to use the
<Callout />
Component to display notes and important information. - Learn how to use the
<CollapseButton />
Component to display a button that triggers a collapsed element. - Learn how to use the
<Iframe />
Component to display videos with defined aspect ratios. - Learn how to use the
<Tabs />
Component to display content in tabbed interface. - Learn how to use the
<Xref />
Component to link to other documents within this repository.
Additional Resources
Resource | Purpose |
---|---|
astro.config.mjs | Gives a baseline example of how to import and use the recommended integrations. |
tsconfig.astro | Give compiler options needed for usage of TypeScript in an Astro project. |