This is not a tutorial to create an 11ty website, this's a note! You can find some very new and useful techniques on this note alongside the official documentation.
π First, install nodejs.
π Using this starter template or Google's high performance statrer theme (recommended).
π Using this starter template or Google's high performance statrer theme (recommended).
You should follow the installation steps given in the theme you choose.
Sometimes, 11ty takes too much time to build (especially on the task of optimizing images. On my site, it takes almost 10 minutes). You shouldn't use branch
master
to build you site because every time you make a push, Netlify will rebuild your whole site. You should create and use a new branch, so-called prod
instead.The weakness of Idea 1 is that you let netlify build again your whole site with its resources. That's why it takes too much time! Remember that, you have only 300 free minutes to build.
Using postcss
?
Using alongside with section "SCSS to CSS".
- Put fonts in
fonts/
and use this tool to generate.woff
,woff2
from Google Fonts. Be careful on the location will be used on your site.
- Copy and paste to
css/main.scss
.
- If you have a problem with
Content-Security-Policy
, check the section βTroubleshootingβ.
More icon fonts than Fontawesome. Choose fonts on fontello > "Get config only".
Check the code
-doc
in src/fontello/config.json
, field "css"
.Note: Sometimes, there are duplicates hexa/decimal code (although the names are different). On fontello website, navigate to "Customize Codes" tab, find duplicates and change them. Note that, in this tab, the codes are shown in hexa base but in the downlowded config, the codes are shown in decimal based (field
"code"
). You can use this site to convert between them.Split layout into parts and include them in the main file.
Read this tutorial.
π Page variable components.
They will be used as
page.fileSlug
!For ones who wanna get only the content (escape HTML tags and special characters) of the post:
Suppose you use
specialTitle
in the frontmatter of your page (eg. index.njk
). You can use it in the template, eg. header.njk
, asIf
pageUrlLength > 1
, it's not home page!Normal,
π Update: Below method is old (a hard way), you can refer to this guide.
In this case, we consider a category as the first tag of a post. For example, if a post has tags
tags: [tag 1, tag 2, tag 3]
, then tag 1
will be its category!If you wanna add external posts (not generated by 11ty from
.md
files), do below steps. For example, on this site, I cretae some pages created by Notion and I wanna add them to category MOOC
.Remark: This section is used with section "posts by categories" and section "sort posts by title".
Using rollupjs
Using
rollup
as above way, we have only one output file js.min.js
!Suppose that you have a custom frontmatter
customJS: ["file1.js, file2.js"]
containing all custom js files. It means that the files file1.js
and file2.js
are presented only in this page! (If we integrate them in main.js
, they will be integrated ub all other pages after being rendered even if they're useless in those pages).Where
jsmin
is a filter created in the next section. All files file1.js
, file2.js
are stored in _includes/_scripts/
.Usage (
_includes/scripts/search.js
),Last modified date,
Code syntax highlight: Need this plugin. List of supported languages.
Inline code, put
{{ "{% raw " }}%}
and {{ "{% endraw " }}%}
around the keyword.Code block,
Using markdown-it-mathjax.
In this site, I use
markdown-it-texmath
. I choose this because we can overcome the weakness of markdown-it-katex
in case of breaking lines in list mode & it's more flexible (you can try it online here).An important note: the original version has a problem of whitespace before and after
<eq>
tag in the inline mode. That why instead of seeing aaa x aaa
with aaa $x$ aaa
, we see aaaxaaa
. I've changed (and reported an issue). For a moment, I use a modified version here. Update: The author couldn't reproduce the issue I met (with version 0.8), he keep updating the plugin but I didn't try version 0.9. You better try it before trying my option!In sert images with the path relative to the directory of
.md
files. Let's use eleventy-plugin-page-assets.In
.eleventy.js
If you wanna create an advanced custom container, use plugin
markdown-it-container
. For example, you want export something like,Just by using,
You can put in
.eleventy.js
like,To creata the same code block like above, i.e.,
Just by using,
If you wanna export something like,
by using
{% raw %}{% ref "custom-url" %}{% endraw %}
(""
is required). You can set,For me, the best choice for search feature in 11ty is using Elasticlunr with some customizations.
Because your site becomes bigger in future, you cannot index the whole text of your site (every time you build). My idea is to create a custom frontmatter tag called "keywords" which contains all of the important keywords used to determine the content of your posts. Of course, the cons is that you have to put the keywords manually!!
Check this repository, I've pulled and modified from this one (The author takes so long to check my pull request ^^). My customization supports:
- Index your customizable keywords.
- Fix UX bugs in the main repo.
- Highlight found keywords in the search result.
- Limit the max number of texts in the result (show around the found keywords).
- Adapt to the newest version of 11ty.
π Check more in official doc.
For example, we wanna add tag "posts" for all posts in a folder named "sample_posts". Inside
/sample_posts/
, create a file sample_posts.son
(yes, the same name as "sample_posts") with following content,Suppose your data files is not in
./_data/
but in ./notes/_data/
.In case you have a setting file in
notes/_data/settings.json
. Sometimes, you use it as a data files via dataDir
(just settings.*
), sometimes, you use it as a separated json
file. For example, you use it in a separated js file toggle-notes.js
Solution, in
.eleventy.js
Then in
toggle-notes.js
You put all your data files (
.js
or .json
) in _data
, e.g.,For example, export a current year on site,
For example, to build a page fetching all starred github repositories on Github from the API
https://api.github.com/users/dinhanhthi/starred
.More info, read official doc. For example, we only perform something differently on local.
An example of using in
.eleventy.js
Or using in the template,
π Update 19 Nov 2021: 11ty has already added the incremental option (
--incremental
). Check more in the official document.From version 1.0.0 (currently, I use version
1.0.0-canary.38
), we can customize eleventyConfig.ignores
right in .eleventy.js
. Use this to make different posts
folders for local and for remote. Because there are too many posts which are going to be built, it takes a very long time to see the changes. If you just wanna make changes in theme, you need a separated folder (having less number of posts).For example,
- Only process posts in
notes/*
on remote (ignoresample_posts/*
).
- Only process posts in
sample_posts/*
on local (ignorenotes/*
).
Add a new item to a list,
Create a dictionary with nunjucks
Add a new key-value to a dictionary,
String concatenations,
πΒ TypeError: Cannot read property 'type' of undefined
Class comes before ![]() of an image!
πΒ EISDIR: illegal operation on a directory
Delete _site/ and rebuild!
πΒ ENOTDIR: not a directory...
Delete _site/ and rebuild!
πΒ Invalid DateTime
Just for new posts => try to commit (on branch "dev") before building!
Reason:
json-ld.js
takes some beginning words to convert to json formats! If there are equation (latex likes $\Rightarrow$
) at the very beginning of the notes, there will be error like this!The err comes from
src/json-ld.js
and the codes at the bottom of file src/_includes/layouts/post.njk
β truncate(140)
β If math equations start at character 141, it will be fine!Solution: Add
| dump
to the description
tag!