An 11ty base blog with wikibonsai support.
You can see the live demo here.
π Display your π WikiBonsai digital garden for others.
git clone https://github.com/wikibonsai/eleventy-wikibonsai.git my-blog-name
cd my-blog-name
Specifically have a look at .eleventy.js
to see if you want to configure any Eleventy options differently.
npm install
npx @11ty/eleventy
Or build and host locally for local development
npx @11ty/eleventy --serve
Or build automatically when a template changes:
npx @11ty/eleventy --watch
Or in debug mode:
DEBUG=* npx @11ty/eleventy
Inside of your Astro-Wikibonsai project, you'll see the following folders and files:
βββ _data/
βββ _includes/
β βββ layouts/
βββ content/
βββ css/
βββ img/
βββ wikibonsai/
βββ .eleventy.js
βββ .eleventyignore
βββ README.md
βββ package.json
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.- Use the
eleventyNavigation
key in your front matter 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
. - The
css
andimg
directories in the input directory will be copied to the output folder (viaaddPassthroughCopy()
in the.eleventy.js
file). - 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.
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
npm install |
Installs dependencies |
npm run build |
Build your production site to ./dist/ |
npm run bench |
Run benchmarks |
npm run watch |
Preview your build locally, watch for changes |
npm run serve |
Starts local dev server at localhost:4321 |
npm run start |
Preview your build locally, before deploying |
npm run debug |
Run in debug mode |
Check out the eleventy documentation or WikiBonsai documentation.