Preface
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.
Repository
Eleventy Materialize Test Drive
An example of 11ty site using Materialize for personal learning purpose.
11ty + Nunjucks + Materialize
Links
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
Tutor 02
-
Add Materialize CSS
-
Nice Header and Footer
-
Enhance All Layouts with Materialize CSS
Tutor 03
-
Add Custom SASS (Custom Design)
-
Apply Two Column Responsive Layout for Most Layout
-
Nice Badge in Tags Page
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
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
Tutor 06
Finishing
-
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
What do you think ?