About The Project

February 1, 2021 | 1 min Read Time

Eleventy Soft is an Eleventy (11ty) adaptation of Soft UI Design System (a user-friendly and beautiful design system based on Bootstrap 5), including a Blog system that uses Prismic CMS for content management. The product can be used to build presentation websites and blazing fast blogs.

Features

  • SSG: Eleventy (11ty)
  • Prismic CMS for blog posts
  • CSS Pipeline (Sass, CleanCSS)
  • JS Bundling (Webpack)
  • SVG Icon Sprite Generation
  • Critical CSS, HTML Minification

11ty Soft UI Design - Open-source Eleventy starter configured for prismic.

Compile from sources

To build the project without errors a decent version of NodeJS is necessary >= 12.xx.

Step #1 - Clone the sources

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

// Contents of `.env` file:
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"

Eleventy Soft UI Design - Cover image

Step #5 - Production Build

$ yarn build

Deploy to Netlify

  • Upload the local repository you set up to Github.
  • Go to https://app.netlify.com. Once you’ve logged in, click the 'New site from Git' button and choose the forked repository you just created.
  • Follow the prompts, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete.
  • When you get to deploy & build settings, you need to add your Prismic repository API endpoint as an environmental variable named PRISMIC_REPOSITORY_NAME

Netlify Deploy Set up

Links & Resources