Installing 11ty Frame blog

You are just a few lines away from your blog.

Let's create a Github repository

Your first action to create a 11ty Frame site is to fork 11tyframe repository inside the directory where you want to develop your new site on your local computer , then create a Github repository with the same directory name for instance, the Github repository for 11ty Frame is 11tyframe. .

Install Eleventy and the required Node packages locally, as they appear in your package.json file


  "dependencies": {
    "html-minifier": "^4.0.0",
    "clean-css": "^4.2.1",
    "uglify-es": "^3.3.9",
    "debug": "^4.1.1",
    "fs-extra": "^8.1.0",
    "klaw-sync": "^6.0.0",
    "markdown-it": "^9.1.0",
    "markdown-it-attrs": "^3.0.1",
    "markdown-it-deflist": "^2.0.3",
    "markdown-it-include": "^1.1.0",
    "markdown-it-link-attributes": "^2.1.0",
    "npx": "^10.2.0",
    "nunjucks": "^3.2.0"

Let's have a post!

Once installed and deployed Using Netlify is the easiest way, but any alternative is as simple. , you have to modify the entries found in the configure.js file located at the root of your source directory the AUTHOR_s and EMAIL_s properties are slightly different in the configure.js file, but it’s because the 11ty Frame demo site requires real initial values. .


AUTHOR_s     : 'yourname',                        //: Your github name
EMAIL_s      : '',           //: Your github e-mail
ID_s         : '11tyframe',                       //: Your github repository
NAME_s       : '11ty Frame',                      //: Your site name
URL_s        : ``,  //: Your CDN site address
LOCAL_s      : '',          //: Your local address and port for development
COLLECTION_s : 'post',                            //: The Eleventy tag for your posts collection
LANGUAGE_s   : 'en',                              //: Site language

description_o: //: descriptions for SEO { DESCRIPT_s: '11ty Frame blog', GLOBAL_s: 'Eleventy,static site generator', },

Once you have completed this step, you just have to rebuilt your site with this command: from your 11tyframe source directory.

npx eleventy --config=make/11ty/make.js

Then, begin to write your first posts probably replacing the and files in the matter/pages directory… ! For thurther help, please refer to the 11tyTips site which is the model of your fresh new site.

Commenting or not commenting?

If you want to have comments on some or all of your blog pages, you have to configure 11ty Frame commenting system: All you have to do is to follow utterances site instructions.

If you don’t want to have comments on any page, just add a property no_comments in its frontmatter section: here is what this install page source does, just commenting out (sic) the no_comments property.


  date:      `2019-11-01`,
  layout:    `frame.njk`,
  permalink: `install.html`,
  tags:      [ `post` ],

eleventyExcludeFromCollections: false, no_comments: true, //: there will be no comments for this page!
title_s: `Install 11ty Frame`, subtitle_s: `How to install your 11ty Frame blog`, abstract_s: `Follow these instructions`, author_s: `Me`, } ---

Removing 11ty Frame demo pages

Of course, you can remove 11ty Frame demo pages from your personal site you should first have another index and a post tagged page of your own, otherwise you will get an error when building your site. , but if you want to keep them in your source directory for instance to have a handy reference , without building them in your site, you just have to change two lines in their frontmatter section, replacing ex.1 code by ex.2 code:

permalink: ‘install.html’,
tags: [ ‘post’ ],

permalink: false,
tags: [],

Configure your CDN

Now you can create a new site at Netlify or at your usual CDN for Netlify follow Netlify page instructions. and give it the name of your Github repository.

There you are! You’re both an Eleventy and 11ty Frame user…