Loading repository data…
Loading repository data…
BryanHogan / repository
A modern, clean and bloat-free Astro starter template. Accessible, SEO optimised and fast.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Hi there!
This is my starter template for Astro.
I use it when I want to build a new website, but do not want to start with an empty folder again. It includes the things I need almost every time I build a site.
Things like:
<head> metadataThe idea is to keep the starting point simple. Mostly HTML and CSS, with a small amount of JavaScript where it makes sense.
Install the dependencies:
npm install
Start the development server:
npm run dev
Astro will show you the local URL in the terminal. Usually it is:
http://localhost:4321
This project expects Node.js 22.12.0 or newer.
npm run dev starts the local development server.npm run build builds the website into dist/.npm run preview previews the build locally.npm run astro lets you run Astro commands.If you use this for a real project, change these things first:
package.json and package-lock.json.astro.config.mjs.src/pages/.src/layouts/BaseLayout.astro.public/favicon.svg.src/components/Header.astro.src/components/Footer.astro.src/styles/var.css.Do not forget the metadata. The template still includes example values for the Open Graph image, author, copyright and site name.
Astro uses file based routing, so add new pages in src/pages/.
A simple page can look like this:
---
import BaseLayout from "../layouts/BaseLayout.astro";
---
<BaseLayout title="Page title" description="Page description">
<main class="base-layout">
<section class="flow">
<h1>Page heading</h1>
<p>Page content.</p>
</section>
</main>
</BaseLayout>
The base-layout class keeps content aligned with the normal page width. Use full-width on a direct child if something should go across the full page.
The CSS is split into a few files:
reset.css removes default browser styling I do not want.var.css contains colors, spacing, typography and layout variables.global.css contains the basic styles for the whole website.util.css contains small utility classes I use often.You can use the whole project, or just take the parts you need. For example only the styles folder, the base layout, the header or the footer.
--color-neutral-100 and --color-neutral-900 are adjusted.This project adds the MDX integration for Astro, allowing you to write .mdx files in addition to the .md Markdown files.
.mdx. files are very powerful and convenient as they are like Markdown files but also allow you to use JavaScript in them such as using Astro components in them.
If you want to remove it do the following:
npm uninstall @astrojs/mdx.mdx() line in astro.config.mjs..mdx. Or change them to .md.Find out why things are the way they are in my web development guide.
You probably also want to take a look at the Astro documentation.
This Astro Starter Template has been built by Bryan Hogan.
Things that will be added to this project: