This is the Astro starter I use when I do not want to start from an empty folder.
It includes the basic things I need on almost every website: a layout, a header, a footer, useful CSS files, metadata in the <head>, a few example pages and sitemap generation.
The goal: Start with a clean base and then adjust it for the project.
- Astro v6
- A
BaseLayout.astrowith the common page setup - CSS reset, variables, global styles and utility classes
- Responsive header navigation
- Footer with navigation and social links
- Home, about and 404 pages
- Sitemap setup with
@astrojs/sitemap
Install the dependencies:
npm installStart the dev server:
npm run devOr just copy the relevant files that you need, e.g. the /styles folder.
npm run devstarts the local development server.npm run buildbuilds the website intodist/.npm run previewpreviews the production build.npm run astroruns Astro CLI commands.
Before publishing a website with this starter, go through these files:
- Rename the project in
package.jsonandpackage-lock.json. - Set the website URL in
astro.config.mjs. - Update the page titles and descriptions in
src/pages/. - Update the metadata in
src/layouts/BaseLayout.astro. - Replace the favicon in
public/favicon.svg. - Replace the logo image used in
src/components/Header.astro. - Change the header and footer links.
- Add real social links in
src/components/Footer.astro. - Adjust the design variables in
src/styles/var.css.
The CSS is split up so it stays easy to change:
reset.cssfor browser defaults.var.csscontains colors, typography, spacing and layout variables.global.csscontains the basic styles for the whole site.util.csscontains utility classes.
Find out why things are the way they are in my Clean Web Development Guide.
Built by Bryan Hogan.