2145a3169c
The instructions should be changed to properly reflect the way css and images are handled in the configuration. At the moment the instructions reference css and png files being handled via templateFormats, but in reality they're configured to be located in special css and img directories and handled via addPassthroughCopy(). |
||
---|---|---|
_data | ||
_includes | ||
.github | ||
about | ||
css | ||
feed | ||
img | ||
posts | ||
.editorconfig | ||
.eleventy.js | ||
.eleventyignore | ||
.gitignore | ||
.nvmrc | ||
.travis.yml | ||
404.md | ||
archive.njk | ||
index.njk | ||
LICENSE | ||
netlify.toml | ||
package.json | ||
page-list.njk | ||
README.md | ||
sitemap.xml.njk | ||
tags-list.njk | ||
tags.njk |
eleventy-base-blog
A starter repository showing how to build a blog with the Eleventy static site generator.
Demos
Deploy this to your own site
These builders are amazing—try them out to get your own Eleventy site in a few clicks!
Getting Started
1. Clone this Repository
git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name
2. Navigate to the directory
cd my-blog-name
Specifically have a look at .eleventy.js
to see if you want to configure any Eleventy options differently.
3. Install dependencies
npm install
4. Edit _data/metadata.json
5. Run Eleventy
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
Implementation Notes
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
. - The
css
andpng
directories in the input directory are going to be copied without modification to the output, because they're passed toaddPassthroughCopy()
. - 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.