Preface
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.
Foreword
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.
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
.
Article: Eleventy - Minimal
Partial Layout
Of course you need better than these two. From header, footer, to nice looks stylesheet.
With a very humble result as figure below:
Article: Eleventy - Layout
Configuration
In the heart of Eleventy is the configuration files, where you can add alias, filter, collections and shortcodes.
Article: Eleventy - Configuration
Collections
Tags can be managed using collections object, using only plain javascript.
Article: Eleventy - Collections
2: General Design
Topics Covered
-
Tutor-04: Mobile First Page Design
-
Tutor-04: Adding Assets
-
Tutor-04: Using CSS Frameworks
-
Tutor-04: Standard Layout
-
Tutor-05: Using Custom SASS
-
Tutor-05: Enhanced Layout
Mobile First Page Design
Our base layout is based on responsive 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, can make your life easier. Ideal for starter, but custom CSS is more flexible for professional.
Standard Layout
The base parent layout in Nunjucks.
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.
Enhanced Layout
Using multilevel template inheritance with Nunjucks in Eleventy Layout.
Article: Eleventy - Bulma MD - SASS - Layout
3: Custom Pages
Topics Covered
-
Tutor-06: Default Custom Index Pages
-
Tutor-06: Adding Enough Content
-
Tutor-06: Custom Filter
-
Tutor-06: Archive Page
-
Tutor-06: Blog Page
-
Tutor-06: Tags Page
-
Tutor-06: Custom Output
-
Tutor-07: Nunjucks Layout: : Color Property
-
Tutor-07: Nunjucks Layout: : Responsive Columns
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 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.
Article: Eleventy - Custom Index - Content
Custom Filter
Enhanced custom pages require custom filter.
Prepare this setting in .eleventy.js
configuration.
Archive Page
Start from simple archive list with plain looks.
Instead of plain looks, you can style custom layout.
Article: Eleventy - Custom Index - Archive
Blog Page
You can create any index pages, with any looks, as creative as you can.
Article: Eleventy - Custom Index - Blog
Tags Page
Your first attempt to make summary page, with just a simple loop.
And then you can make a nicer looks, from that simple loop above, using bulma’s tag class, or any other CSS frameworks
You can go further, by showing tree of pages in this summary page. This require nested loops.
Article: Eleventy - Custom Index - Tags
Custom Output
Eleventy can generate custom output, without adding any plugin.
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.
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.
The result in browser can shown in figure below:
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.
Widget
Start from simple widget, such as plain HTML list.
Article: Eleventy - Widget - Simple HTML
You can also put anything in your widget as creative as you are.
Article: Eleventy - Widget - Nunjucks Loop
Static Data
Utilize static data to generate content, such as backlink, internal link, or other stuff.
Article: Eleventy - Widget - Static Data
Consider link data in a frontmatter from this content below.
With previous frontmatter, We can see one or more links in a widget.
Article: Eleventy - Widget - Static Data
Pagination
Using Nunjucks and Bulma stylesheet, a common pagination could be achieved.
Article: Eleventy - Pagination - Indicator
Article: Eleventy - Pagination - Responsive
5: Page Content
Topics Covered
-
Tutor-08: Meta SEO
-
Tutor-08: Layout: Blog Post
-
Tutor-08: Markdown Configuration
-
Tutor-08: Shortcode
-
Tutor-08: Syntax Highlighting
-
Tutor-08: Miscellanous
Meta SEO
Opengraph is a must nowadays.
Article: Eleventy - Meta - SEO
Layout: Blog Post
Your typical post.njk
should contain header,
and optionally footer (such as license) and navigation.
A typical post can be seen in preview below:
Article: Eleventy - Content - Blog Post
Markdown Configuration
Be aware of stylesheet adjustment. Some CSS framework such as Bulma, might require adjustment.
Article: Eleventy - Content - Markdown
Shortcode
We can utilize shortcodes, to provide link, or to provide image in Eleventy.
Article: Eleventy - Content - Shortcodes
Syntax Highlighting
Syntax highlighting setup in Eleventy is easy. Just be aware with stylesheet conflict with CSS framework.
Article: Eleventy - Syntax Highlighting
Miscellanous
Raw HTML is useful when you want to add service, or just plain html such as TOC in figure below.
Article: Eleventy - Content - Blog Post
Math Lovers won’t forget about MathJax.
Article: Eleventy - Content - Markdown
6: Deploy!
To Github or Gitlab or Bitbucket or Netlify or else.
Article: CI/CD - Deploy Overview
Conclusion
There in nothing more after summary, except this presentation slide.
Consider continue watching [ Eleventy - Presentation Slide ].
Thank you for reading.