Aller au contenu

Getting Started with Ekit

👉 Explore the Ekit platform and start building:
👉 Explore Ekit

This guide will help you go from zero to a live, data‑driven website in just a few minutes. No backend code is required.

1. Create an Account

  1. Go to the Ekit website
  2. Create a new account
  3. Log in to access the dashboard

Once logged in, you will see your project dashboard.

2. Create Your First Project

  1. Click New Project
  2. Choose a project name
  3. Select a default language (for example en or fr)
  4. Confirm

You now have an empty project, ready to be configured.

3. Create Your First Table (Content)

In Ekit, tables store your content. A table can represent articles, pages, products, or any custom content type.

Example: Articles table

  1. Create a new table named articles
  2. Add the following fields:
  3. title (text)
  4. content (rich text)
  5. image (file)
  6. Save the table

Add content

Create one or two records in the table: - Add a title - Add some text content - Upload an image

Your data is now ready to be displayed.

4. Create Your First Page (Template)

Templates define how your content is displayed.

Create a view

  1. Open the views folder
  2. Create a new file called index.hbs

Declare a datasource

At the top of the file, add a YAML frontmatter:

---
datasources:
  articles:
    from: articles
    limit: 5
---

Display content

Below the frontmatter, add:

<h1>Latest articles</h1>

{{#each ekdata.articles}}
  <article>
    <h2>{{this.title}}</h2>
    <img src="{{ekdbasset this.image}}" alt="">
    <div>{{{this.content}}}</div>
  </article>
{{/each}}

This template: - fetches data from the articles table - loops through the records - renders text and images

5. Preview Your Site

  • Open the live preview
  • Modify a record (title, image, content)
  • See the page update instantly

Your site is already dynamic and multilingual-ready.

6. URLs and Languages

Ekit uses clean, SEO-friendly URLs with optional language prefixes and slug-based routing.

URL Examples 

/
/fr
/en
/fr/blog
/fr/blog/my-article
/blog/my-article

Routing Rules

  • The language segment is optional
  • If present, the first segment defines the active language
  • The first page segment maps to the current view
  • If no view is present, index is used by default
  • The second page segment is used as the slug
  • Query parameters can be used for filtering or dynamic behavior

Example:

/fr/blog/my-article

Using Query Parameters

Query parameters are optional and can be used for filtering or dynamic pages.

Example: ` /blog?category=news /blog/my-article?preview=true

In Templates You can access routing values directly in your templates:

{{params.lang}} {{params.view}} {{params.slug}} {{query.category}}

7. What You Just Built

You have created: - a project - structured content (tables and records) - a dynamic site powered by data - a clean, multilingual URL structure

All without writing backend code.

8. Next Steps

Now that your site is working, you can explore:

  • Template syntax and helpers
  • i18n static translations with ektrans
  • Reusable components with partials
  • Advanced layouts
  • Pagination and filtering

Final Note

Ekit is designed to let you focus on content and structure, while the platform handles data, rendering, and multilingual routing.

You are now ready to build real websites with Ekit.