4. Edit Content in Airship CMS

Content that is changed in the Airship CMS Admin portal will update in both your live site and local development environment. To edit the demo content in the example starter Homepage, follow these steps:


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

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.

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.

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.


Next: Deployment