Tips on making a good website with Astro

Astro is my preferred framework of choice for making websites. Here’s a few tips I learned, particularly so I can link this to my friends when they ask me how to make a website in the future. These are ranked from most important to least important.

Follow the Astro blog tutorial

Astro has a very good blog tutorial that teaches you the basics. Go try it!

Skip their suggestion for Netlify and pick a good hosting provider.

Pick a good hosting provider

Don’t get scammed by “serverless” providers that have hidden fees. Use something simple. My suggestions are either host your static files on a VPS or use GitHub Pages.

Use a content collection

For blog posts, Astro.glob works, but it doesn’t let you do much with it. I suggest setting up a proper content collection. Here’s mine:

// src/content/config.ts
import { z, defineCollection } from "astro:content";

const blog = defineCollection({
  type: "content",
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      description: z.string(),
      date: z.date(),
      cover: image().optional()
    })
});

export const collections = {
  blog
};

Structure your layouts well

Personally, I have a main Layout.astro with the main site layout, styles and all, with a slot in <main>.

You can make one for rendering pages written in Markdown:

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

<Layout {...Astro.props.frontmatter}>
  <slot />
</Layout>

Then add layout: "../layouts/Markdown.astro" to the frontmatter.

Set up a RSS feed with containers

The experimental Astro Container API allows you to render your Markdown into HTML which can be embedded into your RSS feed. This significantly improves the experience in feed readers.

First, set up RSS. Make sure to add the link for RSS auto discovery. Then, use the code in my gist to render the RSS feed.

Setup MDX

With MDX, you can use your components in your Markdown files. I have one for a video player and a little info box for quotes. See the entry on the Astro docs.

If you plan to lint this, see my comments about MDX linting.

Create an 88x31

88x31s are small badges, usually linking to other websites, that usually promote some sort of person/project/program/etc. My website has a ton of them!

My friend Ari has some good notes on how to make a good one. You can use any image editor you’d like as long as you can set the size. (Why a specific size? It’s Geocities’ fault!)

Ask your friends to add your 88x31, and if you can add theirs. When adding 88x31s, avoid letting Astro process them, as it can ruin the quality. Put them in your public/ directory raw (I do public/buttons/).

TypeScript import aliases

Turn this:

import MyComponent from "../../components/MyComponent.astro";

into:

import MyComponent from "@components/MyComponent.astro";

See the entry on the Astro docs.

Set up formatters

Personally:

• Prettier for formatting
  • Install the Astro plugin
• ESLint for linting
  • Install the Astro plugin and the Prettier config
• markdownlint for Markdown

I would like to lint MDX, but remark just seems very bad (especially with dependency management and linting codeblocks), so I just write code with my editor set to vanilla Markdown and write the MDX imports by hand. Suggestions welcome!