Building the Astro site in GitHub Actions

Why Astro?

Astro is particularly suitable for a documentation or engineering blog because the majority of the content can be generated as static HTML.

The source project might contain:

src/
├── components/
├── layouts/
├── pages/
└── content/

After running:

npm run build

Astro generates a production-ready static website:

dist/
├── index.html
├── about/
│   └── index.html
├── projects/
│   └── index.html
├── blog/
│   └── ...
└── assets/
    └── ...

This means I don’t need a continuously running application server just to serve the blog.

The generated files can be stored in object storage and distributed through a CDN.

The repository

The project is stored in GitHub.

A typical structure looks like:

The important part for CI/CD is that the repository contains:

The lock file is especially important because GitHub Actions will use:

npm ci

to install dependencies.

npm install vs npm ci

For local development, I can use:

npm install

This can create or update:

The lock file should then be committed:

For CI, I use:

npm ci

instead.