Astro starter based on @cieloazul310/astro-sarkara package.
@cieloazul310/astro-sarkara
https://github.com/cieloazul310/astro-sarkara
Astro
https://astro.build/
Panda CSS
https://panda-css.com/
GitHub Pages
https://cieloazul310.github.io/astro-sarkara-starter
Netlify
https://astro-sarkara-starter.netlify.app
npm create astro@latest -- --template cieloazul310/astro-sarkara-starter
Getting Started
https://docs.astro.build/en/getting-started/
Inside of your Astro project, you'll see the following folders and files:
/
├── public/
├── src/
│ ├── components/
│ ├── content
│ │ ├── posts/ <= Markdown / MDX contents
│ │ └── config.ts
│ ├── data/
│ │ └── index.ts
│ ├── layout/
│ │ └── markdown.astro
│ ├── pages/
│ │ ├── posts/
│ │ │ ├── [...page].astro <= for post list pages
│ │ │ └── [...slug].astro <= for each `.md/.mdx` page
│ │ └── index.mdx
│ ├── utils/
│ ├── index.css
│ └── mdx-classes.ts
└── 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.
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 |
import {
defineSarkaraConfig,
} from "@cieloazul310/astro-sarkara/preset";
// https://panda-css.com/docs/references/config
export default defineSarkaraConfig({
// primary and secondary colors is required
// https://panda-css.com/docs/customization/theme#colors
palette: { primary: "indigo", secondary: "amber" },
// Where to look for your css declarations
include: [
"./src/**/*.{js,ts,astro,mdx}",
"./node_modules/@cieloazul310/**/*.{js,ts,astro}",
],
// customizing theme
theme: {
extend: {
},
},
});
- Settings > Code and automation > Actions > General
Workflow permissions: Read and write permissions - Settings > Code and automation > Pages
Build and deployment Source: GitHub Actions
- Site configuration > Build & Deploy > Continuous deployment
Build settings Build command:
npm run build -- --site $URL