Astronaut logo Astronaut logo

Astronaut

This is a very opinionated starter template for the static site generator Astro (external link) . I'm a big fan of Astro, as it combines two things I really like: A component-based approach and zero client-side JavaScript!

Use template

(Or check it out on Codeberg (external link) first)

This is how I like to set up my projects, but sharing is caring, so: Please use it for your own projects and customise it. Here are all the features:

Table of contents

Absolute Imports

Tired of your imports looking like this?

        
          import Layout from "../../../../../layouts/Layout.astro";

Me too, which is why I'm using absolute imports to make it look nice and clean: 

        
          import Layout from "@layouts/Layout.astro";

CSS Reset

I never start a project without Andy Bell's (more) modern CSS reset (external link) ! It lays the foundation for what I'm about to do with Utopia's fluid responsive design.

Custom Fonts

Using system fonts is a safe and performant way to add some identity to your typography, but let's be honest: They're overused and quite boring. Which is why I like to use custom fonts, usually one for headlines and one for body text. You can of course always change them to Lobster or Papyrus, I won't judge.

Fluid Responsive Design

I need you to sit down for this one. You don't really need breakpoints to define your layout for mobile, tablet and desktop devices. How could you even anticipate what device will be used to gaze upon your beautiful website?

Wouldn't make it more sense if you had a fluid, yet robust design which works for all viewports? Which requires less code and no breakpoints.css nearing 1000 lines of code? Let me introduce you to Utopia (external link) , which is used to generate adaptive font sizes and spacing.

You should also check out viewports.fyi (external link) for a deep-dive into this topic. And while you're at it, have a look at buildexcellentwebsit.es (external link) as well.

Preference Detection

This template automatically changes the theme based on your operating settings by utilising prefers-color-scheme (external link) and prefers-contrast (external link) . It also checks if you prefer reduced motions via prefers-reduced-motion (external link) . Look and behold, the power of CSS!

Pre-Commit Hooks

Commiting to something can sometimes take a lot of effort. Commiting code is no exception, but at least here we can pull out the safety net to soften our fall in case we made a mistake. In this case it's running npm run build (powered by Husky (external link) ), which will look for the following things in your project BEFORE the project is build and BEFORE your code is being commited:

  • Errors
  • Warnings
  • Hints

Prettier Config

I don't know about you, but if my code is not nicely formatted after hitting save, I'm starting to feel very weird. Which is why this comes with a Prettier configuration, in case you're using it. Or a you one of those people who do this manually?!

SEO

Predefined values for improved search engine optimisation can be found in Layout.astro. These settings have been my reliable companion for a couple of years now and I put a lot of research, work and testing into it.

Security Headers

Better safe than sorry, am I right? There are multiple ways to add security headers to your website and I decided to store them in a _headers file. This setup might be to strict for your use case, so go ahead and adjust it accordingly. The following headers are included:

  • Cross-Origin-Embedder-Policy
  • Cross-Origin-Opener-Policy
  • Cross-Origin-Resource-Policy
  • Content-Security-Policy
  • Permissions-Policy
  • Referrer-Policy
  • Upgrade-Insecure-Requests
  • X-Content-Type-Options
  • X-Frame-Options

This helped me to get an A rating on Security Headers (external link) and an B+ rating on HTTP Observatory Report (external link) .

When I wanted to test security headers in the past, I had to push my changes, wait for deployment, check if anything's broken, go back to the code, push again and so on. Luckily, Astro offers to test your security headers locally! I stumbled upon this amazing feature by accident in Cassidy's article Three ways to set headers with Netlify and Astro (external link) .

All you gotta do is to add the headers to your astro.config.mjs file. This way you can test everything locally, make sure it works and push the changes once your done.

Usability

I've added a bunch of handy utilities which will not only improve usability, but accessibility as well:

  1. "Back to top" button
  2. External link (showing icon)
  3. Improved focus behaviour *
  4. Skip link

Very proud of the the ExternalLink.astro component, as it handles a couple of use cases:

  • name prop for accessible and visible name
  • Adjustable font and icon size
  • Lets you configure the rel attribute

* Thanks to Stephanie Eckles (external link) & Adam Argyle (external link)

Back to top