This content originally appeared on DEV Community and was authored by Sm0ke
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
This content originally appeared on DEV Community and was authored by Sm0ke
Sm0ke | Sciencx (2021-08-07T16:01:24+00:00) Eleventy Soft UI – Powered by Prismic CMS. Retrieved from https://www.scien.cx/2021/08/07/eleventy-soft-ui-powered-by-prismic-cms/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.