HelloTrello!

This site is populated with content from a public Trello board. Every deployment pulls the content from the Trello API and generates the site's HTML at build time on Netlify.

Sections from cards

Each card in Trello populates a section of the page. And since Trello supports markdown, we can do some simple text formatting right from the Trello card.

Order matters

As we move cards around in Trello, it controls the order of the sections in this page.

This demo only uses the title and the description fields from cards, but we could do all sorts of things with other attributes and labels. Perhaps labelling some cards as pages so that our site generator could generate pages from them instead of sections.

Attachments and assets

Trello cards can even have attachments. We can use those to manage assets on the site too. The image above is an attachment on a card. We could also perhaps use attachments for:

  • Managing resources and assets in downloads sections
  • Setting globally used image assets

Lots of possibilities. But this is just a simple proof of concept.

Webhooks trigger updates

Whenever we make changes in the Published list, Trello triggers a Netlify build hook which initiates a new build and deployment, updating the site.

Trello paid accounts can have buttons which can make HTTP Post requests, which means we could have a button which initiates a site deployment on Netlify via a build hook.

Oh, do go on...

You can read an explanation about how this was built in this article on CSS-Tricks