Getting Started with This Blog Template
Welcome to Your Blog
This is a template for creating a modern technical blog using SvelteKit. It comes with many built-in features to help you write rich, interactive content.
Key Features
- Syntax-highlighted code blocks with language detection
- LaTeX math rendering for mathematical expressions
- Internal links that create an interactive graph of your posts
- Tags for organizing and categorizing content
- Dark/light mode with automatic theme detection
- Password protection for private posts
- Custom components for callouts, sidenotes, audio, and more
How to Create Posts
Posts are Svelte components stored in src/lib/posts/.
Each post file should export a metadata object in a module script:
<script lang="ts" context="module">
export const metadata = {
title: 'Your Post Title',
date: '2026-01-15',
description: 'Brief description for listings',
tags: ['tag1', 'tag2'],
protected: false
};
</script>
<script lang="ts">
import { inlineMath as x, displayMath as X, link as l } from '$lib/tags';
import Callout from '$lib/components/Callout.svelte';
import LocalGraph from '$lib/components/LocalGraph.svelte';
let { isAuthenticated = false } = $props();
</script>
<h1>{metadata.title}</h1>
<LocalGraph slug="your-post-slug" {isAuthenticated} />
<!-- Your post content here -->Using Math and Links
This template has a powerful preprocessor that transforms mathematical expressions and links at build time. Use template tag syntax:
- Inline math:
{x`f(x) = x^2`}renders to - Display math:
{X`E = mc^2`}renders centered - Links to posts:
{l`other-post`}creates an internal link - Links with anchors:
{l`other-post#section`}links to a specific section
Static expressions (without variables) are rendered at build time as SVG, making your site blazingly fast.
For dynamic content with variables, use the <Math> component instead.
Organizing with Tags
Tags help readers discover related posts. Add as many tags as relevant to your post. The homepage displays all unique tags and their post counts, allowing readers to browse by topic.
Next Steps
Check out the other example posts to learn about:
- Using code components with syntax highlighting
- Rendering mathematical equations
- Adding callouts and sidenotes
- Linking to other posts and building your content graph
- Using audio players with visualizations
- Embedding sheet music with ABC notation