Basic Blog

Basic Blog is a mostly lightweight, high-performance blog template built with Astro 6.

Features

Astro 6+ Ready:
- Native Font Optimization
- Pre-configured CSP (Content Security Policy) and security headers (optimized for Cloudflare, easily adaptable for Vercel or Netlify).
Responsive: mobile, tablet, and desktop devices.
Stack: Astro, Tailwind, and JS.

Deployment

You will find a _headers file located in the /public folder. This file handles the Content Security Policy (CSP) and XSS protections mainly for Cloudflare.

If you are deploying to Vercel or Netlify, simply move these rules to a vercel.json or netlify.toml file respectively.

Configuration

Environment Variables

For forms to work, you must add your Turnstile keys to your .env file:

1
PUBLIC_TURNSTILE_SITE_KEY=0x4AAAAAA...

Site Settings & SEO

Global settings, SEO metadata, and navigation links are managed in src/site.config.ts.

Update SITE_SETTINGS to change your site title, description, and social media handles:

1
export const SITE_SETTINGS = {
2
  title: "Daniel Adrian's site",
3
  description: "A space to explore ideas and share what I'm learning",
4
  owner: "Daniel Adrian",
5
  ogImages:
6
    "/images/image/upload/v1756758385/og-home_ejuqq8.png",
7
  socials: [
8
    {
9
      icon: "github",
10
      label: "GitHub",
11
      url: "https://github.com/truedaniyyel",
12
      handle: "truedaniyyel",
13
    },
14
  ],
15
};

You can easily manage your site’s menu structure by editing the header and footer exports:

1
export const header = [
2
  {
3
    name: "Blog",
4
    url: "/blog",
5
  },
6
  {
7
    name: "Projects",
8
    url: "/projects",
9
  },
10
  {
11
    name: "About",
12
    url: "/about",
13
  },
14
];
15

16
export const footer = [
17
  {
18
    title: "Content",
19
    links: [
20
      {
21
        name: "Search",
22
        url: "/search",
23
      },
24
      {
25
        name: "Blog",
26
        url: "/blog",
27
      },
28
      {
29
        name: "Projects",
30
        url: "/projects",
31
      },
32
      {
33
        name: "About",
34
        url: "/about",
35
      },
36
    ],
37
  },
38
  {
39
    title: "Resources",
40
    links: [
41
      {
42
        name: "RSS",
43
        url: "/rss.xml",
44
      },
45
      {
46
        name: "Sitemap",
47
        url: "/sitemap-index.xml",
48
      },
49
    ],
50
  },
51
];

Metadata & OG Images

You can define custom Open Graph images for both static pages and posts.

For Static Pages

Pass the ogImage prop directly into the <BaseLayout> component:

1
<BaseLayout
2
    title="Search"
3
    description="Search articles and projects from Daniel Adrian."
4
    ogImage="/images/.../og-search.png"
5
>
6
    </BaseLayout>

For Blog Posts

Add the image details to the Frontmatter of your Markdown files. The template will automatically use this for the post’s social sharing card:

1
image:
2
  src: "/images/.../how_to_build_trust.webp"
3
  alt: "A hand-drawn sketch representing stability with labels: 'Know', 'Like', and 'Trust'."
4
ogImage:
5
  src: "/images/.../how_to_build_trust.webp"

This template uses Cloudinary paired with LQIP (Low-Quality Image Placeholders) to ensure a smooth loading experience. When an image is requested, a blurred placeholder is shown until the full-resolution image is ready.

You can find the implementation logic in src/components/ui/OptimizedImage.astro:

1
<div
2
    class={cn(
3
        "relative overflow-hidden bg-neutral-200 dark:bg-neutral-700",
4
        wrapperClass,
5
    )}
6
>
7
    {
8
        lqipUrl && (
9
            <img
10
                data-pagefind-ignore
11
                src={lqipUrl}
12
                alt=""
13
                aria-hidden="true"
14
                class={cn(
15
                    "absolute inset-0 h-full w-full scale-105 object-cover blur-xl",
16
                    imageClass,
17
                )}
18
                loading="eager"
19
                decoding="async"
20
            />
21
        )
22
    }
23

24
    <CldImage
25
        src={src}
26
        alt={alt}
27
        class={cn("absolute inset-0 h-full w-full object-cover", imageClass)}
28
        loading={loading}
29
        fetchpriority={fetchPriorityVal}
30
        format="auto"
31
        quality="auto"
32
        {...rest}
33
    />
34
</div>

Fonts

Local fonts are stored in src/assets/fonts/. To add or change fonts:

Drop your .woff2 files into the fonts folder.
Update the astro.config.mjs font provider:

1
fonts: [
2
    {
3
      provider: fontProviders.local(),
4
      name: "YourFontName",
5
      cssVariable: "--font-custom",
6
      options: {
7
        variants: [{
8
            src: ["./src/assets/fonts/YourFont.woff2"],
9
            weight: "normal",
10
            style: "normal",
11
          }],
12
      },
13
    },
14
  ],

Update the variable in src/styles/global.css:

1
font-family: var(--font-custom), system-ui, sans-serif;

For more info on using remote fonts (Google Fonts, etc.), check the Astro Font Provider Reference.

Forms & Bot Protection

The template uses Cloudflare Turnstile for non-intrusive bot protection and Astro Actions for server-side processing.

Turnstile Implementation

Turnstile code is in src/components/integrations/turnstile/:

TurnstileWidget.astro: The UI component that renders the challenge.
TurnstileController.astro: Manages the lifecycle of the widget, including theme switching (light/dark) and automatic cleanup/re-initialization.

Technical Details

Search: Powered by Pagefind for fast, static search. Image Zoom: Integrated with medium-zoom for a clean light-box experience. Icons: Handled via astro-icon. Code Blocks: Rendered using astro-expressive-code.