Eleventy Soft UI - Open-source JAMstack Starter

Hello Coders!

This article presents an open-source seed project that might help developers to code faster and easier presentation websites and personal blogs. Eleventy Soft UI starter uses 11ty to generate the pages, Prismic CMS for blog articles and Soft UI System, a modern Bootstrap 5 design, for look & feel. The source code is published on Github (MIT License).

Thanks for reading! The relevant links are below:

• 11ty Soft UI Design - product page
• 11ty Soft UI Design - LIVE Demo

Tech stack

Things have been evolved a lot in the web development field in the last few years, and painful tasks like deployment and content editing basically disappeared.

A few years ago WordPress was probably the first option for a simple website and a blog. Now, this picture has diversified and we can build a product with identical features using a bundle of services and tools.

Eleventy Soft UI is just a sample - Here is my stack while coding the project:

• Eleventy (11ty) - provide the tools to generate the pages
• Prismic CMS - to edit the blog content
• LIVE deploy: Netlify or self hosted

How it works

Step #1 - Install Git and Node JS (a decent version 12.x or above)
Step #2 - Clone and install project dependencies
Step #3 - Edit your blog content in Prismic CMS
Step #4 - Start the project in development mode
Step #5 - Edit pages using LIVE reload
Step #6 - Build side for production

The above set up is fully documented in the project README and curios minds can try a build without leaving this page:

Step #1 - Clone this repository

$ 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

$ npm i
// OR
$ yarn

Step #3 - Configure Prismic 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

PRISMIC_REPOSITORY_NAME=YOUR_PRISMIC_API_URL

Step #4 - Start project in development mode

$ 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.

At the end of this simple set up, we should see Eleventy Soft UI up & running in the browser.

Thanks for reading! Let me know your thoughts in the comments about the project and your preferred stack for simple sites and personal blogs. For more resources, please access:

• Eleventy - the official website
• Prismic CMS - official website
• More starters built on top of Soft UI Design System