Goal: Explanation of Eleventy Repository Step By Step

I have been very busy lately. I can’t playback yesterday when I have time to write my blog. So here is the summary of Eleventy material that I have made.


Eleventy Materialize Test Drive

An example of 11ty site using Materialize for personal learning purpose.

11ty + Nunjucks + Materialize

Eleventy Materialize: Preview

Demo Site

Eleventy Step By Step

This repository:

Materialize Step By Step

Additional guidance:

Chapter Step by Step

Tutor 01

Generate Only Pure HTML

  • Eleventy Configuration

  • Layout: Base, Page, Post, Home, Archives, Index

  • Layout: Tags List and Generate Each Tag Name (Using Pagination)

  • Basic Content

Eleventy Materialize: Tutor 01

Tutor 02

  • Add Materialize CSS

  • Nice Header and Footer

  • Enhance All Layouts with Materialize CSS

Eleventy Materialize: Tutor 02

Tutor 03

  • Add Custom SASS (Custom Design)

  • Apply Two Column Responsive Layout for Most Layout

  • Nice Badge in Tags Page

Eleventy Materialize: Tutor 03

Tutor 04

  • More Content: Lyrics and Quotes. Need this content for demo

  • Simplified All Layout Using Nunjucks Template Inheritance

  • Configuration Stuff and Helper: Filter, Collection, Shortcodes

  • Archives: Simple, By Year, List Tree (By Year and Month)

  • Tags: List Tree

  • Excerpt (

): Read More Separator

  • Custom Output: JSON

Eleventy Materialize: Tutor 04

Tutor 05

  • Multi Column Responsive List: Tag, and Archive

  • Widget: Friends, Archives Tree, Tags, Recent Post, Related Post

  • Pagination: Adjacent, Indicator, Responsive

  • Post: Header, Footer, Navigation

Eleventy Materialize: Tutor 05

Tutor 06


  • Layout: Service

  • More Pagination: Archive

  • Post: Markdown Content

  • Post: Table of Content

  • Post: Responsive Images

  • Post: Shortcodes: pathPrefix, image

  • Official Plugin: Syntax Highlight, RSS

  • Meta: HTML, SEO, Opengraph, Twitter

Eleventy Materialize: Tutor 06

What do you think ?