An Eleventy blog starter forked from eleventy-base-blog but with Sia's opinions.
Preview the starter site here: 11ty-sia-blog.netlify.app/.
A partial list of Sia's changes (opinions):
- Move all source code to the /src/ directory
- Move most filters to a separate /src/_11ty/filters.js file to clean up the .eleventy.js config file a bit
- Adds more filters commonly used by Sia
- Inline and minify CSS by default (Note: if you have a lot of CSS, you should probably undo this)
Styling changes:
- More accessible color scheme for code blocks. Uses CSS variables so it's easier to switch it up.
- Adds RSS link to navigation
- A responsive font size and flow system that is more readable, partially based on Improve the readability of the content on your website by Andy Bell
- A footer at the bottom of the viewport
- Centers post article column with a set max-width of 780px (you should reduce this if you reduce the base font size), with wider image and code blocks, similar to the Hylia starter
These builders are amazing—in just a few clicks, you'll have your repo and a build set up!
- Clone this Repository (or your own if you used one of the auto-deploy links above)
- Navigate to the directory and install dependencies
cd my-blog-name
npm install
- Look at
.eleventy.js
to see if you want to configure any Eleventy options differently. - Edit
_data/metadata.json
- Run Eleventy locally on a dev server:
npm start
- Generate a production build:
npm run build
To run in debug mode:
DEBUG=* npx eleventy
Prepend all of these file paths with src/
:
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.
Still new to Eleventy? Try out these learning resources:
- Start from scratch to learn the key features of Eleventy with the Itsiest, Bitsiest Eleventy Tutorial
- Understand the fundamentals of templating with Templating: Eleventy's Superpower from Mike Aparicio
Also, get familiar with the 11ty docs!
Once you understand the fundamentals a bit more, dive into data with Architecting data in Eleventy. Then you can start building some more complex features like:
- Optimize Images in Eleventy Using Cloudinary
- An In-Depth Tutorial of Webmentions + Eleventy
- Show conditional Twitter intents with Eleventy
for pdf use use passthroughcopy