How to Add Images and Video to Your Posts
This post is a template you can copy whenever you write a new article. It shows the two things you asked about: images and video.
Images
The heroImage in the frontmatter above is automatically optimized by Astro at build time (resized, compressed, converted to modern formats). You don’t need to do anything else for the hero image — just point it at a file in src/assets/.
For images inside the body of an article, use standard Markdown syntax:
Astro will optimize these too as long as the image lives in src/assets/ and is referenced with a relative path.
Video
Videos should not be uploaded directly into the repo — they’re too large for a static site and will slow down your builds and page loads. Instead, upload the video to YouTube (unlisted works fine if you don’t want it publicly discoverable) and embed it using the YouTubeEmbed component included in this project:
import YouTubeEmbed from '../../components/YouTubeEmbed.astro';
<YouTubeEmbed id="dQw4w9WgXcQ" title="A short description of the video" />Here’s what that looks like rendered on the page:
The id is just the part of the YouTube URL after watch?v=. This component is responsive, lazy-loaded, and uses YouTube’s privacy-enhanced domain (youtube-nocookie.com) so it doesn’t set cookies until someone actually presses play.
Quick checklist for a new post
- Duplicate this file, rename it, update the frontmatter (
title,description,pubDate,heroImage) - Write your content in Markdown
- Drop any images into
src/assets/and reference them with a relative path - For video, upload to YouTube first, then use
<YouTubeEmbed id="..." /> - Commit and push — Cloudflare Pages builds and deploys automatically
