Kurs om
Eleventy (11ty)

Static Site Generators (SSG)

• What is an SSG?
• What are the benefits of a static site?
• SEO aspects
• Overview of some SSG

11ty Fundamentals

How to install, configure and run a basic 11ty powered website.

Background

• Zach Leatherman
• Why 11ty was created
• Installation
• CLI usage
• Basic configuration

Concepts

• Artifacts - page, template, layout, front-matter
• Formats - Markdown, HTML, Pug
• Languages - Liquid, Nunjucks, Handlebars, JSX
• Layouts
• Short-codes
• Filters

Front-Matter Data

• What is front-matter?
• What is YaML?

• Page data vs. layout data
• The permalink property

Nunjucks

• Why Nunjucks, instead of other language alternatives?
• Handlebar expression syntax
• Syntax forms
• Shortcodes
• Paired Shortcodes
• Filters - 11ty vs. Nunjucks
• Variables - set
• Conditionals - if, elif, else, endif
• Loops - for, endfor, loop.*
• Iterating over arrays vs. object properties
• Iterating over Sets and Maps

Layouts & Includes

• Layout configuration
• Using a base layout
• How to selectively prevent a layout
• Including partials
• Layout alias configuration
• Layout inheritance and its usage for different page categories

11ty Usage

In this section we discuss more elaborate topics of using 11ty.

Asset Files

• What is an asset file
• Pure static files
• Pass-through configuration
• How to manage image files
• Global image folder vs. page-relative images
• How to configure page-relative images, using addTransform()

Meta-Data

• What do we mean with meta-data?
• Template data files
• Folder data files
• Global data files
• Computed data
• Fetching remote data

Configuration

• What can be configured?
• Front-matter languages
• Template languages
• Transforms

Collections

• What is a 11ty collection?
• How to define and use a collection
• Tags and collections
• Iterating over of collection
• Reversed iteration

Pagination

• What is pagination in 11ty?
• Pagination configuration
• Generate an aggregation of a set of pages, such an archive or tag-list (size>1)
• How to generate a dynamic amount of pages (size=1)

Extensions

In this section we discuss various ways of extending and augment 11ty.

Plugins

• What is a 11ty plugin?
• How to install and configure a plugin
• Bundled plugins
• 11ty official plugins
• Community plugins
• Overview of some useful plugins

Extending 11ty

• In what ways can we extend 11ty?
• User-defined filters
• User-defined shortcodes
• User-defined paired shortcodes
• User-defined collections
• User-defined transforms
• User-defined plugins

Applications

In this section we discuss various application oriented topics.

Client-Side Scripting

• How to write client-side scripts
• How to attach/configure client-side scripts based on layout files
• How to generate dynamic HTML
• Using innerHTML and interpolating strings
• Creating HTML node objects and append to other nodes
• Defining HTML template blocks, instantiate and populate them
• Perform AJAX invocations and generate HTML

Transforming Images

• Why image files need to be processed
• SEO aspects
• Overview of the Image plugin
• Configuration - formats and widths
• Image transformation
• HTML generation
• Different ways to apply the Image plugin
• Image file copying

Implementing Search

• Server-side vs. client-side search
• Server-side search SaaS providers
• Client-side search with Minisearch
• Overview and installation of Minisearch
• Basic usage
• How to generate a search index and load it
• How to extract plain text from Markdown files
• How to implement interactive client-side search

Going Live

In this final section, we discuss how to go live with a 11ty website.

Build

• Run modes - build vs. serve/watch
• Building a website
• Testing locally
• Installation and usage of local-web-server

Deployment

• Installation and usage of nginx in Docker
• What is a CDN?
• Overview of some CDN SaaS providers

Deployment to Netlify

• Overview of Netlify
• How to deploy to Netlify
• How to set up and configure build hooks from GitHub to Netlify

Using a Headless CMS

• What is a CMS?
• What is a headless CMS?
• Overview of some headless CMS SaaS providers

Adapt a 11ty project to Hygraph

• Overview of Hygraph
• How to adapt a 11ty project to be deployed to Hygraph
• What is a schema? Why is it needed? How to set it up
• Adding content, i.e., moving all MD files into Hygraph
• API access and endpoints
• Fetching GraphQL JSON data from Hygraph
• How to generate dynamic pages based on data from Hygraph

Här ser du vilka kursdatum som är tillgängliga. Klicka på en av datumknapparna för att anmäla dig till ett kurstillfälle. På kursen pratar läraren svenska, medan vårt kursmaterial alltid är författat på engelska.

Missa inte vår samfaktureringsrabatt! Är ni fler personer från samma företag/organisation som går på samma kurs och kurstillfälle, rabatteras tillkommande personer med 25%. Ni kan anmäla er till kursen en och en, men uppger då samma företag, så ordnar vi resten. Samtliga deltagare från samma företag ingår då på samma faktura, den första till fullt pris och resterande till rabatterat pris.

Boka din plats på vår fjärrkurs, via Zoom

Du sitter bekvämt framför datorn och deltar i kursen via internet. Vi använder programvaran Zoom för alla våra fjärrkurser. I priset ingår kursmaterial som PDF.

Pris: 14 000 kr + moms

Hoppsan då 😳
Just nu finns det inga datum tillgängliga. Titta förbi om några dagar eller kontakta oss och be oss lägga upp fler kursdatum.