Quickstart Guide

Follow this Quickstart Guide to set up your first project with Airship CMS.

Note: Airship is currently available by Private Invitation only. You won't yet be able to generate your own site yet. Request a Test Pilot License, and we will contact you when a seat opens up!


Be sure to use your actual subdomain wherever you see a reference to "mysite":

  • https://mysite.airshipcms.io
  • https://mysite.airshipcms.io/admin
  • airship login mysite

1. View your site

Navigate to your site url (https://mysite.airshipcms.io). It will look something like this:

Browser Initial

2. Log in to your site.

Log in to the admin portal (https://mysite.airshipcms.io/admin) with your login credentials.

CMS Login

Once you log in successfully, you should see a welcome message:

CMS Dashboard

Keep this window open. You will need to access it later.

3. Install Airship Launcher CLI Tools.

Command line tools are available for Mac, Linux, and Windows(beta). You must install the Airship Launcher in order to be able to login and sync files between your local development environment and the Airship server. Non-developer admins and content creators don't need to install the CLI tools. See the Install page for Mac and Linux or Windows (beta) install instructions.

You only need to install the CLI tools once on your machine. If you have already done this, you can skip this step.

4. Create a local directory for your project.

Create a new empty directory for your project.

mkdir ~/MyFirstAirshipSite

If you use a source code management tool like Git, you can initialize this directory as a versioned project. Commit all files, including the hidden .airship directory.

5. airship login to access your project content.

Navigate to your project directory:

cd ~/MyFirstAirshipSite

Inside your project directory, run this command (replace "mysite" with your actual subdomain):

airship login mysite

Auth0 Popup

A browser window will pop up prompting you to login.

Auth0 Popup

Once you log in successfully, you can close the browser window. Your terminal should read:

Successful Authentication.

Auth0 Popup

6. airship land to retrieve files.

Inside of the ~/MyFirstAirshipSite directory, run this command to download the base set of files that were generated when you set layouts and templates for your pages and collections:

airship land

Auth0 Popup

Enter y to the prompt.

Auth0 Popup

Running airship land will generate a compartments directory containing very basic Airship files that are necessary for building out your project templates.

Auth0 Popup

7. Open your local files in a text editor.

Open your entire directory in a text editor. This Quickstart Guide uses SublimeText 3. Your local directory structure should look something like this:

.
├── .airship
│  └── name
└── compartments
   ├── airmail
   ├── assets
   ├── layouts
   │   └── application.html
   ├── partials
   └── templates
       └── root.html

In SublimeText 3 it looks like this:

Text Editor Initial

8. airship serve to run your site locally.

Start a local development server by using the Airship Launcher serve command.

airship serve

Text Editor Initial

Leave this terminal open during development in order to maintain an active connection to the airship server.

9. View your local site in a browser.

In a browser, navigate to localhost:9001. You will see actual site content, rendered with your local layouts, templates, and assets. It should look exactly the same as the content on the live site:

Browser Initial

10. Edit the Homepage content. See it update locally & live.

Go to the Airship CMS admin panel for your site, and click on "Pages" in the sidebar.

CMS Homepage Initial

Click the pencil icon pencil for the "Homepage" of your site. It should look like this:

CMS Homepage Initial

Edit content.

CMS Homepage Initial

Save the page. Wait a few seconds, then refresh both your live site url in one tab (https://mysite.airshipcms.io) and your local site url in another tab (http://localhost:9001). You will see the content update in both instances of the site. Sometimes it takes a few refreshes or a hard refresh to show content changes.

Local Site:

CMS Homepage Initial

Live Site:

CMS Homepage Initial

11. Edit the Homepage template. See it update locally (and not update live).

Back in your text editor, open the root.html template located in /compartments/templates. Edit the button text. Save the file.

CMS Homepage Initial

Refresh both your live site url in one tab (https://mysite.airshipcms.io) and your local site url in another tab (http://localhost:9001).

Local Site:

CMS Homepage Initial

Live Site (same as before):

CMS Homepage Initial

You will see that the markup has changed only in the local instance of your site. This is because in your local site, the page is rendered based on local files & published content, whereas the published site renders published files & published content.

12. See available properties and fields for a page with {{{help}}}.

On the root.html template add following markup at the very top of your page. Save the file.

{{{help}}}

In SublimeText 3, it will look like this:

Text Editor Help

In your browser, refresh your local site url (http://localhost:9001) and you will see a list of properties:

Browser Help

Items in this list are the variable names for data that can be rendered on the root page. The items listed inside the fields property correspond to fields that are set for the root page in the wrench Page Modify section in Airship CMS admin:

CMS Modify

Content from Airship CMS is rendered by adding markup with the exact variable name listed in the {{{help}}} list, contained by double curly braces.

13. Add a new field to the page.

Add a New Field

On the Page Modify view in Airship CMS admin, add a new field to the page. This example adds the field New Box, type text.

CMS Modify

Once the field is added to the list of fields, it will look like this:

CMS Modify

Save the Modify view. If you refresh any browsers (locally or live), the new field will not show because it has no value set, and it has not been added to the page markup.

Add a Value for the New Field

Click the pencil icon pencil for the "Homepage". Add some text for the new field "New Box":

CMS Modify

Refresh the browser for your local site

Refresh the browser for the local site. You will see the new field "new_box" added to the list of available page properties.

CMS Modify

Add markup for the new field

In your text editor, add markup to render the new field content:

{{fields.new_box}}

CMS Modify

You can comment out or delete the help markup if you don't need it anymore. The help list is meant to be a useful reference to help you while you are developing locally. {{{help}}} will not render anything on published sites.

CMS Modify

Refresh the browser for your local site

Refresh the browser for the local site. You will now see the content rendered for the new field.

CMS Modify

If you refresh the browser for the live site, you won't see the new field. You will need to run airship launch to make your changes live.

14. airship launch to publish your project.

Once you are ready to launch your site, run this command to upload your local templates, layouts, and files to the live airship server:

airship launch

CMS Modify

When you are ready, enter y or yes to launch the project. In seconds, your project will be published!

CMS Modify

Refresh the browser for the live site, and it should match your local site.

CMS Modify


You're Done!

That's all it takes to edit content, create pages, and publish a project! From here, it's up to you to decide how small or large you want to make your project!


New Developers:

Brand new developers are encouraged to build a small sample project before starting on a big project. Download the Git Repository & follow the guide for one of these example projects:

Experienced Developers:

Read through the Documentation. You can build much more complex projects than websites using a combination of classically-rendered templates, and dynamically rendered components that access content through Airship API.

Many Airship Developers use client-side frameworks, libraries, as well as gulp or npm processes to create custom development workflows that dynamically render content from the CMS. Airship is compatible with javascript frameworks such as React, Angular, and Angular 1.x, so you can build project components or entire sites that use client-side rendering alongside classically-rendered templating. Study the Airship API or build one of our example projects that pull content from the CMS using Airship API and a section of the project or the entire project with a single-page application: