A starter repository showing how to build a blog with the Eleventy static site generator.
These builders are amazing—try them out to get your own Eleventy site in a few clicks!
git clone https://github.com/11ty/eleventy-base-blog.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 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.mdshows how to add a content page.posts/has the blog posts but really they can live in any directory. They need only theposttag to be added to this collection.- Add the
navtag to add a template to the top level site navigation. For example, this is in use onindex.njkandabout/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
cssandpngare listed intemplateFormatsbut 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.njkis a Nunjucks include and is a reusable component used to display a list of all the posts.index.njkhas an example of how to use it.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent