Documentation

Tint is a content management system and hosting provider for static sites, which can be generated by any static site generator. Agencies and others can use Tint to deliver CMS editable websites to clients and non-technical team members without the need for a complex hosting setup or server-side software that needs to be kept updated.

Initially, many features of Tint as built with Jekyll in mind, but in a generic way that can be extended to other systems. Anyone can add support for new formats by contributing.

Getting Started

Getting a fully-editable site online is easy with Tint:

1. Upload your files to any git-enabled provider of your choice
2. Give Tint access to your git repository (for many providers, this is one click)
3. Tint builds and deploys your site to a test subdomain
4. Send invites to the backend editor to your team or clients

Building

Sites are built from source by running make. An example Makefile for jekyll is offered if you don’t have one in your repository.

Software installed by default includes:

• SSH
• Git
• Ruby
• Jekyll
• cURL
• GNU make

the build environment runs on Debian stable and always defaults to the latest versions present in the Debian stable repositories.

Optimisations

Text-based assets (such as CSS and JavaScript) are gzipped during deploy to save time and bandwidth when loading your site. This removes the need for nasty minification hacks that can make your site harder to debug. Everything is served through a CDN for blazing speed and security, with caching-friendly headers that make sure your site always loads as quickly as possible.

Configuration

Tint tries as hard as possible to work with your site out of the box, however some sites need a little bit of extra customisation. Creating a .tint.yml file in the root of your repository lets you customise certain behaviours of the backend. A suggested .tint.yml file for Jekyll sites can be added if you don’t have one already.

Hidden paths

Add a hidden_paths: key with an array of glob patterns to hide from users in the file manager.

hidden_paths:
    - .*
    - Makefile

Select boxes

Add an options: key to restrict the values of certain fields in YAML or frontmatter to a fixed set of options. Use the plural of the key name as the key, and either an array of options or a map of values to the text that will be displayed in the select box.

options:
  weekdays:
    - Sunday
    - Monday
  months:
    jan: January
    feb: February

If you want users to be able to select a file from a particular folder, specify the path as a string. If you don’t want file extensions included, prefix the value with the !basenames tag.

options:
  avatars: "photos/avatars/"
  layouts: !basenames "_layouts/"

Field type overrides

Tint infers what controls to show based on values and key naming conventions (see Editing, below), but occasionally you want to manually specify what control to use:

types:
  date: datetime

Filename Frontmatter

Sometimes you want to keep metadata about a file in its filename. Tint can read this out, show the values in the editor, and update the filename accordingly if you configure this. For a glob pattern you can specify the format of the filename as an array of pieces. Each piece has either a match key with a regular expression or a strptime key with a date format. Pieces that should be considered part of the metadata need to specify the metadata key. Pieces that have no key must have a match regular expression that exactly matches a single string.

filename_frontmatter:
  "_posts/*":
    # Post filenames are formatted as "year-month-day-slug-of-title"
    - key: date
      strptime: '%Y-%m-%d'
    - match: '-'
    - key: title
      match: '[^\.]+'
      format: slugify

Editing

Tint provides an easy-to-use editor for managing metadata on pages as well as data files in YAML format. Values and key naming conventions dictate which controls are shown for a particular key. Supported types include:

• Simple text field (default)
• Select boxes (see the .tint.yml configuration above, use singular key name)
• Multi-select boxes (same as select boxes, but use plural key name)
• Textarea (description, ending in _text, or just long values)
• Rich Text (ending in _markdown)
• Checkbox (for values true or false)
• File upload (ending in _path)
• Date (date or ending in `_date’)
• Time of day (time or ending in `_time’)
• Datetime (datetime or ending in `_datetime’)
• Arrays of the above (ending in plural form)
• Nested arrays and maps

Collections

If you have a folder of files that are all based on the same template (such as a blog post) you can let Tint know about this by including a .template.* file in the folder. Multiple templates are allowed if there are multiple possible file types (different file extensions). A button based on the name of the folder (such as “New Post”) will be displayed that opens the editor initialized with the contents of this template. On save a new file will be created (it is recommended to pair this with the “Filename Frontmatter” feature in order to customise the filenames generated). Tagging a frontmatter value with !now will cause it to be initialized to the current time when the editor is loaded.