Basic Blog

Basic Blog is a lightweight, high-performance blog template built on Astro 6 and Tailwind CSS, designed for static blogs with pre-configured security headers, built-in search, and working newsletter and contact forms.

What is Basic Blog?

Basic Blog is a GitHub-hosted blog template that runs on Astro 6 and outputs a static site with pages for blog posts, projects, about, contact, newsletter, and search. It takes site settings from a TypeScript configuration file and content from Markdown, then generates an optimized static build with RSS and sitemap. The template is created by Daniel Adrian (GitHub: truedaniyyel) and distributed as a repository.

Key Features

• Astro 6 with native font optimization — self-hosts local .woff2 fonts through Astro's font provider and exposes a CSS variable for theming.
• Pre-configured CSP and security headers — ships a _headers file in the public folder tuned for Cloudflare, with instructions to port rules to Vercel or Netlify.
• Dark and light mode — a built-in theme toggle with system-aware styling.
• Tailwind CSS styling — utility-first CSS across all components, with a global stylesheet in src/styles/global.css.
• Cloudinary image optimization — uses CldImage with Low-Quality Image Placeholders (LQIP) to show blurred placeholders until full images load.
• Pagefind search — static, fast search across content with no external service.
• Cloudflare Turnstile bot protection — protects newsletter and contact forms with non-intrusive challenges; implemented with Astro Actions for server-side verification.
• Code blocks and icons — astro-expressive-code renders code blocks, astro-icon handles icons, and medium-zoom adds image light-box zoom.
• Pages and sections included — blog index, projects, about, contact, newsletter, search, RSS feed, and sitemap.

Who is it for?

• Independent bloggers — launch a personal blog with Markdown posts, custom Open Graph images, and fast static hosting.
• Developers deploying to Cloudflare — the security headers are pre-tuned for Cloudflare Pages, so deployment is nearly copy-paste.
• Technical writers — publish code-heavy posts with Expressive Code syntax highlighting and local fonts.

Use cases

• Personal sites: set up a homepage, blog, projects, about, and contact pages using the provided navigation config in src/site.config.ts.
• Newsletter growth: wire the built-in newsletter form to Kit using Astro Actions, with Turnstile protecting submissions.
• Contact forms: collect messages with sessionStorage persistence so input is not lost on refresh, and redirect to a success state after delivery.

How does Basic Blog work?

Clone the repository, install dependencies, and update src/site.config.ts to set your site title, description, and social links. Add your Cloudinary and Turnstile keys to the .env file, then deploy — the _headers file applies CSP and XSS rules automatically on Cloudflare, while Vercel and Netlify require moving those rules to their own config files.

FAQ

Does Basic Blog require server-side rendering?

The template is static by default. To make the newsletter and contact forms work, uncomment export const prerender = false; in the relevant page files and create src/actions/index.ts with your form logic using Astro Actions.

How are images optimized?

Images are handled through Cloudinary with the CldImage component, which uses format="auto" and quality="auto" so Cloudinary serves the best format for each visitor.

How do I add custom Open Graph images?

For static pages, pass an ogImage prop to the BaseLayout component. For blog posts, specify an image with src and alt in the Markdown frontmatter, and the template builds the social sharing card automatically.

What search functionality does it use?

Search is powered by Pagefind, a static search library that indexes your content at build time and provides fast, no-server search results directly in the browser.