Minimalist dark mode starter template for 11ty with support for jsfiddle embeds and prismjs syntax highlighting.
Demo https://11ty-midnight.netlify.app
- Minimalist dark mode design
- Color gradient highlights
- Support for jsfiddle embeds
- Code formatting using prisma
git clone https://github.com/sidswork/11ty-midnight.git my-blog-name
Or you can click the Use this template
button on the repository to make a copy of the repository.
cd my-blog-name
Specifically have a look at .eleventy.js
to see if you want to configure any Eleventy options differently.
npm install
This file contains all the metadata related to the blog like the title, description, etc.
npx eleventy
Or build and host locally for local development
npx eleventy --serve
Or build automatically when a template changes:
npx eleventy --watch
Or in debug mode:
DEBUG=* npx eleventy
about/index.md
shows how to add a content page.posts/
has the blog posts but really they can live in any directory. They need only thepost
tag to be added to this collection.- Add the
nav
tag to add a template to the top level site navigation. For example, this is in use onindex.njk
andabout/index.md
. - Content can be any template format (blog posts needn’t be markdown, for example). Configure your supported templates in
.eleventy.js
->templateFormats
.- Because
css
andpng
are listed intemplateFormats
but are not supported template types, any files with these extensions will be copied without modification to the output (while keeping the same directory structure).
- Because
- The blog post feed template is in
feed/feed.njk
. This is also a good example of using a global data files in that it uses_data/metadata.json
. - This example uses three layouts:
_includes/layouts/base.njk
: the top level HTML structure_includes/layouts/home.njk
: the home page template (wrapped intobase.njk
)_includes/layouts/post.njk
: the blog post template (wrapped intobase.njk
)
_includes/postlist.njk
is a Nunjucks include and is a reusable component used to display a list of all the posts.index.njk
has an example of how to use it.
You can embed jsFiddle iframes using this shortcode
{% jsFiddle "<iframe-src-from-jsfiddle>" %}
Example
{% jsFiddle "//jsfiddle.net/sidswork/apk0wg96/embedded/js,html,result/dark/" %}
Dark mode blog starter based on the Official Eleventy Base Blog
Eleventy Home Page https://www.11ty.dev