Initial Setup - ma9y/ma9y.github.io GitHub Wiki

Create package.json

npm init -y

Use ESM and not commonJS (optional)

npm pkg set type="module"

Eleventy installation

npm install @11ty/eleventy

Create index file

echo '# My Eleventy Project' > index.md

Create .gitignore

/.gitignore

# Dependencies       
node_modules

# VS Code
.history
.vscode

# Environment Variables
.env

# Eleventy output
dist  

# Other
.DS_Store

# Obsidian
.obsidian

Create eleventy.config.js

/eleventy.config.js

export default function(eleventyConfig) {
	// Configure Eleventy
};

Modify scripts in package.json

/package.json

"scripts": {
     "start": "eleventy --serve",
     "build": "eleventy"
}

Change default directories in eleventy.config.js

/eleventy.config.js

export default function(eleventyConfig) {
	// Configure Eleventy
};

export const config = {
    dir: {
      input: "views",  
      layouts: "_layouts",
      output: "dist"
    }
  };

Define default template engine in eleventy.config.js

/eleventy.config.js

export default function(eleventyConfig) {
	// Configure Eleventy
};

export const config = {
  markdownTemplateEngine: "njk",
  htmlTemplateEngine: "njk",
};

Create directories

├── views                   // custom override of default folder 
│    ├── _data              // global data folder
│    │     └── site.js      
│    ├── _includes
│    │     └── partials   
│    ├── _layouts           // custom override of default folder 
│    │     └── base.njk     // base layout
│    ├── assets             // custom folder
│    │     ├── css          
│    │     ├── img          
│    │     └── js           
│    ├── note               // custom folder
│    │     └── note.json    // default Front Matter Data 
│    ├── post               // custom folder
│    │     └── post.json    // default Front Matter Data 
│    └── index.md           
├── .eleventy.config.js            
├── .gitignore              
├── package.json            
└── package-lock.json

Define addPassthroughCopy in eleventy.config.js

/eleventy.config.js

export default function(eleventyConfig) {

    // method creates a file/folder copy in the output directory
    eleventyConfig.addPassthroughCopy("views/assets/css");
    eleventyConfig.addPassthroughCopy("views/assets/img");
    eleventyConfig.addPassthroughCopy("views/assets/js");
};

Create basic layout base.njk

/views/_layouts/base.njk

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ title }}</title> 
  </head>
  <body>
    <main>
      {% block content %}
      {{ content | safe }}
      {% endblock %}    
    </main>
  </body>
</html>

Define default Front Matter Data, i.e. create folder specific json files

/views/notes/notes.json

{
    "layout": "base" 
  }

Create and reference CSS stylesheet

<head>
   <link href="/assets/css/style.css" rel="stylesheet"> 
</head>

Define permalink for index file (if moved to a subfolder)

---
permalink: "/index.html"
---

Sources

⚠️ **GitHub.com Fallback** ⚠️