Sökresultat för

Kurs om
Eleventy (11ty) - Static Site Generator

Lär dig allt om att bygga en webbplats baserad på genererade HTML sidor med det kolossalt populära verktyget Eleventy (11ty).

3 dagar Intermediate Eleventy Web
Eleventy (11ty) - Static Site Generator

Eleventy har seglat upp som ett av det särklass populäraste verktygen for så kallad static site generering (SSG). Skälen är att det är enkelt att använda, lätt att konfigurera, smidigt att utöka, samt lägger sig inte i med pekpinnar om hur du ska utforma din källkod. Slutligen, så är Eleventy enormt snabbt.

Den stora fördelen med en statisk webbplats är att denna kan driftsättas i ett CDN. Ett CDN (Content Delivery Network) är i allt väsentligt en gigantisk distribuerad cache med s.k. edge-servers utspridda i samtliga världs-regioner. Detta är perfekt för att öka sökbarheten (SEO), eftersom full indexerbarhet och snabbhet rankas högt av sökmotorer. Dynamiska aspekter kan sen hanteras av client+side scripts, vilka kan ladda ned specifik data via AJAX anrop.

Den här kursen bygger på Eleventy version 3, som är den senaste versionen och har stöd för ES modules, modern Node.js och är snabbare och bättre på alla sätt. Faktum är att den webbsida du läser just nu, är genererad av 11ty v3.

Under kursen programmeringsövningar får du konstruera några olika typer av webbplatser med hjälp av 11ty, såsom en företags webb (corporate website), artikel/nyhets webb (news & articles website), samt en webbutik (web shop). Stylingen på kursen hanteras av Twitter Bootstrap, men det krävs inga förkunskaper av Bootstrap utan det mesta av stylingen tillhandahålls i samband med respektive övningsmoment.

I slutet av kursen, får du driftsätta en webbplats hos Netlify och koppla den till GitHub, på så sätt att en git push bygger och driftsätter en ny version. Vidare, får du anpassa webbplatsen till att text data ligger i en s.k. headless CMS.

Detta får du lära dig på kursen

Här är ett sammandrag i punktform av vad du får lära dig på kursen. Eftersom kursmaterialet är författat på engelska, så återger vi sammandraget också på engelska.

  • Understand what Static Site Generators (SSG) are and their SEO benefits.
  • Learn the history, purpose, and basic concepts of Eleventy (11ty).
  • Get familiar with various template formats and template languages.
  • Master layout configuration, including inheritance and including partials.
  • Manage asset files and configure pass-through files and images effectively.
  • Dive into advanced Nunjucks syntax and usage, including conditionals and loops.
  • Explore meta-data management with front-matter, template, and folder data files.
  • Define and use collections, tags, and iterate over collections.
  • Configure and implement pagination to generate dynamic or aggregated pages.
  • Learn deployment techniques and extend Eleventy with custom filters, shortcodes, and plugins.

Kursfakta

Här finner du alla detaljer om kursen.

  • Kursnamn

    Eleventy (11ty) - Static Site Generator
    Eleventy (11ty) - Static Site Generator (eng.)

  • Varaktighet

    3 dagar

  • Nivå

    Intermediate

  • Målgrupp

    Web programmerare

  • Förkunskapskrav

    Praktiska kunskaper i JavaScript, Node.js, CSS och HTML

  • Program & Verktyg

    • Node.js, NPM, NPX
    • MS Visual Code || JetBrains WebStorm
    • GitHub account (free)
    • Netlify account (free)
    • Hygraph account (free)

  • Publicerad

    1 augusti 2024

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, rabatteras tillkommande personer med 25%. Ni anmäler er till kursen en och en, men uppger samma företag, så ordnar vi resten. Samtliga deltagare från samma företag ingår på samma faktura, den första till fullt pris och resterande till rabatterat pris.

Klassrumskurs vid Östermalmstorg

Datum för klassrumskurser

Du sitter bekvämt i ett av våra klassrum. I priset ingår tryckt kursmaterial, samt kaffe/te med smörgås på förmiddagen och kaffe/te med bulle på eftermiddagen.

Pris: 18 000 kr + moms

Fjärrkurs via Zoom

Datum för fjärrkurser

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

Background

Eleventy

3 dagar

Kursen vänder sig till web programmerare och utgår från att deltagarna har praktiska kunskaper i javascript, node.js, css och html.

Företagsanpassad kurs, vi kommer till er

Företagsanpassad kurs

Om ni är tre eller fler personer från samma företag eller organisation, kan ni beställa en företagsanpassad kurs. Då håller vi kursen på ett datum som passar er. Antingen på plats i era lokaler eller som en fjärrkurs. Vi kan också hålla den muntliga framställningen på engelska.

Kontakta oss för en offert

Företagsanpassad Kurs

Jens Riboe

Jens Riboe

Senior/Expert Software Developer

5.0 Instructor/Author Rating

50+
Courses Authored
1000+
Students Lectured
40+
Years Experience

Jag har programmerat sedan början på 1980-talet i en stor mängd olika programspråk och på olika plattformar. Har jobbat på både stora och små företag, både etablerade och startups, samt både inom och utom Sverige. Att skriva (elegant) programkod är det bästa jag vet. Denna erfarenhet och passion är den centrala komponenten i våra kurser. Något som gör oss unika på marknaden och att våra kunder återkommer år efter år för nya och fördjupade kunskaper.

View LinkedIn Profile

Relaterade Kurser

Background

CSS för programmerare

CSS

CSS för programmerare

Kurs för programmerare om hur du tillämpar modern CSS i webb-applikationer

2 dagar Beginner
Background

Twitter Bootstrap

Bootstrap

Twitter Bootstrap

Kurs om hur du bygger moderna och snygga responsiva web applikationer med Twitter Bootstrap

2 dagar Intermediate
Background

Node.js grundkurs

Node.js

Node.js grundkurs

Kurs om hur du utvecklar applikationer i Node.js

3 dagar Intermediate
Background

Vue.js grundkurs

Vue.js 3

Vue.js grundkurs

Kurs om hur du bygger moderna SPA webb-applikationer med Vue 3

4 dagar Beginner