Skip to content

Latest commit

 

History

History
82 lines (60 loc) · 3.73 KB

README.md

File metadata and controls

82 lines (60 loc) · 3.73 KB
Raw

Astro Starter Kit

Open in StackBlitz Open in CodeSandbox Open in Codespaces

Features

  • ✅ Tailwind CSS
  • ✅ Alpine js
  • ✅ Typescript
  • ✅ Localization (with astro-i18n-aut)
  • ✅ Dark/light mode
  • ✅ Blog
  • ✅ Discussions (thanks to giscus)
  • ✅ CMS for editing blog post (thanks to Sveltia CMS)
  • ✅ Sitemap (localized)
  • ✅ RSS (localized)
  • ✅ PWA

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
pnpm install Installs dependencies
pnpm dev Starts local dev server at localhost:4321
pnpm build Build your production site to ./dist/
pnpm preview Preview your build locally, before deploying
pnpm astro ... Run CLI commands like astro add, astro check
pnpm astro -- --help Get help using the Astro CLI

If you want to switch to npm make sure to remove pnpm-lock.yaml and node_modules folder and then run npm install

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

├── public/
├── src/
│   ├── components/
│   ├── content/
│   ├── layouts/
│   ├── locales/
│   ├── middleware/
│   ├── pages/
│   ├── styles/
│   ├── utils/
│   └── consts.ts/
├── astro.config.mjs
├── README.md
├── package.json
├── .prettierrc
├── tailwind.config.cjs
└── 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.

The src/content/ directory contains "collections" of related Markdown and MDX documents. Use getCollection() to retrieve posts from src/content/blog/, and type-check your frontmatter using an optional schema. See Astro's Content Collections docs to learn more.

Any static assets, like images, can be placed in the public/ directory.

✍️ Admin dashboard

You can access the admin dashboard for editing blog post at /admin (https://example.com/admin)

Sveltia cms uses the same configuration as Decap cms, so you can follow the documentation at https://decapcms.org/docs.

In order to access the admin dashboard to change blog articles content you need to have access to the github repo, a quick way to test it test would be fork the repo and than configure sveltia cms accordingly to your cloud provider (netlify, cloudflare, vercel, etc...).

If you use cloudflare pages you can follow this guide https://github.com/i40west/netlify-cms-cloudflare-pages.

If you use netlify it's actually easier, you will need to change in the file astro.config.mjs NetlifyCMS config config.backend.name to git-gateway. (See https://decapcms.org/docs/git-gateway-backend/#git-gateway-with-netlify for more info)

👀 Want to learn more?

Check out Astro documentation or jump into Astro Discord server.