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.

This bit of content is staged

This bit of content is a card in Trello which is labelled with Stage. Only cards which are labelled with Live will appear in the site on the production branch.

Live cards appear in all branches, but other labels will cause cards to be included only in corresponding branch builds.

This way we could have staged content which appears in many build environments, as cards can have many labels.

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.

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

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.