Halide

Halide is a static image portfolio website template for photographers and visual artists, built with Eleventy and Tina CMS and ready for one-click deployment to Netlify.

What is Halide?

Halide is a minimal, responsive image portfolio website template that generates static HTML from Markdown and YAML content using the Eleventy static site generator. It takes project entries written as Markdown files with YAML frontmatter and source images in JPEG format, then outputs a fast, framework-free site with responsive images in AVIF, WebP, and JPEG formats. The template is maintained by Dan Urbanowicz and is published under the MIT license.

Key Features

• Eleventy-powered static generation — Builds a plain HTML/CSS/JS site with no client-side framework; project content lives in Markdown files under /projects and global settings in _data/settings.yaml.
• Optimized responsive images — Uses the Eleventy Image plugin to produce up to 12 variants per source image (JPEG, WebP, AVIF) at widths from 640 to 2400 pixels, with automatic srcset and sizes attributes in the generated <picture> markup.
• Tina CMS integration — A headless CMS is pre-configured; editors can manage projects and settings through the /admin/ interface with GitHub as the content store, or skip CMS and edit Markdown/YAML directly.
• Dark mode and theme customization — The pure CSS stylesheet (about 7KB) defines colors, typography, and layout via CSS variables set in settings.yaml; dark mode is included.
• Netlify-ready deployment — One-click Deploy to Netlify button, build caching for faster rebuilds, automatic CSP headers, and minified HTML/CSS/JS output.
• Simple two-view structure — By design only a home gallery and individual project pages (plus a 404 page); no additional pages for bio/contact, though they can be added.

Who is it for?

• Photographers — Display portfolio projects with high-quality responsive images and fast loading, without needing to touch code.
• Visual artists and designers — Customize theme colors, typography, and layout through YAML settings or the Tina CMS dashboard.
• Freelance creatives — Deploy a clean portfolio site to Netlify in under an hour, then manage projects through the Tina CMS admin.

Use cases

• Photographers: Publish a project gallery where each project page shows responsive images in AVIF/WebP with lazy-loaded picture elements.
• Developers: Use Halide as a starting point for a custom Eleventy site; modify the Eleventy config, add filters, or extend the CSS.
• Netlify users: Take advantage of build caching and automatic CSP headers for a security-conscious static site.

How does Halide work?

Halide stores project content as Markdown files in /projects and source images in /assets/uploads. On build, Eleventy processes each source image with the Eleventy Image plugin to create up to 12 resized and reformatted variants (JPEG, WebP, AVIF), caches the generated images, and outputs a static site to the _site folder. Settings like site metadata, image widths, and whether to enable AVIF live in _data/settings.yaml; the Tina CMS admin at /admin/ edits the same content through a visual interface backed by GitHub.

FAQ

Is Halide free?

Yes, Halide is open source under the MIT license. The required third-party services — GitHub, Netlify, and Tina Cloud — each offer free plans sufficient for typical portfolio sites.

Do I need to use Tina CMS?

No. You can edit _data/settings.yaml and create project .md files manually. You would then change the Netlify build command from the Tina CMS wrapper to plain eleventy and run npx eleventy --serve locally.

How long does the first build take?

The first build (or any rebuild after clearing the image cache) can be slow because Halide can generate up to 12 image variants per source image, and AVIF encoding is resource-intensive. Disabling AVIF in settings.yaml is a workaround to speed it up.

Are generated images committed to my repository?

No. Only source images are checked into git. Generated responsive variants are cached between builds on Netlify; if the cache expires, they are regenerated from the source automatically.