Eleventy Soft UI - Powered by Prismic CMS
Tags: webdev, eleventy, prismic, softui
Published: 2021-08-07 16:01:24

---
title: Eleventy Soft UI - Powered by Prismic CMS
published: true
description: Open-source project built with Eleventy (11ty) and Prismic CMS on top of Soft UI Design System
tags: webdev, eleventy, prismic, softui
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dldsub7ldhr467pehvd.png
canonical_url: https://appseed.us/product/eleventy-soft-ui
---
Hello coders,

This article presents an open-source starter built in **Eleventy** and **Prismic CMS** on top of a modern Bootstrap 5 design: [Soft UI Design](https://appseed.us/product/eleventy-soft-ui). The product can be used to code much faster presentation websites or personal blogs. For newcomers, **Eleventy** is a lightweight static-site generator and **Prismic CMS** provides a headless blog service.   

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---


- [Eleventy Soft UI](https://appseed.us/product/eleventy-soft-ui) - product page
- [Eleventy Soft UI](https://eleventy-soft-ui.appseed-srv1.com/) - LIVE Demo
- [Eleventy Soft UI _blog](https://eleventy-soft-ui.appseed-srv1.com/blog/about/) - Page pulled from Prismic


---

![Eleventy Soft UI - Open-source static site powered by 11ty, Prismic and AppSeed.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guwdqi549lwqkvsydphc.png)

--- 

To use the product a decent Nodejs version should be installed in the workstation and (optionally) a [Prismic](https://prismic.io/) account (free tier available). 

> The problem that starter solves

Static sites are great to code simple pages and presentation sites .. but for blogs developers should use a Markdown to Html translation to edit their content. Prismic help us with this part and empower the developer to edit and format the content visually. 

--- 

> How it works 

- **Step #1** - Add your content in Prismic CMS

- **Step #2** - Configure the starter to consume the Prismic Content

- **Step #3** - Install dependencies and start the project

- **Step #4** - Built for production 

--- 

Once all steps are completed, **Soft UI 11ty** should be up and running in the browser will all Prismic articles pulled locally.

--- 

> 11ty Soft UI - Team Section

![11ty Soft UI - User profile Page, provided by Eleventy, Prismic and AppSeed.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5w4nrjhqnvft0higq00e.png)

---

> 11ty Soft UI - Contact Footer

![11ty Soft UI - Fancy footer, provided by Eleventy, Prismic and AppSeed.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjrhfqz5of77mquemh62.png)

---

## Let's build the product

For full instructions please access the **[product page](https://appseed.us/product/eleventy-soft-ui)** (docs section).  

---

> **Step #1** - Clone this repository

```bash
$ git clone https://github.com/app-generator/eleventy-soft-ui-design.git
$ cd eleventy-soft-ui-design 
```

---

> **Step #2** - Install modules via NPM or Yarn

```bash
$ npm i
// OR
$ yarn
```

---

> **Step #3** - Configure [Prismic](http://prismic.io/) API Node

Rename `.env.sample` to `.env` and specify the `PRISMIC_REPOSITORY_NAME`. In case you are not familiar with `Prismic`, feel free to use the `DEMO API` provided by AppSeed: `https://eleventy-soft-ui-design.prismic.io/api/v2`

```env
PRISMIC_REPOSITORY_NAME=YOUR_PRISMIC_API_URL
```

---

> **Step #4** - Start project in development mode

```bash
$ yarn start
```

Once the project is compiled and the content is pulled from `Prismic`, the project can be visited in the browser: `http://localhost:8080`.

---

From this point the starter can be used to code simple websites and personal blogs using a modern stack and a pixel-perfect UI crafted by **Creative-Tim**.

--- 

> Thanks for reading! For more resources please access:

- [11ty](https://www.11ty.dev/) - the official website
- [Prismic CMS](https://prismic.io/) - official website
- More [static staters](https://appseed.us/static-site) provided by **AppSeed**