Where to Discuss?

Local Group


Goal: What Eleventy can do in this article series

Making theme consist of these steps:

  • 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 widget and pagination.
  • Page Content:

    • Meta SEO, TOC, markdown, shortcode, syntax highlighting, stylesheet adjustment.


But why?

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.

(Again) 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.
  • Here is the Concept SSG Presentation.

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.

Eleventy: Layout changes for each steps

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.

1: Eleventy Basic

Topics Covered

Minimal Layout

In my early attempt with static site, it is always trying to understand how the theme works. The easiest thing to do this is to make a minimal layout, and modified later. Our minimal theme only need two artefacts. It is home.njk and index..html.

Eleventy: Minimal Layout

Article: Eleventy - Minimal

Partial Layout

Of course you need better than these two. From header, footer, to nice looks stylesheet.

Eleventy: Extending with Partial Layout

With a very humble result as figure below:

Eleventy: Page Content: Index

Article: Eleventy - Layout


In the heart of Eleventy is the configuration files, where you can add alias, filter, collections and shortcodes.

Eleventy: Configuration Object

Article: Eleventy - Configuration


Tags can be managed using collections object, using only plain javascript.

Eleventy: Accessing tag using Collections

Article: Eleventy - Collections

2: General Design

Topics Covered

Mobile First Page Design

Our base layout is based on responsive 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, can make your life easier. Ideal for starter, but custom CSS is more flexible for professional.

Eleventy Bulma: Home Page Content

Article: Eleventy - Bulma - CSS - Introduction

Standard Layout

The base parent layout in Nunjucks.

Eleventy Bulma: Parent Layout

Article: Eleventy - Bulma - CSS - Layout

Using Custom SASS

Use custom SASS when 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

Article: Eleventy - Bulma MD - SASS - Introduction

Enhanced Layout

Using multilevel template inheritance with Nunjucks in Eleventy Layout.

Eleventy Bulma: Child Layout

Article: Eleventy - Bulma MD - SASS - Layout

3: Custom Pages

Topics Covered

Default Custom Index Pages

So far we have this three special index pages.

  1. Blog (paginated):

    • http://localhost:8080/pages/
  2. Archive:

    • http://localhost:8080/pages/archive-by-year/
    • http://localhost:8080/pages/archive-by-month/
  3. 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 ypu need a number of 17 content, to simulate responsive pagination later.

You can add any fake content, that you need. I just prefer songs’s lyric, and movies’s quote.

Eleventy: Populate with Content

Article: Eleventy - Custom Index - Content

Custom Filter

Enhanced custom pages require custom filter. Prepare this setting in .eleventy.js configuration.

Eleventy Bulma: Custom Nunjucks Filter

Archive Page

Start from simple archive list with plain looks.

Eleventy: Simple Archive Page

Instead of plain looks, you can style custom layout.

Eleventy: Tree Styled Archive Page

Article: Eleventy - Custom Index - Archive

Blog Page

You can create any index pages, with any looks, as creative as you can.

Eleventy: Blog Index Page

Article: Eleventy - Custom Index - Blog

Tags Page

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

Eleventy: Simple Tags Page

And then you can make a nicer looks, from that simple loop above, using bulma’s tag class, or any other CSS frameworks

Eleventy: Bulma’s Tags Badge

You can go further, by showing tree of pages in this summary page. This require nested loops.

Eleventy: Styled Tags Page

Article: Eleventy - Custom Index - Tags

Custom Output

Eleventy can generate custom output, without adding any plugin.

Eleventy: Custom Output: JSON

After all this is just a static page. So file type such as JSON or else, managed by web server, instead of generator.

Article: Eleventy - Custom Output

Nunjucks Layout: Color Property

You can override default color in layout, by setting color in frontmatter in page content. Color property propagation in Nunjucks is pretty cool.

Eleventy: Color Property Propagation

Article: Eleventy - Nunjucks - Layout

Nunjucks Layout: Responsive Columns

Index pages can also be displayed in responsive columns, so you can have:

  • One column in mobile screen, and

  • Two columns in tablet screen, and finally

  • Three columns in wide screen.

Eleventy Bulma: Responsive Page Design

The result in browser can shown in figure below:

Eleventy: Responsive Index Columns

Article: Eleventy - Nunjucks - Index List

4: Optional Component

Topics Covered

More Custom Filter

These widgets require more custom filter. Prepare this setting in .eleventy.js configuration.

Eleventy Bulma: Custom Nunjucks Filter


Start from simple widget, such as plain HTML list.

Eleventy Bulma: Simple Widget Example

Article: Eleventy - Widget - Simple HTML

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

Eleventy Bulma: Custom Widget with Loop in Nunjucks

Article: Eleventy - Widget - Nunjucks Loop

Static Data

Utilize 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

Article: Eleventy - Widget - Static Data

Consider link data in a frontmatter from this content below.

Eleventy Bulma: Frontmatter: Related Post ID

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

Eleventy Bulma: Widget: Related Posts

Article: Eleventy - Widget - Static Data


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

Eleventy Pagination: Combined Animation

Eleventy Pagination: Alternate Animation

Article: Eleventy - Pagination - Indicator

Eleventy Pagination: Responsive Animation

Article: Eleventy - Pagination - Responsive

5: Page Content

Topics Covered

Meta SEO

Opengraph is a must nowadays.

Eleventy Meta: Telegram Desktop Opengraph

Article: 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

A typical post can be seen in preview below:

Eleventy: Post with Header, Footer, and Navigation

Article: Eleventy - Content - Blog Post

Markdown Configuration

Be aware of stylesheet adjustment. Some CSS framework such as Bulma, might require adjustment.

Eleventy: Markdown with Stylesheet Adjustment

Article: Eleventy - Content - Markdown


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

Eleventy: Markdown with Stylesheet Adjustment

Article: Eleventy - Content - Shortcodes

Syntax Highlighting

Syntax highlighting setup in Eleventy is easy. Just be aware with stylesheet conflict with CSS framework.

Eleventy: Syntax Highlighting

Article: Eleventy - Syntax Highlighting


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

Eleventy: Raw HTML: Table of Content

Article: Eleventy - Content - Blog Post

Math Lovers won’t forget about MathJax.

Eleventy: MathJax

Article: Eleventy - Content - Markdown

6: Deploy!

To Github or Gitlab or Bitbucket or Netlify or else.

CI/CD: Github Workflows: Eleventy Runner

Article: CI/CD - Deploy Overview


There in nothing more after summary, except this presentation slide.

Consider continue watching [ Eleventy - Presentation Slide ].

Thank you for reading.