This is a template for the static site generator Astro. Now updated for Astro 6!
I like Astro, but I don't like spending hours customizing styles. I made this template based on a few key principles:
- I want a basic website with a single-author blog.
- The website should incorporate accessible and usable elements.
- Avoid complex systems, prefer simpler ones.
- Things I see should be easy to understand.
The result is an Astro template that barely uses CSS classes, and maximizes the use of semantic HTML. It not only makes for a functional site, but is also great to start learning how Astro works!
npm create astro@latest -- --template anaxite/astro-smallworld
cd astro-smallworld
npm run dev
npm run build- Install Astro:
npm create astro@latest -- --template anaxite/astro-smallworld- Install this template's dependencies, if you didn't already:
cd <install-directory>
npm install- Run the template in preview mode, or build the final output.
npm run dev
npm run build- Optionally, format your source files with Prettier.
npm run formatSite-wide settings are stored in src/settings.ts. This is also where you can set the favicon file name, and Open Graph image settings.
The file src/styles/main.scss controls which CSS elements Pico CSS includes in the final site. See the Pico CSS website for information about these elements.
A site build may show Pico CSS warnings. These warnings are generally non-fatal and can be ignored.
Create your static pages as .astro files under src/pages. The template includes an index page with the most recent blog posts, an About page, and a 404 page.
Use the Base layout to wrap your content in semantically-correct <main> tags. The Base layout also takes title and description attributes that supplement the main site title and description. If you want your content to have a nice border, I recommend you wrap it in <article> tags to benefit from Pico CSS styling.
To start with a basic page template, see the file in src/templates.
To add a page to the site navigation, edit the PageHeader.astro component directly.
smallworld comes with a blog collection by default. To add a new post, create a Markdown file in the src/content/blog directory or one of its subdirectories. The path and file name becomes the post URL.
A post must have title, description and pubDate keywords in its frontmatter. tags are optional.
To see a post template, see the file in src/templates.
For your convenience, I added a few tooling things:
- Any Node.js package manager supported by Astro should work. I include a bit of PNPM config by default.
- This project comes with a
mise-en-placeconfiguration file.
Want to learn more about Astro? Check out their documentation or jump into their Discord server.