Structure of Eleventy Base Blog
Eleventy #
Eleventy transforms a directory of templates (of varying types) into HTML It deploys to Netlify.
The templates it supports are: Liquid, Nunjucks, Handlebars, HTML, Markdown, EJS,Haml, Pug, Javascript
The Eleventy website is https://11th.dev
Documentation is at https://www.11ty.dev/docs though these are of limited help if you do not know the template technology in the above list.
There is some information in README.md
The templates used in the base blog are Markdown (.md) and nunjucks (.njk).
eleventy.js has config information. This says
- The template formats used are md, njk, html, and liquid
- The markdown template engine is liquid
- The html template engine is nunjucks (njk)
- The data template engine is nunjucks (njk)
nunjucks is a templating language for javascript, written my mozzilla
liquid is a template language created by shopify. It is written in Ruby adn is used by many other web apps including jekyll (which is used by GitHub).
Eleventy base blog also makes use of json.
The folder _site #
_site is not included in the git changes. It gives a good starting point for working out what the code actually does. _site contains the following directories:
| folder | files | comment |
|---|---|---|
| about | index.html | the about page |
| css | index.css | css for blog pages |
| prism-base16-monokai.dark.css | css for how code (```) should look | |
| feed | .htaccess | .htaccess file |
| feed.json | json file of contents of whole site | |
| feed.xml | xml file of contents of whole site | |
| img | .gitkeep | .gitkeep is empty |
| page-list | index.html | table of all pages with their links and titles |
| posts | index.html | Archive page: list of blog posts with links |
| firstpost/index.html | pages each containing a blog post | |
| secondpost/index.html | ||
| thirdpost/index.html | ||
| fourthpost/index.html | ||
| tags | index.html | A page showing a list of tags in button format to click. Clicking takes you to the appropriate page below. |
| another-tag/index.html | A list of blog posts with the tag in question. | |
| number-2/index.html | ||
| second-tag/index.html |
Then there are three single files in _site:
| file | comment |
|---|---|
| 404.html | Page/Content not found error page |
| index.html | home page |
| sitemap.xml | list of urls of all pages in site with their last modified date in xml format. |
The files that construct the final html site files #
The above html files are constructed by combining templates and content. The content of some of the files is generated automatically.
As above, we first look at the folders and then the individual files
| folder | file | comment |
|---|---|---|
| _data | metadata.json | Top level information about the site such as title and description. |
| _includes | postslists.njk | Code for creating a chronologial list of posts and lists of posts by tag |
| _includes/layouts | base.njk | HTML that goes in all pages: head, header, almost empty main, and (empty) footer. Uses metadata.json |
| home.njk | Template for home page. Uses base.njk, template-class: tmpl-home. | |
| post.njk | Template for blog post pages. Uses base.njk, template-class: tmpl-post. Code for automatically providing links to next and previous posts. | |
| about | index.md | content for about page (about/index.html) in markdown format |
| css | index.css | css files are copied to css directory in _site as is |
| prism-base16-monokai.dark.css | ||
| feed | htaccess.njk | code to create an .htaccess file |
| json.njk | code to create a json file of contents of whole site (feed.json) | |
| feed.njk | code to create an xml file of contents of whole site (feed.xml) | |
| img | .gitkeep | Copied to _site as is|
| node_modules | loads of directories | have not explored |
| posts | firstpost.md | Content for blog posts in markdown. One file for each post |
| secondpost.md | ||
| thirdpost.md | ||
| fourthpost.md | ||
| posts.json | Add the tag 'posts' to all content files in the directory. |
| file | comment |
|---|---|
| 404.md | Content for error page when a page is not found. Uses home.njk. Becomes 404.html |
| archive.njk | Uses home.njk and postlists.njk. Creates a list of posts. The page shown under Archive. Becomes posts/index.html |
| index.njk | Home page content. Uses home.njk. Generates a list of recent blog posts. |
| page-list.njk | Creates a table of links and titles that includes every page in the site. |
| sitemap.xml.njk | Generates sitemap.xml |
| tags-list.njk | Creates tags/index.html in _site. Creates a list of tags that link to pages that list the posts where those tags are included. Uses home.njk |
| tags.njk | Uses home.njk and postslist.njk. Generates a page which lists the posts for a given tag. |
Other files #
| file | comment |
|---|---|
| .editorconfig | Some editor settigs to do with indenting, white space and EOL. | .eleventy.js | Configuration file for eleventy |
| .eleventyignore | Just contains README.md. We don't want README to be part of the site. |
| package.json | json file to do with the package. Seems to alias npm commands. |
| README.md | Information about how to set up eleventy and the base blog |