Build a Simple Site with Microformats

This tutorial uses Astro but the concepts apply to any framework.

Scaffold

pnpm create astro@latest otso-site
cd otso-site

Template

Render a note:

<article class="h-entry">
  <p class="p-name e-content">{note.content.text}</p>
  <a class="u-url" href="{note.url}">Permalink</a>
</article>

Webmention display

Fetch mentions from the projections and list them under each post.