Fast, accessible and SEO optimized
The simplest way to build your high-quality website.
A free Astro starter template with everything you need to create a great website. Semantically correct, accessible, well designed, scalable, performant and without bloat.
What is this? A simple way to make your website
Everything you see on this website is built using this starter template using all default settings.
This Starter Template provides the complete base for creating a good website which you fully control. You write in Markdown, the resulting pages are performant, accessible and designed following actually modern design principles. The whole project is free and without any unnecessary dependencies.
The setup is simple. Create your site with npm, review your details in src/config.ts, write your content, and host the generated static site.
You can use the whole generated project, or take only specific things you need for your own web projects.
Why is it cool? Things this starter provides
The template handles the foundation, while keeping you in control of the content, code, and design.
You are in control
The code, content, and finished website belong to you. Change anything, host it anywhere, move it whenever you want.
Write in Markdown
Markdown is easy to write, works in many different apps, and is simple to move elsewhere. It is also a format AI tools understand and work with well.
See the markdown style guide on how to write markdown.
Fast and performant
The static pages use very little JavaScript by default. Images and other content are compressed and optimized. No unnecessary libraries or other content is used, so it won’t slow the site down. All so your website stays quick.
Accessible
The project follows modern web development practices and adheres to the Web Content Accessibility Guidelines (WCAG).
So everything including structure, navigation, focus states, and components are built with accessibility in mind.
Free to use
The project is free, and you can publish a static website using a free hosting plan from several providers.
Clean scalable plain CSS styling
A simple CSS system providing you consistent colors, spacing, typography, layouts, and utilities without adding framework bloat. Making it easy to define one design system. Scalable into anything you need.
Customize the look through one simple token-based var.css file.
Components included
Headers, footers, heroes, buttons, cards, icons, callouts, link groups, section titles with eyebrows and more are ready to use and easy to adjust. See the component showcase for more information.
SEO optimized
SEO optimized, including on-page and technical SEO. Correct semantic usage of elements, optimized components, canonical URLs, social metadata, structured data, and a sitemap to make your website show up on search engines and in AI chats.
Plus a RSS feed also makes it easy for readers to follow new posts.
Get started How to use this starter
-
Create the project. Run the guided npm setup and answer a few questions about your website.
-
Review your details. Check
src/config.ts, then add social links and optional analytics when you are ready. -
Write and publish. Create your pages in Markdown, adjust the design tokens, and host the generated static site wherever you want.
npm create @bryanhogan/web-starter@latestA flexible website template Use it for any web project
Build a blog, personal website, landing page, company website, or something completely different. Start small and add more only when you need it.
Does it perform? High-quality and tested
This landing page uses the starter template with default settings. So how well does it do when tested?
This site scored 100 out of 100 in all four Google Lighthouse Test categories.
0ms total blocking time, 0 cumulative layout shift, 0.5s speed index, 0.5s for first contentful paint and 0.5s for large contentful paint. The size of this landing page is only 103KB. Giving you exceptional performance.
Test results from WebPageTest
Also reaches full score 100/100 and A grade in the WebPageTest on all criteria: First Byte Time, Keep-alive Enabled, Compress Transfer, Compress Images, Cache Static content and Effective use of CDN.
Passes WCAG (Web Content Accessibility Guidelines) 2.2 level A and AA.
Ready to begin? Create the website you want
Use the starter for your next website. GitHub stars are also appreciated. If it saves you time and you want to help me keep improving it, you can also support the project financially.
Use the project
Run the guided setup, make the generated website yours, and publish something you love.
Support the project
Help support the time spent maintaining the template and making it better.
This Astro Starter Template is built by Bryan Hogan, a developer and designer, the creator of the Clean Web Development Guide.