11ty and Netlify

Demo

Multiple files: Pain points

  • Template code are duplicated.
  • Template code changes requires repeated file update process.
  • Difficult to ensure all files has latest template code changes.

Solution: 11ty

  • Able to define layout template in separated files.
  • Able to include the layouts in content page.
  • Template changes only happen in one place.

11ty Summary

  • Build command: npx @11ty/eleventy
  • Publish directory: _site
  • Layout file: /_includes/layout.html
  • Content block: {{content}}
  • Using layout:
---
layout: layout.html
---

Content goes here.

Demo Time

First, we create a new repo for our new site.

Create a new file named index.html with basic content.

Let’s deploy the site to Netlify.

Select “New site from Git”.

Choose “Continuous Deployment” with GitHub.

According to tutorial, we will need to setup 11ty build.

Build command: npx @11ty/eleventy

Publish directory: _site

Fill in Build command and Publish directory.

Deployment will take some time now because of the build command.

From the Deploy log, we can have a glimpse on what’s happening.

The last line of deploy log states that site is live now.

We can also view the deploy summary.

Let’s change the site name to make it easy to remember.

Here is our live site. Nothing fancy, but it works.

Let’s create a second HTML file named about.html.

Any GitHub code changes will trigger Netlify build.

About a coupe of minutes, we have the /about page live.

Now, Let’s try to add header, nav and footer to index.html.

Every time we make changes in Git, we’d better give a readable change log summary.

Wait a while and the latest changes it live on Netlify.

Here is our new index.html page with header, nav and footer.

Porblem we have here

  • Header, nav, footer code does not exist in about.html.
  • We need to either:
    1. Copy the template code to about.html and all future pages.
    2. Create a template file that shares between index.html and about.html page.

We will use option 2

We copy the code from index.html file.

Create a new file in /_includes/layout.html

Paste the code from index.html file into layout.html

Replace the dynamic content to be {{content}}

Update the index.html to use layout.html and keep only the content part.

Update the about.html to use layout.html and keep only the content part.

Wait for the building of code changes.

Our latest index.html page with template applied.

Our latest about.html page with template applied.

Now that our page contains only content,
we can use markdown to represent our content.

GitHub will also render the markdown file into HTML for previewing, the layout configuration is also displayed.

Our latest about page with rendered Markdown content.

11ty Summary

  • Build command: npx @11ty/eleventy
  • Publish directory: _site
  • Layout file: /_includes/layout.html
  • Content block: {{content}}
  • Using layout:
---
layout: layout.html
---

Content goes here.