Welcome to the Astro x Bootstrap Starter Kit

🧑‍💻 About this Project

This was built to quickly write code that mirror's WordPress-style architecture and that uses Bootstrap 5.

Astro scopes CSS to the file you're in by default, so any global changes that need to be made should be made inside of the src/scss directory.

This is a Github Repo Template. It's made to be cut up and changed! It also comes with a default Github Pages deploy.yml file so you can quickly and easily share a preview URL. Configure the astro.config.mjs file with the proper base property value (it should be the name of the repo you're building in) to make things work. You'll need to restart your npm run start terminal command to update the URL in your browser. Learn more about deploying to a Github page here.

✨ Astro's Key Features

  • Section composition is super easy with .astro files!
    • A .astro file can be used to join together files found in the src/components directory. This directory can include a mix of whatever file type you want. From .html to .tsx, Astro will take care of it!
  • Creating a new page is easy: just create a new file in the src/pages directory.
  • The Astro equivalent to WordPress's "Page Templates" is the src/layouts directory. The only difference is that instead of using `get_template_part()` to call in other elements, you can either import them at the top of the file (between the `---` braces) or you can use the `<slot/>` method which allows you to pass whatever you want inside of it (similar to the WordPress function `the_content()` except you're writing code instead of using a WYSIWYG editor).

🚀 Project Structure

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

├── public/
├── src/
│   ├── components/
│   ├── content/
│   ├── layouts/
│   └── pages/
├── astro.config.mjs
├── README.md
├── package.json
└── 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.

👀 Want to learn more?

Check out Astro's documentation or jump into their Discord server.