Quick Start

Let's walk through the steps to get from a blank project in Cicerone to a very simple static website.

Set Up a New Project

Open the Cicerone Editor and select "New Project" from the File menu or from the welcome dialog. You will be prompted to select an empty folder.

Note:Cicerone Projects are stored in folders (as opposed to self-contained files) and include a JSON file and an assets folder.

Click on your project's root node to reveal the Node Details pane.

Expand the Raw Node section and click on Append New Node.

This creates a new node as a child of our project root node.

Create a Paragraph Partial

After you select a folder Cicerone with a completely blank project.

We will write our content in <p> tags so the first thing we'll do is define a Paragraph partial.

In Node Details for our new node expand the Definitions section and click the Add Partial button.

In the Basics tab select DomTache plugin. This plugin allows us to write HTML directly.

In Plugin Data set the HTML to:


Note:The </p> end tag is not required in HTML 5. However it is not wrong and is sometimes necessary. I include it for robustness but you can create your partial as <p>{{.}} if you like.

In the Slots tab click the Create Rules button and set the Slot Type to Text. This tells Cicerone to allow typing in that slot.

Note:The Unnamed Slot is the {{.}} you put in your <p> tag. you are telling Cicerone to allow typing text there.

Click the Save button at the bottom of the screen to save the Paragraph partial definition

Create an HTML Page

Now that we have a reusable paragraph partial, let's create some HTML to wrap our page and give ourselves a place to insert Paragraphs.

This is similar to the previous steps but we will create an "ad-hoc" partial.

In the Basics section of the same node click Create Ad Hoc Partial button.

Note:An Ad-Hoc Partial allows us to create some HTML for a Node without having to create a named definition. See Partials and Slots.

In the Basics tab select DomTache plugin.

In the Plugin Data tab, create a very simple skeleton of an HTML page. Put {{.}} in the <body> tag. This will be the one slot of our page.

In the Slots tab click the Create Rules button for Unnamed Slot, and set Slot Type to Partials.

Enter "Paragraph" for Default Child. This makes it such that pressing "return" creates a new Paragraph.

Click Save at the bottom of the screen when you are done.

Set Up Output Generation

Let's specify how that HTML page should be output.

In the Node Details pane for the same node expand the Output Generation section.

Click the Generate Here+ control and set a filename for your html page, such as "index". Click Done.

When we generate our project this node and its children will be rendered in index.html.

Next click the add Add Collector+ control.

Set it to collect CSS Rules, and set the filename to "style". This will generate a style.css file with the CSS from Partials used in the page.

Note:Read more about setting up your static site in the Generation explainer.

Write Some Content

In the content tree click the blue index.html link. This opens that page in an editor window.

Click inside the page to focus it.

To the right of your page you can see that Paragraph is a partial that can be inserted in the selected Slot. Click on Paragraph to insert a new Partial Instance.

There should now be a caret blinking on your page. Go ahead and type something.

Since we made Paragraph a default child, pressing Enter creates a new Paragraph and you can keep typing.

Note:If you don't see a caret blinking in your editor, move your mouse to near the top of your page. A "walking ants" rectangle should appear around your empty paragraph. Click in the rectangle to place the caret.

Generate a Static Site

Now let's generate our project. This will create a set of HTML and CSS files and assets that are ready to upload to a static site server.

Go to the File Menu and click Generate Project In... You will be asked to select an empty folder.

Once the project has been generated a notification will appear at the bottom of the Project Panel.

If you make changes to your project you can use the Generate Project Again menu item. Cicerone will generate your project again into the same folder.