A simple, basic site template built using Eleventy and YACCK.

Demo site on GitHub Pages

This is a work-in-progress template, but you can use it in it's current state and it'll work great. More features may be added to this (see the current issues for potential additions).

I will be using this for my own personal site which will have functionality that may or may not be backported to this template.

Requirements: Node.js and NPM

git clone https://github.com/{YOUR NAME}/{YOUR FORK'S REPO NAME}

cd {YOUR FORK'S REPO NAME}

npm install

npm run build

or to live reload as you edit source files:

npm run serve

You can deploy your built site to any host that serves static websites, such as GitHub Pages, Netlify or Vercel. Be sure to indicate ./dist/ as the directory to serve from.

The source files are located in the ./src/ directory and the generated files are in the ./dist/ directory. This is the directory you want to publish to your deployed site.

Occasionally, the ./dist/ directory gets out of sync when building, usually with files that have since been deleted from source. Run npm run clean to remove the ./dist/ folder and its contents. It will error if there is no ./dist/ directory.

.
├── dist [built files]  
├── js [config files for eleventy]
└── src [site source files]
    ├── assets [site assets (images/css/js)]
    ├── _data [site data and configs]
    ├── _includes [layouts, partial files]
    ├── posts [all blog post files]
    └── tags [tag pages]

.
├── .eleventy.js [eleventy configuration options]
├── package.json [npm package config]
├── package-lock.json
├── README.md [you're looking at it]

└── src
    ├── _data
    │   └── metadata.json [site metadata]
    └── posts
        └── example-post.md [example post]

By default, templates are written using the Nunjucks templating language. Blog post templates (in ./src/posts/) are written in Markdown.

View the Eleventy docs for more instructions on creating your content.

I've written a custom theme for this site using my classless CSS framework, YACCK. The default font stack is the system font stack, pulled in from YACCK. Feel free to override this in ./src/_includes/partials/_head.njk and in the CSS file.

If you don't want to use YACCK, remove the references in _head.njk and use whatever you'd like. The generated HTML structure follows HTML5 standard conventions and tries to keep it as simple as possible. There are some extra styles in ./src/assets/css/styles.css you may or may not want as well.

Change out the logo and other images in ./src/assets/ to your own.

• Eleventy docs
• Nunjucks docs
• Markdown syntax

• Eleventy Base Blog
• pborenstein.com
• Eleventy Walkthrough
• Let's Learn Eleventy

Extended functionality following examples from pborenstein.com