How-to

How-to Overview

Each how-to guide solves one task on a real Bascik site, from rendering Markdown to serving a strict Content Security Policy. Pick the task you have, follow the steps, and copy the working example.

Build and Content

• Markdown: render Markdown files and front matter at build time.
• Build Scripts with Page Context: generate canonical URLs, Open Graph tags, and sidebars that depend on the current page.
• Templating: loops, conditionals, and data in vanilla HTML with build-time scripts.
• Optimizing Images: responsive WebP, srcset, and layout-stable image markup.

Interactivity and Style

• Interactivity: patterns from no code at all to fetch calls and storage.
• Theming: design tokens, light and dark themes, and a theme toggle.
• JavaScript Libraries: use CDN-delivered or bundled libraries alongside Bascik.
• Third-Party Web Components: load a custom element from npm.
• Bundling npm Packages: run any bundler in Bascik's lifecycle pipeline.

Production

• Asset Fingerprinting: content-hash asset filenames for long-lived CDN caching.
• Content Security Policy: serve a strict CSP with no 'unsafe-inline'.

Teams and Migration

• Sharing Components: copy components between projects.
• Publishing Components: distribute components as npm packages.
• Monorepos: several sites with shared components in one repository.
• Migrating with Coding Agents: move an existing site to Bascik with an agent.

Next Steps

New to Bascik? Start with Getting Started. Looking for a working component to copy? See Example Components.