How to use Statictastic content manager (CMS)

Getting started

Enabling everyone in a team (or company) to easily update content of a website is essential to have a collaborative environment, where everyone can contribute.

Statictastic enables teams to easily manage their static website content using a built-in CMS system.

This guide assumes that you have:

Introduction

Static websites are amazing, but there is one thing that has always been tricky: content management. In most companies, static websites are not even considered, just because enabling non-developers to make changes is almost impossible, usually requiring glueing many different tools to achieve something useful.

Statictastic offers a simple solution that enables everyone in the team to contribute. Statictastic built-in CMS system enable users to:

  1. Manage formatted text content
  2. Manage simple texts
  3. Manage images
  4. Conditional logic around content

Formatted Text

Formatted texts are one of the most helpful types of content. Almost every content text of a site will be somehow formatted (e.g. use bold, italic or underlined text).

Here are a few examples where you can use formatted texts:

  1. Homepage content
  2. Company and product descriptions
  3. Legal terms and Privacy
  4. Marketing campaign

Let’s create your first formatted text content.

Go to the “Content” section and click on the “Create” button:

Content List

You’ll see a text editor with formatting controls. In our example, we are going to create a text to be used in the company description page:

Create Content

The field “Name” is important because it is used to identify your content. Make sure you use a descriptive name.

Besides formatting the text itself (e.g. bold, italic, lists, links, etc), the text editor also supports the inclusion of images, by simply dragging images into the text editor:

Image within text

Once you are done with the text content, click on the button “Save”. You’ll be redirected to the content list, where the content you created will be displayed:

Content List

The list has three columns:

  1. Name: The name you gave to the content
  2. Type: The type of the content, which can be: Formatted Text, Text or Image
  3. Identifier: The value which will be used in the site’s code, to merge the dynamic content into your static site (more about it in the Using the Content you created section).

Texts

There are some cases where formatted texts are not a good fit. To such cases, Statictastic offers a way to create simple texts without formatting.

Here are a few examples where you can use simple texts:

  1. Page titles
  2. Special tags (Meta description, Meta title, keywords, etc)
  3. Text to be used in code (e.g. Javascript, XML, RSS, etc)

Let’s create a simple text content using Statictastic. Go to the “Content” section and click on the “Create” button. It will show three different options (Formatted Text, Text and Image). Click on the “Text” option:

Popup menu

You’ll see a form where you can define the name of the content and its text value. In our example, we are going to create a text content to be used as part of the page title:

Text Content

Click on the button “Save”. You’ll be redirected to the content list, where you can see the text content you have just created:

Text Content

Images

It’s almost impossible to find a site without images. Usually, they are present in a way or another in every page of a site. They are quite flexible and can “translate” an idea that a thousand-word length text can’t.

Here’s a few examples where you can use images:

  1. Company logo
  2. Icons
  3. Photos
  4. Product screenshots

Let’s create an image content using Statictastic. Go to the “Content” section and click on the “Create” button. It will show three different options (Formatted Text, Text and Image). Click on the “Image” option:

Popup menu

You’ll see a form where you can define the name of the content and upload an image. In our example, we are going to create an image to be used as the company logo:

Content List

Click on the button “Save”. You’ll be redirected to the content list, where now you can see all the three content you have created:

Content List

Using the content you created

Now that you created a content item, it’s time to use it in your site. On the first time, it will require a developer to integrate the code. After the integration of the code, then no code change will be necessary and all the content updates can be performed using the “Content” section of Statictastic.

Let’s integrate both “Company Title” and “Company Description” contents at once. When integrating a content as part of your site, you’ll use the “Identifier” field of the content. It can be found in the third column of the “Content” section:

Content List

In your site’s code, you can use the identififers on the following way:

You can see the use of [[= and ]] in the example. Those blocks are the content output markers, which tell Statictastic to get the value of the dynamic content you created and include them in that part of the code.

Whenever you publish a new version of your site, Statictastic will look for the [[= IDENTIFIER NAME ]] markers and replace them with the real value of the content.

Taking the code above as example, imagining we have set the content of both “Company Title” and “Company Description” as shown in this guide, it would result on the following code:

As you can see, the content you defined was replaced in the gaps you included your content output markers.

After integrating the content output markers, you can now easily change the value of your content. Every time you publish a new version, the content you defined will be updated. It means that everyone can from now one change the content whenever it makes sense.

Conditional Logic

There are some cases where you can’t guarantee a specific content exists. In such cases, you should use conditionals to check whether the content exists or if you need to use default content instead.

The use of conditionals is really helpful on a number of scenarios:

  1. You want to use content as flags to enable and disable specific areas of your site (e.g. if the content “Xmas” exists, show the Christmas box, otherwise hide it).

  2. You have content that only changes on special occasions and want to use the default version, but is able to change when necessary

  3. Your development team will include all the content output markers at once, but you still haven’t created all the content items in the CMS

Enough said, let’s see conditionals in action. Take a look at this code:

As you can see, additionally to the the content output markers ([[= IDENTIFIER NAME ]]), there is also conditional blocks ([[ if IDENTIFIER NAME]] ... [[ end ]]).

Their semantics are quite simple:

Based on the example above, let’s check the two cases.

When company_title exists

If there is a content item with the company_title identifier in your Statictastic account, then the content of the if statement will be merged during the publication time, resulting in the following output:

When company_title doesn’t exist

If for some reason deletes the company_title content or if you have never created it in the first place, then the unless statement will be used, resulting in the following output:

Next steps