Get started

If you have not done it yet, open a Trello board, and add the Troglio power-up to it (in the right menu, click on Power-Ups, then search: Troglio):

enable troglio power-up

Once added to your board, click on the Get started with Troglio button in the top right corner of the board; go ahead and connect your Trello board to Troglio.

Then tell Troglio where your application lives (coming soon: We are working on letting you start new projects from scratch right from Trello in this very moment. But for now, you can manually start with a free project available in our official github repository).

Once you're done, let's create our first page !

Create pages

In your Trello board, create a card anywhere named Coming Soon as an example.

Trogl.io allows each Trello card to represent one page of your website from where you can intuitively control your content using Markdown and more.

So we can now open that card and write content in the description section. For example, let's put this:

# Welcome to our special site !

We are coming **soon** ! So stay tuned :)

Follow us on:
- [facebook](https://facebook.com/SpecialSite)
- [twitter](https://twitter.com/SpecialSite)

(if you are not familiar with some syntax above, this is Markdown and remember that Trello provides a nice Formatting help as a cheatsheet)

The whole point of Troglio is that it will turn your cards as pages, then send them to your application or website.

After pushing Publish !, Troglio will send pages' data to the destination you setup (or someone setup for you)

If you try to publish your board now, it should have no effect at all:

Trogl.io will publish your pages only when you say so !

Let's see how to publish pages with Troglio.

Adding structured information to pages

So here we go: in our Coming Soon card, let's put this:

published = yes

+++

# Welcome to our special site !

We are coming **soon** ! So stay tuned :)

Follow us on:
- [facebook](https://facebook.com/SpecialSite)
- [twitter](https://twitter.com/SpecialSite)

See what we did here ? We attached a custom property to our card stating that this specific card should be published. At the same time, it introduces how you can add more structured data to your pages. Troglio already ships with some special properties you can override like we did with published (which defaults to false if not set). But you can add your own structured data as you please. It is just a matter of respecting the formatting we just showed:

separate new properties from page's body with 3 or more +++ like:

actor = Brad Pitt

+++

This is a page about Brad Pitt.

separate key and value pairs by either = or : like : movie = fight club or movie : fight club (they are strictly the same)

To make a point, just add a new random property to this page like:

published = yes
random = 42

+++

# Welcome to our special site !

We are coming **soon** ! So stay tuned :)

Follow us on:
- [facebook](https://facebook.com/SpecialSite)
- [twitter](https://twitter.com/SpecialSite)

Good ! Now you can click Publish !, and this card will be sent to your back-end with a page body and a variable random set to 42. These are data any programmer can take advantage of and fill some template with. Makes sense?! Because this is all about filling templates after all !

Like with any other CMS, Troglio lets you fill templates with structured data.

In fact, one of the special properties Troglio ships with, is precisely named template allowing you to explicitly pick the template you want to fill. In our example, say our theme has a special template named ComingSoon, it is just a matter of setting it like:

published = yes
random = 42
template = ComingSoon

+++

Welcome to our special site !

We are coming soon ! So stay tuned :)

Follow us on:
- [facebook](https://facebook.com/SpecialSite)
- [twitter](https://twitter.com/SpecialSite)

Just to make it clear again, the above configuration will fill the ComingSoon template with 42 as random and the welcome text as body.

Simple.

The __root list

So far we created the content of our coming soon page, for people to wait. But there is a tricky problem: the page is available at domain.com/coming-soon.

In fact, by default, Troglio will use the card title and sanitize it (remove special characters like spaces, accents etc...) to create the final URL.

But this is not quite what we want right ?! What we actually want is to inform Troglio that this Coming Soon card has to be used as our home page.

This page is a bit tricky as it does not have a specific URL, rather it's the root domain. So, what ? Should we create a card without name ? Nope. For this special case, we created a special card as well as a special list so that it does not mess with the rest of your Trello organization. Namely, you have to create a special list named __root (that will serve to add other settings later) as well as a special card named __home in that new list.

So, coming back to our situation, we should just create the special list __root then drag our card Coming Soon and drop it within that list. After that, we need to tell Troglio to use this card as homepage by renaming it to __home.

That's it. Now our coming soon page should be available at domain.com/.

Home