Skip to content

Static sites

For a site generator that doesn't run Python-Markdown, render the page before the site builds. dct render --format md writes the page with each dbt-charts fence swapped for an image link, and the SVG file beside it. Hugo, Jekyll, Astro and Docusaurus all serve the images as they are, and GitHub shows them in a README, where it would strip a chart written into the page as SVG.

dct render content/post.md --format md --output build/post.md

build/post.md reads like the original, with each fence replaced:

Revenue kept climbing through the spring.

![Revenue by month](post-1.svg)

The images are named after the output page: post-1.svg, post-2.svg, in page order. The alt text is the chart's title. Each image carries its own fonts, because an image can't load any.

A fence means the same thing as in a markdown board: query and chart names are shared across the page. The page's frontmatter stays as it was; a board: key in it sets the theme or variables for every chart. Each chart carries a small "made with dbt Charts" footer; this frontmatter turns it off:

---
board:
  style:
    footer:
      visible: false
---

dct render runs inside a dbt Charts project. An empty dbt_charts.yml at the root of the site is enough for charts with inline data; a chart that queries a warehouse needs the project's credentials where the site builds.

Render every page in a folder with an output template:

dct render content/blog/*.md --format md --output 'build/{stem}.md'

A fence that fails to render exits 1 with the error and the line of the fence, so a broken chart fails the build.