Eleventy Static Generator
Building Site with Eleventy.
This media can also be read in: [Eleventy - Summary] article
About Me 🙋🏻♂️!
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:
Jekyll, 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
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.
Partial Layout
Just a bit of refactoring.
Layout Template
With a very humble result as figure below
Configuration
In the heart of Eleventy, you can add:
alias, filter, collections and shortcodes
Collections
Manage tags using collections object:
using only plain javascript.
2: General Layout 🤠
- Responsive Page Layout
- Adding Assets
- Using CSS Frameworks
- Standard Layout
- Using Custom SASS
- Enhanced Layout
Mobile First Page Design
Adding Assets
You can add any necessary assets such as: images, css frameworks, and javascript frameworks.
Using CSS Frameworks
Using CSS framework such as Bulma or Bootstrap or Custom, can make your life easier.
Standard Layout
The base parent layout in Nunjucks.
Standard Layout
Using simple template inheritance with Nunjucks in Eleventy Layout.
Using Custom SASS
You desire for a better design.
Further, you can utilize stylesheet
to control your responsive space,
or custom component
Using Custom SASS
Long code tends to get messy.
You need to get organized.
Enhanced Layout
Using multilevel template inheritance with Nunjucks in Eleventy Layout.
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.
Custom Filter
Prepare configuration
Archive Page
Start from simple archive list with plain looks.
Archive Page
Instead of plain looks, you can style custom layout.
Blog Page
With any looks, as creative as you can.
Tags Page
Your first attempt to make summary page.
Should begin with just a simple loop.
Tags Page
And then you can make a nicer looks.
From that simple loop above, using bulma's tag class.
Tags Page
You can go further.
By showing tree of pages in this summary page.
Custom Output
Eleventy can generate custom output.
Without adding any plugin.
After all this is just a static page.
Nunjucks Layout
Color Property Propagation
Nunjucks Layout
Mobile First Content Design
Nunjucks Layout
Responsive Index Columns
4: Optional Component 🤠
- More Custom Filter
- Widget
- Static Data
- Pagination
More Custom Filter
Prepare more configuration
Widget
Simple Widget
Start from simple, such as plain HTML list.
Widget
Nunjucks Loop
You can also put anything in your widget as creative as you are.
Static Data
To generate content, such as backlink, internal link, or other stuff.
Static Data
Now consider link the data.
From this content below.
Static Data
With previous frontmatter.
We can see one or more links in a widget.
Pagination
Numbering:
Using Nunjucks and Bulma stylesheet,
a common pagination could be achieved.
Pagination
Responsive:
Using Nunjucks and custom stylesheet,
a responsive pagination also could be achieved.
5: Page Content 🤠
- Meta SEO
- Layout: Blog Post
- Markdown Configuration
- Shortcode
- Syntax Highlighting
- Miscellanous
Meta SEO
Opengraph is a must nowadays.
Layout: Blog Post
Your typical post.njk.
Should contain header, and optionally footer
(such as license) and navigation.
Layout: Blog Post
A typical post can be seen in preview below.
Markdown Configuration
Be aware of stylesheet adjustment.
Shortcode
We can utilize shortcodes.
To provide link, or to provide image in Eleventy.
Syntax Highlighting
Setup in Eleventy is easy
Just be aware with stylesheet conflict with CSS framework.
Table of Content
Raw HTML.
Useful when you want to add service,
or just plain html such as TOC in figure below.
MathJax
Math Lovers won't forget about this.
What is Next 🤔?
Deploy!
To Github or Gitlab or Bitbucket or Netlify or else.
Questions 🤔?
Don't be shy 🙋🏻♂️!
The End
🙇🏻
Thank You for Your Time.