A simple site on Astro, hosted free on DigitalOcean, with IndieBob Free for the blog

npm create astro@latest my-site -- --template minimal
cd my-site
npm install @indiebob/tracker

src/
├── layouts/
│   └── BaseLayout.astro     # head, fonts, tokens, the tracker
├── components/
│   └── Tracker.astro        # one IndieBob script (step 3)
├── lib/
│   ├── site.mjs             # the site's facts: base URL, project id
│   └── blog.mjs             # posts from IndieBob at build time (step 4)
└── pages/
    ├── index.astro          # home
    ├── about.astro
    ├── contact.astro
    ├── privacy.astro        # loads no tracker: <BaseLayout analytics={false}>
    ├── blog/
    │   ├── index.astro      # /blog/
    │   └── [slug].astro     # /blog/<slug>/
    └── rss.xml.js           # built from the same posts

// astro.config.mjs
import { defineConfig } from 'astro/config'

// Static only. Nothing here runs on a server, so the DigitalOcean app
// stays a free static site.
//
// trailingSlash + format: every page is a directory index, every link
// ends in a slash — the shape IndieBob's own feed and sitemap assume
// (…/blog/<slug>/).
export default defineConfig({
  site: 'https://www.example.com',
  output: 'static',
  trailingSlash: 'always',
  build: {
    format: 'directory',
    inlineStylesheets: 'always',
  },
})

# .do/app.yaml — a static site on App Platform's free tier.
# No catchall_document: Astro's directory output gives every route
# a real index.html.
name: my-site
region: fra
domains:
- domain: www.example.com
  type: PRIMARY
  zone: example.com
- domain: example.com
  type: ALIAS
  zone: example.com
alerts:
- rule: DEPLOYMENT_FAILED
- rule: DOMAIN_FAILED
static_sites:
- name: my-site
  environment_slug: node-js
  source_dir: /
  gitlab:                 # or github:
    repo: you/my-site
    branch: main
    deploy_on_push: true
  build_command: npm ci && npm run build
  output_dir: dist

# First time: create the app from the spec
doctl apps create --spec .do/app.yaml

# Later changes to the spec
doctl apps update <app-id> --spec .do/app.yaml

# Before applying again, refresh the file from the live spec — update
# REPLACES the whole env list, and the content key (step 3) lives there:
doctl apps spec get <app-id> > .do/app.yaml

// src/lib/site.mjs — the one place the site's facts live.
export const SITE = {
  base: 'https://www.example.com',
  name: 'My site',
  ogDefault: 'https://www.example.com/og-default.png',
}

// The IndieBob project id is public by nature — it is in every page's
// tracker call — so it lives here; an env var can override it for a fork.
export const INDIEBOB_PROJECT = process.env.INDIEBOB_PROJECT_ID || 'proj_xxxxxxxxxxxxxxxx'

---
// src/components/Tracker.astro
// One page() per full page load (there is no client router here), plus a
// named event for whatever `data-track` names a link carries. autoDetect
// already reports outbound clicks and form submits on its own.
//
// Bundled by Vite from the npm package, not the CDN: pinned version, no
// third-party script request for an ad blocker to drop.
import { INDIEBOB_PROJECT } from '../lib/site.mjs'
---
<script define:vars={{ projectId: INDIEBOB_PROJECT }}>
  window.__ibProject = projectId
</script>
<script>
  import { IndieBob } from '@indiebob/tracker'
  const projectId = window.__ibProject
  if (projectId && /^proj_[a-z0-9]{16}$/.test(projectId)) {
    const bob = IndieBob.init({ projectId, autoDetect: true })
    bob.page()
    for (const a of document.querySelectorAll('a[data-track]')) {
      a.addEventListener('click', () => bob.track(a.dataset.track))
    }
  }
</script>

<!-- src/layouts/BaseLayout.astro, the end of <body> -->
<body>
  <slot />
  {analytics && <Tracker />}
</body>

curl https://www.indiebob.com/api/content/v1/posts \
  -H "Authorization: Bearer ib_pk_your_key"
# → { "data": [ { "slug", "title", "excerpt", "ogImageUrl", "publishedAt", … } ],
#     "pagination": { "page": 1, "limit": 20, "total": 2, "totalPages": 1 } }

// src/lib/blog.mjs — posts are fetched at BUILD time and baked into
// static HTML; nothing here runs in a visitor's browser.
const API_BASE = 'https://www.indiebob.com'
const API_KEY = process.env.INDIEBOB_CONTENT_API_KEY

const apiGet = async (suffix) => {
  const res = await fetch(`${API_BASE}/api/content/v1${suffix}`, {
    headers: { Authorization: `Bearer ${API_KEY}`, Accept: 'application/json' },
  })
  if (!res.ok) throw new Error(`GET ${suffix} → HTTP ${res.status}`)
  return res.json()
}

async function fetchPosts () {
  // A key-less build must FAIL, not quietly ship an empty blog. The
  // escape hatch is explicit — it is what the DigitalOcean app carries
  // until the content key exists.
  if (!API_KEY) {
    if (process.env.ALLOW_EMPTY_BLOG === '1') return []
    throw new Error('INDIEBOB_CONTENT_API_KEY is not set — refusing to build a blog with no posts.')
  }

  const collected = []
  let page = 1, totalPages = 1
  do {
    const list = await apiGet(`/posts?limit=50&page=${page}`)
    collected.push(...(list.data ?? []))
    totalPages = list.pagination?.totalPages ?? 1
    page += 1
  } while (page <= totalPages)

  const detailed = []
  for (const s of collected) {
    const { data: raw } = await apiGet(`/posts/${encodeURIComponent(s.slug)}`)
    detailed.push({
      slug: raw.slug,
      title: raw.title ?? '',
      excerpt: raw.excerpt ?? '',
      html: raw.bodyHtml ?? '',
      publishedAt: raw.publishedAt ?? null,
      cover: raw.ogImageUrl ?? null,
      // Free-plan posts end with a "Written with IndieBob" line, declared
      // as data; keep it in the body and style it muted, or strip the
      // element marked data-indiebob-credit.
      writtenWithCredit: Boolean(raw.writtenWithCredit),
    })
  }
  detailed.sort((a, b) => new Date(b.publishedAt ?? 0) - new Date(a.publishedAt ?? 0))
  console.log(`✓ blog: ${detailed.length} post(s) from IndieBob`)
  return detailed
}

// One fetch per build, shared by the index, the post pages and the feed.
let pending = null
export const getPosts = () => (pending ??= fetchPosts())

---
// src/pages/blog/index.astro
import BaseLayout from '../../layouts/BaseLayout.astro'
import { getPosts } from '../../lib/blog.mjs'
const posts = await getPosts()
---
<BaseLayout title="Notes" description="What we are building, what broke, what it earned." canonicalPath="/blog/">
  <h1>Notes</h1>
  {posts.length === 0
    ? <p>Nothing yet. The first note lands when there is something worth telling.</p>
    : <ul>{posts.map((p) => (
        <li><a href={`/blog/${p.slug}/`}>{p.title}</a></li>
      ))}</ul>}
</BaseLayout>

---
// src/pages/blog/[slug].astro
import BaseLayout from '../../layouts/BaseLayout.astro'
import { getPosts } from '../../lib/blog.mjs'
import { SITE } from '../../lib/site.mjs'

export async function getStaticPaths () {
  const posts = await getPosts()
  return posts.map((post) => ({ params: { slug: post.slug }, props: { post } }))
}
const { post } = Astro.props
---
<BaseLayout
  title={post.title}
  description={post.excerpt}
  canonicalPath={`/blog/${post.slug}/`}
  ogType="article"
  ogImage={post.cover || SITE.ogDefault}
>
  <article>
    <h1>{post.title}</h1>
    {post.cover && <img src={post.cover} alt="" width="1200" height="630" />}
    {/* IndieBob's published snapshot, sanitised server-side with an allowlist. */}
    <Fragment set:html={post.html} />
  </article>
</BaseLayout>

// src/pages/rss.xml.js — our own feed, built from the same posts the
// pages are built from. IndieBob's feed endpoint needs the bearer key,
// so it cannot be the public feed URL; this one can.
import { getPosts } from '../lib/blog.mjs'
import { SITE } from '../lib/site.mjs'

const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')

export async function GET () {
  const posts = await getPosts()
  const items = posts.map((p) => `    <item>
      <title>${esc(p.title)}</title>
      <link>${SITE.base}/blog/${p.slug}/</link>
      <guid isPermaLink="true">${SITE.base}/blog/${p.slug}/</guid>
      ${p.publishedAt ? `<pubDate>${new Date(p.publishedAt).toUTCString()}</pubDate>` : ''}
      <description>${esc(p.excerpt)}</description>
    </item>`).join('\n')
  const xml = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>${SITE.name} notes</title>
    <link>${SITE.base}/blog/</link>
    <atom:link href="${SITE.base}/rss.xml" rel="self" type="application/rss+xml"/>
${items}
  </channel>
</rss>
`
  return new Response(xml, { headers: { 'Content-Type': 'application/rss+xml; charset=utf-8' } })
}