City theme for Storyblok

A Storyblok theme with liquid and our render service to simply start your website with us.

Visit it here:

https://city.me.storyblok.com/

What is a storyblok theme

If you want a hosting with our Rendering Service so you won't have to setup a server on your own you can directly choose from one of our themes. Checkout the theme documentation to know more about the template syntax.

How can I start with a theme

The most efficient way to start a storyblok project as a developer would be our Command Line Interface.

npm i storyblok-cli -g
storyblok

and choose your theme. You can of course simply download or clone this repository as well.

1. git clone https://github.com/storyblok/city-theme
2. Rename _token.js to token.js and insert your theme token. You can find your theme token in the space settings of the Storyblok app.
3. Replace INSERT_SPACE_ID with your space id and INSERT_YOUR_DOMAIN with your domain in config.js. You can find your space id and domain in the space settings.
4. Run npm install
5. Run gulp
6. Ready! You can now edit the templates in views or defining css in the source folder.

Start your local environment

Make sure npm is installed:

## Install all frontend development related dependencies.
npm install

## This will start up a proxy for the render service on :4200.
gulp

Folder structure

• /source/ The place where you should put all your scripts, styles source code.
• /views/ All your layouts and components at one space - if you add a new or change an existing Liquid component (.liquid) the gulp build will trigger an instant reload for you in the browser - also each component is a representation of a storyblok component. If you create a headline component in storyblok - make sure to create a headline.liquid as well - so this application knows which component to render.

You want to know more about storyblok?

• Prologue - Introduction
• Terminology - Introduction
• Content Delivery API - Introduction

Local HTTPS / SSL without errors (Mac OS):

1. https://certsimple.com/blog/localhost-ssl-fix
2. Rename _cert.js to cert.js and insert paths to your key.pem and cert.pem.