Eleventy Static Generator

Building Site with Eleventy.


This media also can be read in: [Eleventy - Summary] article

About Me 🙋🏻‍♂️!

my photo

Yet, another underachiever 👻.

But hey, I have my own blog 🎉.

Why Eleventy 🤔?

  • Static Site Generator:
    Focus on frontend: Great theme.
  • Markdown:
    Concentrate more on content.
  • Freedom:
    Flexible Choices of Templating Engine.
  • And More Freedom:
    Filter, Shortcode, Collections.

Why Eleventy 🤔?

This is just an example project. Most you can do with one SSG can be done with other SSG as well.

You are free to use your SSG choice:
Jekyl, Hugo, Eleventy, 11ty, Pelican, Gatsby

Read this concept first: [Presentation - Concept SSG]

Why Nunjucks 🤔?

  • Template Inheritance:
    This is a cool feature.
  • Custom Filter:
    Plain javascript is easier to use.
  • Default Example in Eleventy:
    Mostly because default example in Eleventy is Nunjucks.

Any Expectation 🤔?

  • Case can be applied somewhere else.
    Most stuff applied in other SSG.
    Just don't be a fanatic.
  • An example case for beginner.
    Just another humble example.
  • Starting point for a serious writer.
    After all, making a blog site is easy and fun.

Step of Making Theme 🤔?

  • Eleventy Basic:
    Preparing layout with templating engine.
  • General Design:
    Preparing site wide design.
  • Custom Pages:
    Making necessary Custom pages and Layout.
  • Optional Component:
    Such as static data, widget and pagination.
  • Page Content:
    Meta SEO, TOC, markdown, shortcode,
    syntax highlighting, stylesheet adjustment, MathJax.

Layout changes for each steps

Layout changes for each steps

1: Eleventy Basic 🤠

  • Minimal Layout
  • Partial Layout
  • Configuration
  • Collections

Minimal Layout

The easiest thing to do this is to make a minimal layout, and modified later.

Eleventy: Minimal Layout

[Eleventy - Minimal]

Partial Layout

Just a bit of refactoring.

Eleventy: Extending with Partial Layout

[Eleventy - Layout]

Layout Template

With a very humble result as figure below

Eleventy: Page Content: Index

Configuration

In the heart of Eleventy, you can add:
alias, filter, collections and shortcodes

Eleventy: Configuration Object

[Eleventy - Configuration]

Collections

Manage tags using collections object:
using only plain javascript.

Eleventy: Accessing tag using Collections

[Eleventy - Collections]

2: General Layout 🤠

  • Responsive Page Layout
  • Adding Assets
  • Using CSS Frameworks
  • Standard Layout
  • Using Custom SASS
  • Enhanced Layout

Mobile First Page Design

Eleventy Bulma: Responsive Page Design

Adding Assets

You can add any necessary assets such as: images, css frameworks, and javascript frameworks.

Eleventy Bulma: Assets Tree

Using CSS Frameworks

Using CSS framework such as Bulma or Bootstrap or Custom, can make your life easier.

Eleventy Bulma: Home Page Content

[Eleventy - Bulma - CSS - Part One]

Standard Layout

The base parent layout in Nunjucks.

Eleventy Bulma: Parent Layout

[Eleventy - Bulma - CSS - Part Two]

Standard Layout

Using simple template inheritance with Nunjucks in Eleventy Layout.

Eleventy Bulma: Child Layout

[Eleventy - Bulma - CSS - Part Two]

Using Custom SASS

You desire for a better design.
Further, you can utilize stylesheet
to control your responsive space, or custom component

Eleventy Bulma MD: Home Page Content

[Eleventy - Bulma - SASS - Part One]

Using Custom SASS

Long code tends to get messy.
You need to get organized.

Eleventy Bulma MD: SASS Tree

[Eleventy - Bulma - SASS - Part One]

Enhanced Layout

Using multilevel template inheritance with Nunjucks in Eleventy Layout.

Eleventy Bulma: Child Layout

[Eleventy - Bulma - SASS - Part Two]

3: Custom Pages 🤠

  • Default Custom Index Pages
  • Adding Enough Content
  • Custom Filter
  • Archive Page
  • Blog Page
  • Tags Page
  • Custom Output
  • Nunjucks Layout

Default Custom Index Pages

So far we have this three special index pages.

  • Blog (paginated):
    http://localhost:8080/pages/
  • Archive:
    http://localhost:8080/pages/archive-by-year/
    http://localhost:8080/pages/archive-by-month/
  • Tags:
    http://localhost:8080/tags/
    http://localhost:8080/tags/90s/

Adding Enough Content

Just make sure you have enough content.
With various published date, and various tags.
At least 17 content to simulate responsive pagination later.

Eleventy: Populate with Content

[Eleventy - Custom Index - Content]

Custom Filter

Prepare configuration

Eleventy Bulma: Custom Nunjucks Filter

Archive Page

Start from simple archive list with plain looks.

Eleventy: Simple Archive Page

[Eleventy - Custom Index - Archive]

Archive Page

Instead of plain looks, you can style custom layout.

Eleventy: Styled Archive Page

[Eleventy - Custom Index - Archive]

Blog Page

With any looks, as creative as you can.

Eleventy: Blog Index Page

[Eleventy - Custom Index - Blog]

Tags Page

Your first attempt to make summary page.
Should begin with just a simple loop.

Eleventy: Simple Tags Page

[Eleventy - Custom Index - Tags]

Tags Page

And then you can make a nicer looks.
From that simple loop above, using bulma's tag class.

Eleventy: Bulma's Tags Badge

[Eleventy - Custom Index - Tags]

Tags Page

You can go further.
By showing tree of pages in this summary page.

Eleventy: Styled Tags Page

[Eleventy - Custom Index - Tags]

Custom Output

Eleventy can generate custom output.
Without adding any plugin.
After all this is just a static page.

Eleventy: Custom Output: JSON

[Eleventy - Custom Output]

Nunjucks Layout

Color Property Propagation

Eleventy: Color Property Propagation

[Eleventy - Nunjucks - Layout]

Nunjucks Layout

Mobile First Content Design

Eleventy Bulma: Responsive Content Design

Nunjucks Layout

Responsive Index Columns

Eleventy: Responsive Index Columns

[Eleventy - Nunjucks - Index List]

4: Optional Component 🤠

  • More Custom Filter
  • Widget
  • Static Data
  • Pagination

More Custom Filter

Prepare more configuration

Eleventy Bulma: Custom Nunjucks Filter

Widget

Simple Widget
Start from simple, such as plain HTML list.

Eleventy Bulma: Simple Widget Example

[Eleventy - Widget - Simple HTML]

Widget

Nunjucks Loop
You can also put anything in your widget as creative as you are.

Eleventy Bulma: Custom Widget with Loop in Nunjucks

[Eleventy - Widget - Nunjucks Loop]

Static Data

To generate content, such as backlink, internal link, or other stuff.

Eleventy Bulma: Backlink form Github Blog Eleventy Bulma: Backlink form Gitlab Blog

[Eleventy - Widget - Static Data]

Static Data

Now consider link the data.
From this content below.

Eleventy Bulma: Frontmatter: Related Post ID

Static Data

With previous frontmatter.
We can see one or more links in a widget.

Eleventy Bulma: Widget: Related Posts

[Eleventy - Widget - Static Data]

Pagination

Numbering:
Using Nunjucks and Bulma stylesheet,
a common pagination could be achieved.

Eleventy Pagination: Combined Animation Eleventy Pagination: Alternate Animation

[Eleventy - Pagination - Indicator]

Pagination

Responsive:
Using Nunjucks and custom stylesheet,
a responsive pagination also could be achieved.

Eleventy Pagination: Responsive Animation

[Eleventy - Pagination - Responsive]

5: Page Content 🤠

  • Meta SEO
  • Layout: Blog Post
  • Markdown Configuration
  • Shortcode
  • Syntax Highlighting
  • Miscellanous

Meta SEO

Opengraph is a must nowadays.

Eleventy Meta: Telegram Desktop Opengraph

[Eleventy - Meta - SEO]

Layout: Blog Post

Your typical post.njk.
Should contain header, and optionally footer
(such as license) and navigation.

Eleventy Content: Block Post Layout

Layout: Blog Post

A typical post can be seen in preview below.

Eleventy: Post with Header, Footer, and Navigation

[Eleventy - Content - Blog Post]

Markdown Configuration

Be aware of stylesheet adjustment.
Eleventy: Markdown with Stylesheet Adjustment

[Eleventy - Content - Markdown]

Shortcode

We can utilize shortcodes.
To provide link, or to provide image in Eleventy.

Eleventy: Markdown with Stylesheet Adjustment

[Eleventy - Content - Shortcodes]

Syntax Highlighting

Setup in Eleventy is easy
Just be aware with stylesheet conflict with CSS framework.

Eleventy: Syntax Highlighting

[Eleventy - Syntax Highlighting]

Table of Content

Raw HTML.
Useful when you want to add service,
or just plain html such as TOC in figure below.

Eleventy: Raw HTML: Table of Content

[Eleventy - Content - Blog Post]

MathJax

Math Lovers won't forget about this.

Eleventy: MathJax

[Eleventy - Content - Markdown]

What is Next 🤔?

Deploy!
To Github or Gitlab or Bitbucket or Netlify or else.

CI/CD: Github Workflows: Eleventy Runner

[CI/CD - Deploy Overview]

Questions 🤔?

Don't be shy 🙋🏻‍♂️!

The End

🙇🏻

Thank You for Your Time.