Inside the blog-astro-personal template

2026-05-10

templates/blog/astro/personal/ is an Astro template for a personal blog (essays and diary entries), built with Lism CSS and @lism-css/ui. It’s designed around a text-first reading experience and comes with monthly archives, tags, Open Graph meta tags, and sitemap / robots.txt. It has no hierarchical classification such as categories.

Dependencies

On top of Astro and Lism CSS / @lism-css/ui, it adds @astrojs/sitemap. astro.config.mjs only sets up the sitemap integration and the @ → /src alias. Posts are .md files.

Directory structure

src/
├── components/      # Astro components
├── config/site.ts   # Site config
├── content.config.ts
├── layouts/         # Layout / ArchiveLayout
├── lib/             # Helpers for monthly archives, tags, OG images, and sitemap lastmod
├── pages/           # Routing
├── posts/           # Post Markdown (flat layout)
└── styles/global.css

Routing

Path	Contents
`[...page].astro`	Top (all posts) + pagination
`posts/[slug].astro`	Post detail
`archive/index.astro`	Monthly archive index
`archive/[year]/[month]/[...page].astro`	Monthly list + pagination
`tags/index.astro`	Tag list
`tags/[tag]/[...page].astro`	Per-tag list + pagination
`about.astro`	About
`robots.txt.ts`	robots.txt
`404.astro`	404

The post filename (without extension) is used directly as the URL slug. The number of posts per page is siteConfig.pagination.postsPerPage (6 by default). On the post detail page, posts are sorted by date in descending order, and prev / next are passed by index.

Monthly archives

getArchiveSummaries() in src/lib/archive.ts returns an array of { year, month, count } from the post list, newest first, and getPostsByArchive(year, month) extracts the posts for a given month. archive/index.astro renders this as a list, with each row linking to /archive/{year}/{month}/.

Sitemap and last-modified dates

@astrojs/sitemap generates the sitemap at build time. The site value in astro.config.mjs is the base for the sitemap and robots.txt, so change it to your deployment domain before publishing.

Post frontmatter can optionally include an updated field.

---
title: Post title
date: '2026-05-10'
updated: '2026-05-25'
---

If updated is present it’s used for the sitemap’s lastmod; otherwise date is used. It currently doesn’t affect the post display or the ordering of monthly archives.

Open Graph

Layout.astro already includes Open Graph / Twitter Card meta tags. OG images are generated by calling the loos.tools/ogimg-maker API from src/lib/ogImage.ts. You can change the default style via siteConfig.ogImage.

Layout

Layout.astro — loads the Open Graph meta tags and the web font (Noto Serif JP) in <head>, and stacks Header / Main / Footer vertically with <Stack min-h="100svh"> inside a <Container>.
ArchiveLayout.astro — a list layout built on Layout that wraps the body in <Group isWrapper isContainer hasGutter><Stack g="50">.
The post detail (posts/[slug].astro) places the post header (Date, Heading, tags), the body (Flow.c--articleBody), and the footer (ShareButtons + ArticleNav) inside <Group as="article" isWrapper isContainer hasGutter>.

Where to customize

src/config/site.ts — site name, tagline, navigation (Home / Archive / Tags / About), default OG image settings ({ type: '1-5', frame: true, bg: 'fill' }), social links, copyright, and so on
src/styles/global.css — a tone built around a soft, paper-like cream background and a serif typeface (Noto Serif JP). Lism CSS token overrides go in @layer lism-base.
Typography for the post body (the underline under h2, the left border on blockquote, etc.) is written as descendant selectors under .c--articleBody in @layer lism-custom, because you can’t attach classes directly to elements generated from Markdown.