Eleventy Duo

Eleventy Duo is a production-ready and SEO-friendly starter for building a blog or personal website. Comes with a customizable duotone theme, minimal and clean design.

Live demo

Built with

• Eleventy for site generation (obviously)

• Webpack for asset bundling

• PostCSS for CSS processing

• Autoprefixer for vendor prefixing CSS

• PostCSS Preset Env for traspiling css

• PurgeCSS for unused CSS removal

• CSSNano for CSS minification

Features

• Customizable duotone theme to make it your own.

• Fully responsive

• SEO metadata and Open Graph tags

• Maximize lighthouse score

• Cache busting

• 404 page

• RSS feed for posts

• Tags support

• Pagination support

• Syntax highlighting with PrismJS

Getting Started

Generate a new repository from this repository template

Click the “Use this template” button. Alternatively, you can clone this repo yourself and push your copy to a git repository.

Clone your new repository

git clone https://github.com/YOUR_REPO

Navigate to the directory

cd my-blog-name

Install dependencies

yarn install

Serve the site locally

yarn dev

Build a production version of the site

yarn build

Project structure

src/
  data/
    Eleventy data files
  layouts/
    Base page layouts
  includes/
  	All UI partials
  blog/
    Blog posts in markdown
  assets/
    css/
      main.css
      All other scss files
    js/
      main.js
      All other js files
  images/
    All images used
  page template files
Configuration and build files

Files in assets will be handled by webpack.

Eleventy will transform files in data, layout and includes directories, and will copy across any images.

Eleventy’s output will be to a public directory at the root level.

Customize

• Edit site data data/site.json

This file contains your site title and author details and can be used to store any other commonly used site data.

{
  "name": "Eleventy Duo",
  "description": "Eleventy Duo is a production-ready and  SEO-friendly starter for building a blog or personal website. Comes with a customizable duotone theme, minimal and clean design.",
  "url": "https://eleventyduo.netlify.app",
  "author": {
    "name": "Author Name",
    "email": "[email protected]",
    "twitterHandle": "author_handle"
  },
  "socialImage": "/images/social-image.jpg"
}

• Replace favicon in src/favicon.ico. Default is a paint palette image.

• Replace social image in src/images/social-images.png Default is a screenshot of demo site.

• Update Site title and introduction that appears on the homepage in src/index.md

---
layout: home
title: 'Eleventy Duo'
---

Eleventy Duo is a production-ready and SEO-friendly starter for building a blog or personal website. Comes with a customisable duotone theme, minimal and clean design.

Checkout the [project's github repo](https://github.com/yinkakun/eleventy-duo) for more info.

• Update the About page

Update the about page content in src/about.md

---
title: About
layout: base.njk
---

Eleventy Duo is a production-ready and SEO-friendly starter for building a blog or personal website. Comes with a customisable duotone theme, minimal and clean design.

Checkout the [project's github repo](https://github.com/yinkakun/eleventy-duo) for more info.

• Add blog post

Blog posts is in markdown. The starter already contains some demo contents.

The description frontmatter is used in meta description and Open Graph description for SEO. If not provided, it falls back to the first 140 characters of the article instead.

The socialImage frontmatter is used in Open Graph image ad Twitter card image for SEO. If not provided, it falls back to the site.socialImage provided in data/site.json

---
title: Demo blog post.
date: 2020-12-06
tags: [css, html, markdown]
description: this description will be used in page metadata tags for SEO
socialImage: images/name-of-image.png

Page content here...
---

• Customize site theme, adjust these CSS variables at src/assets/css/theme.css, some nice presets are:

Mariner & Black White

:root {
  --accent: #2979b7;
  --background: #fffffe;
  --color: #2d334a;
}

Deep Teal & Saltpan

:root {
  --accent: #00332c;
  --background: #f2f7f5;
  --color: #475d5b;
}

Martinique & Black White

:root {
  --accent: #2d334a;
  --background: #fffffe;
  --color: #2d334a;
}

Jungle Green & Woodsmoke

:root {
  --accent: #2cb67d;
  --background: #16161a;
  --color: #94a1b2;
}

Pomegranate & Soft Peach

:root {
  --accent: #f03d33;
  --background: #fbf9fb;
  --color: #343239;
}

Otherwise: Knock yourself out. This is a template repository.