Building Site with Eleventy.
This media can also be read in: [Eleventy - Summary] article
Yet, another underachiever 👻.
But hey, I have my own blog 🎉.
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]
The easiest thing to do this is to make a minimal layout, and modified later.
Just a bit of refactoring.
With a very humble result as figure below
In the heart of Eleventy, you can add:
alias, filter, collections and shortcodes
Manage tags using collections object:
using only plain javascript.
You can add any necessary assets such as: images, css frameworks, and javascript frameworks.
Using CSS framework such as Bulma or Bootstrap or Custom, can make your life easier.
The base parent layout in Nunjucks.
Using simple template inheritance with Nunjucks in Eleventy Layout.
You desire for a better design.
Further, you can utilize stylesheet
to control your responsive space,
or custom component
Long code tends to get messy.
You need to get organized.
Using multilevel template inheritance with Nunjucks in Eleventy Layout.
So far we have this three special index pages.
Just make sure you have enough content.
With various published date, and various tags.
At least 17 content to simulate responsive pagination later.
Prepare configuration
Start from simple archive list with plain looks.
Instead of plain looks, you can style custom layout.
With any looks, as creative as you can.
Your first attempt to make summary page.
Should begin with just a simple loop.
And then you can make a nicer looks.
From that simple loop above, using bulma's tag class.
You can go further.
By showing tree of pages in this summary page.
Eleventy can generate custom output.
Without adding any plugin.
After all this is just a static page.
Color Property Propagation
Mobile First Content Design
Responsive Index Columns
Prepare more configuration
Simple Widget
Start from simple, such as plain HTML list.
Nunjucks Loop
You can also put anything in your widget as creative as you are.
Now consider link the data.
From this content below.
With previous frontmatter.
We can see one or more links in a widget.
Numbering:
Using Nunjucks and Bulma stylesheet,
a common pagination could be achieved.
Responsive:
Using Nunjucks and custom stylesheet,
a responsive pagination also could be achieved.
Opengraph is a must nowadays.
Your typical post.njk.
Should contain header, and optionally footer
(such as license) and navigation.
A typical post can be seen in preview below.
Be aware of stylesheet adjustment.
We can utilize shortcodes.
To provide link, or to provide image in Eleventy.
Setup in Eleventy is easy
Just be aware with stylesheet conflict with CSS framework.
Raw HTML.
Useful when you want to add service,
or just plain html such as TOC in figure below.
Math Lovers won't forget about this.
Deploy!
To Github or Gitlab or Bitbucket or Netlify or else.
Don't be shy 🙋🏻♂️!
🙇🏻
Thank You for Your Time.