Thank you for landing on this page. This article presents a shortlist with open-source boilerplate code, prototyped on top of Eleventy SSG. All projects presented here, are generated by the AppSeed platform using a semi-automated process:
- Phase #1 - the flat HTML design is processed using an HTML parser. During this phase all assets and components are extracted and prepared to become production-ready: extract the master layout, remove hard coded strings with real variables
- Phase #2 - Inject the UI components into a real boilerplate and add the necessary glue to have a functional project.
Using this simple workflow we are able to generate apps in different architectures and patters using only flat HTML design as input.
Curious how AppSeed works? More information in this articles: App Generator - The Modern Way, How I’ve built 100+ open-source apps with automation tools - a popular article published on Dev.to platform
Now back to our static sites, let's say few words about Eleventy SSG.
What is Eleventy
- Eleventy can be easily integrated into existing projects, based on his flexible configuration.
- Most static site generators use a single type for the source files: Markdown is probably the most popular, Liquid, Handlebars .. etc. Well, Eleventy supports many formats and the developer can choose the type is most comfortable with.
- Being a part of the NPM ecosystem, any compatible Node.js module can be used along with Eleventy.
In case you didn't use it before, might be a good idea to play a little with this SSG.
In a rush? All static site boilerplates are published on Github on a dedicated repository. In case you like one, just grab the code and build an amazing project.
Static Site prototyped on top of Eleventy SSG with Ethereal Design, crafted by Html5 Up. Features: Webpack, Babel, Sass/SCSS, PostCSS, Light-server
In case you want to build the project, without leaving this page, just type a few commands in a terminal window:
$ # clone sources $ git clone https://github.com/app-generator/eleventy-html5up-ethereal.git $ cd eleventy-html5up-ethereal $ # install modules & start the app $ yarn # install modules $ yarn dev # start in development mode $ # app is running on http://localhost:4000
If all goes well, you might visualize the app in your preferred browser. App Links:
Paradigm is just another nice design crafted by Html5Up agency. By using this static site boilerplate you can build simple sites and landing pages with ease.
In case you want to build this design as a static site, please type in a terminal window:
$ # clone sources $ git clone https://github.com/app-generator/eleventy-html5up-highlights.git $ cd eleventy-html5up-highlights $ # install depencies $ yarn # install modules $ yarn dev # start in development mode $ # app is running on http://localhost:4000
If all goes well, the Highlights Static Site is runing in your browser. Yupii!
This playful design is provided by the same Html5Up agency and the static site can be generated with ease just by typing a few lines of code:
$ # clone the sources $ git clone https://github.com/app-generator/eleventy-html5up-dopetrope.git $ cd eleventy-html5up-dopetrope $ # start the app in development mode $ yarn # install modules $ yarn dev # start in development mode
After all modules are downloaded and compiled on your workstation, the apps should be visible in the browser:
Other Static Site Boilerplates
- Eleventy Astral - design Html5Up
- Eleventy Fractal - design Html5Up
- Eleventy Stellar - design Html5Up
- Eleventy Photon - design Html5Up
- Eleventy Miniport - design Html5Up
- Eleventy TXT - design Html5Up
- Eleventy Aerial - design Html5Up
- Eleventy Tessellate - design Html5Up
- Eleventy Helios - design Html5Up
- Eleventy Alpha - design Html5Up
- Eleventy Landed - design Html5Up
Static Sites Resources
- Eleventy site generator - the official site
- Static Sites Boilerplates - full index published on Github
- Eleventy Intro - a nice Eleventy tutorial for newcomers
- Static Site - index provided by AppSeed
Where to go from here
- Access the official repository to see what we are providing
- Generate a full-stack app in minutes using our service
- Need support? We are providing 24/7 LIVE support via Discord and eMail for paid plans.
- Follow us on Twitter and Facebook