Back to templates

Template details

rimzzlabs.com

Astro-powered personal website template with bilingual EN/ID pages, MDX notes, guestbook, and contact form on Cloudflare Pages.

About this template

rimzzlabs.com is an open-source personal website template by Rizki Citra, built with Astro 7 static output and React 19 islands, that delivers a bilingual English/Indonesian site with a D1-backed guestbook, OAuth sign-in, and a contact form — all on Cloudflare Pages without an SSR adapter.

What is rimzzlabs.com?

rimzzlabs.com is the personal site of Rizki Citra, released as a template for developers. It takes MDX blog posts in English and Indonesian content collections and produces a static site where dynamic features like guestbook comments, authentication, locale negotiation, and the contact form run as Cloudflare Pages Functions. The project is written in TypeScript and uses pnpm as the package manager, with Node 22.12 specified in .nvmrc.

Key Features

  • Bilingual (en/id) — Every page exists in both English and Indonesian; root requests redirect through an edge middleware that checks a locale cookie or the Accept-Language header, while all other pages are prerendered per locale.
  • Notes with rich reading experience — MDX posts per locale include Shiki syntax highlighting, slugged headings, a table of contents with reading progress, and a fuzzy "did you mean…?" router that handles near-miss note URLs with locale-aware 404 pages.
  • Guestbook on D1 — Visitors can leave anonymous or OAuth-verified comments stored in Cloudflare D1; GitHub and Google sign-in via better-auth, Turnstile protection, and recent comments baked into the static HTML at build time for crawlability.
  • Contact form via Resend — A rich-text Tiptap dialog submits messages through a Pages Function that uses the Resend API, also protected by Turnstile.
  • Now / Archive pages — A "Now" page for current updates and a photo timeline with carousels, showing what the author is up to.
  • Polish and performance — Light/dark theme applied before paint, Motion animations that respect prefers-reduced-motion and a stored preference, a draggable dock navigation, an image sitemap, and SEO/OG tags.

Who is it for?

  • Astro developers who want a production-ready reference for combining static output with Cloudflare Pages Functions for dynamic features.
  • Bilingual bloggers or site owners who need English and Indonesian versions of every page without duplicating the whole site structure.
  • Developers looking for a guestbook pattern — a D1-backed comment system with OAuth and Turnstile that still keeps the content crawlable by pre-rendering recent comments.

What can you do with rimzzlabs.com?

  • Publish a bilingual blog — Write MDX posts in src/content/notes/en and src/content/notes/id, and the template generates per-locale URLs with syntax highlighting, a table of contents, and reading progress.
  • Run a guestbook without a separate server — Use the included Pages Functions to store comments in D1, authenticate via GitHub or Google, and protect submissions with Turnstile.
  • Deploy a personal site with a contact form — The Tiptap-based contact dialog sends messages through Resend, so you don't need to build a form-to-email integration yourself.

How does it work?

The site is built with pnpm build, which runs any pending D1 migrations before building the static output. For local development, pnpm dev starts the Astro dev server for the static pages only; to exercise the guestbook, auth, and contact endpoints locally, pnpm guestbook:preview builds the site and serves dist/ through wrangler pages dev with a local D1 database from the migrations/ folder.

FAQ

Does this template require a server?

No. The site is fully static at build time — Astro prerenders every page per locale. Dynamic features are handled by Cloudflare Pages Functions, which run on Cloudflare's edge network only when requested, so there is no SSR adapter or always-on Node server.

How do I run the guestbook locally?

Use pnpm guestbook:preview instead of pnpm dev. This command builds the site and serves the dist/ folder through wrangler pages dev, applying local D1 migrations from migrations/ so the full API works on your machine.

Where are runtime secrets stored?

Runtime secrets such as the Turnstile secret, OAuth client IDs/secrets, Resend API key, session secret, and notification emails are set directly on the Cloudflare Pages project, not in .env. The .env file only holds build-time values like the public Turnstile site key and optional Cloudflare credentials for baking guestbook comments into static HTML.

Is there a test suite?

No. The repository explicitly states there is no test suite — verify changes with pnpm check for TypeScript/Astro types and pnpm build when touching images or build configuration.

screenshot of rimzzlabs.com on template0.com