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. 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.
- Eleventy Soft UI - product page
- Eleventy Soft UI - LIVE Demo
- Eleventy Soft UI _blog - Page pulled from Prismic
To use the product a decent Nodejs version should be installed in the workstation and (optionally) a Prismic 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 - Contact Footer
Let's build the product
For full instructions please access the product page (docs section).
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
.
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 - the official website
- Prismic CMS - official website
- More static staters provided by AppSeed
Top comments (7)
Contentful
is also a good choice for the headless part. (free tier available).P.S. Thanks for sharing.
๐๐
Amazing design and the stack is perfect.
๐๐
This looks fantastic, thanks so much for putting this together! I'm excited to spin it up and give it a go.
Sm0ke is on ๐ฅ
๐๐