Start building sites

Learn how to start building sites on Blutui

Create your first site

With Blutui you can create an unlimited number of development websites. A development website is a free site with a password page. When you are ready to publish your website to the world, a recurring monthly fee will apply. Before we get started, you will need a Blutui account.

Steps:

  1. Login in to your Blutui Console.
  2. Click Sites in the navigation menu.
  3. Click Create Site.
  4. Select the Blank option for a basic Canvas.
  5. In the Site Name section, give your new site a name. You can set additional information about the site, such as Description and Timezone.
  6. Click Create Site.

Note: The site name will be converted to the site’s handle. This is the unique identifier for your site. Example: A site called "My New Site" will have the handle "my-new-site".

Once your new website is setup and ready to go, click the Login button to access your new site's dashboard.

Install Blutui Courier

Blutui Courier is a cross-platform command line tool that is used to build Blutui sites locally.

If you haven’t already, now is the time to install Blutui Courier. To install Blutui Courier follow the Getting Started with Blutui Courier guide.

Creating a new page

Lets create a new page.

Steps:

  1. Login to your newly created site. (eg: my-new-site.blutui.com/admin)

  2. From the Site Dashboard, click Pages.

  3. Click the + button at the bottom of the page.

  4. Enter the information for your page. The Layout is the file path to the page template. For best practice it is recommended that you create your page templates in the pages directory of your Canvas.

  5. If you have not created the page template, go to the pages directory in your Canvas template files and add your page. For example if you set the Layout to pages/about.html, add about.html to your pages directory.

In your newly created Canvas template add the following code:

{% extends 'templates/default' %}

{% block body %}
  <!--This is where your page code goes-->
{% endblock %}

For more information on the Canvas templating language, read the Introduction to Canvas guide.

Menus

Now you have a few pages. Let's look at creating a menu. To start you want to go to Menus in the Site Dashbord. Then click Create Menu. You will need to add a Name and Handle. Now you add all your menu items.

Now that you have a menu, you should learn how to add it to your Canvas. To do this you would set an object equal to cms.menu('[your-menu-handle]'). The example below shows you how to loop through your menu items:

{% set menu = cms.menu('main') %}

{% for item in menu.items %}
   <a href="{{ item.href }}">{{ item.label }}</a>
{% endfor %}

For more information about the cms.menu() function, read the cms.menu function guide.

Content

Now that you have some pages and a menu, you might want to create some editable content. The first way to display content on your page is to use the cms_{component} functions. This will allow you to edit the content in Blutui Canopy, the in-page editor.

In this example we'll add a text area on your canvas. To do this you use cms_text:

{{ cms_text('hero-content') }}

Read the cms_text guide for more information about how to use it in a Canvas. You can find information about other available CMS components in the Canvas > Functions section of the documentation.

Collection

Now you have some content, a menu, a few pages and a set of editable content. These content types are great for static content but what about dynamic content, like products, staff member, locations, galleries and more?

Introducing collections, an easy way to create dynamic content using a wide range of data types.

Basic Collection

Like most items in Blutui it starts in the Site Dashboard. You want to go to Collections and click Create collection. When creating a collection you are setting the fields that you will fill out with content. In this example we are adding a title field, text area and an image data type:

The value of the Name field is used to identify the data type in your code. This is the recommended way to render the collection where you want.

Let's create a template that will render this collection. In this example we called the handle staff, we can create a collections folder in our Canvas views directory called staff.html:

{% set collection = cms.collection('staff') %}

{% for entry in collection %}
  <div>
    <img src="{{ entry.image }}" alt="{{ entry.title }}" />
    <h2>{{ entry.title }}</h2>
    <p>
      {{ entry.text }}
    </p>
  </div>
{% endfor %}

In this example you are calling the collection, setting it to a collection variable and looping through each collection entry to display it the way you want.

Linking two collections

Now that you have a collection, you might want to link a collection with another so you don't have to add the same content twice in both collections.

In this example we'll create a Location collection and link it to our Staff collection, from the previous example. This will allow us to dynamically set the location of each Staff entry, based on the collection entries of Location collection. This is a very simple process. You go to the collection you want to link from and click Manage links. From here click New Link, select the feild that you want to link and a name to call this link:

To get the value of this link in your Canvas, you can access the foreign_keys in the collection entry object. For example:

{{ entry.foreign_keys.location }}

Routing collections

Now that you can create complex collections, you might want to render each collection item on its own page. In our example we might want to have a dedicated page for each staff member. For this you can define routing patterns. To create a routing pattern for a collection:

Steps:

  1. Go to Settings.
  2. Click Routing.
  3. Click the Patterns tab.
  4. Click the + in the bottom right corner.
  5. Select the patterns you need and set the template. In our example we want these collection pages to be /staff/{slug}.

You then want to add the following code in the template you set during the routing pattern creation process. The routing pattern template is a mix of a new page and a collection template:

{% extends 'templates/default' %}

{# Set the collection to the collection variable #}
{% set collection = cms.collection('staff') %}
{# Filter the collection entries to find a collection by the `title` field #}
{% set entry = collection | filter(entry => ((entry.title | slug) == route.data.slug)) | first %}

{% block body %}
  <!-- Code you want to display on this page -->
{% endblock %}

Forms

Now lets add a contact form on your site. Blutui makes the process of making a form simple. It's done similar to making a collection. As normal you create the form in site dashboard. To do this you go to Forms and click Create Form. From here give it a Name, Handle and the Form template location. Now you can add all the fields that you want in your form, you can set the form fields to be requried, add help text and/or placeholder text.

Lets add this form to your code. At the top we want to link macros/form.html since this is where you style your form inputs. The template below is to let you display the input fields the way you want. You can find the code for the macros/form.html macro below:

Blutui form macro.

The form template:

{% import file('macros/form') as ui %}

{{ form_open() }}
    <input type="hidden" name="_form" value="{{ form._form }}">
    <input type="hidden" name="redirect" value="/contact/success">  

    {{ ui.field(form.firstname) }}

    {{ ui.field(form.lastname) }}

    {{ ui.field(form.email) }}

    {{ ui.field(form.phone) }}

    {{ ui.field(form.message) }}

    {{ recaptcha() }}

    <button type="submit" name="submit" value="Submit">Submit</button>
{{ form_close() }}

You can redirect a user when a form is submitted successfully, by setting a redirect URL. In the code above we redirect users to a /contact/success page. We also recommend for you to add recaptcha to your forms to prevent spam.

Blogs

Blog posts are a great way to keep your users updated. Create an unlimited amount of blogs and blog posts for news about the company, announcements or even recipes. The process of making a blog for your site is simple as it follows the same structure as other content types in Blutui. First you start off in the site dashboard where you got to Blogs and create your blog. You will need to add 2 templates one for your blog and 1 for all the blog posts.

More information about blogs coming soon.

Domains

Now that you have built your Blutui site it's time to add your domain(s) to it.

To do this, go to your Blutui Console. Click on Domains and add your domain. Then select the Site you would like to add the domain to. Now you need to verify the ownership of the newly added domain(s). To verify your domain(s), click the How to guide under each domain for full list of instructions to follow.

Once you have added the DNS records on your domain, the process after this point is automated and will come up green and connected depending on your DNS providers speeds. Once your domain is connected Blutui will automatically create an SSL certificate to keep your site secure.

Publishing

Lets do some last minute checks on your website before we publish it to the world. Make sure you can cross each the items on this list, since they help with user experience:

  • Test the form(s)
  • Make sure all static content is editable (Saves you from digging through the code later on).
  • Check all buttons and links are working as they should be.
  • Check site meta content.
  • Test site on multiple internet browsers.
  • Test site responsiveness.
  • Test site on mobile device(s).
  • Add all domains to ReCaptcha and Maps API

Now you are ready to Publish your site for the world to see. On to the next one!