2.8 KiB
2.8 KiB
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
Deploy this Eleventy site in just a few clicks on these services:
Or, read more about Deploying an Eleventy project.
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 @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
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.- 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.