Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Présentation du générateur de site statique eleventy
Similar to Présentation du générateur de site statique eleventy (20)
Recently uploaded
Recently uploaded (20)
Présentation du générateur de site statique eleventy
- 1. Eleventy aka 11ty webmardi.ch 6 juillet 2021 By Gilles Vauvarin
- 2. ● Blog : pixenjoy.com ● Twitter : @pixenjoy ● Side project : thewhale.cc ● Twitter : @thewhalecc ● Mastodon : thewhalecc@framapiaf.org ● Side project : k-review.com ● Stack : - HTML, CSS (TailwindCSS) - JS (Svelte, AlpineJS) - NodeJS (AdonisJS) - CMS (Kirby) - JAMstack (11ty) Hey ! Gilles Vauvarin Web developer
- 3. Evolution of web architectures ... Dynamic monolithic sites CGI, PHP, CMS, BDD, Back Frameworks ... 1993 1989 2005 HTML pages Birth of the web, hypertextes links SPA, JAMstack ... SPA, Headless CMS, API, SSG, Front Frameworks, PWA ...
- 4. 1996: HTML pages Request: “http://site.com/page.html” Response: <html><body> ... SERVER BROWSER page.html page1.html page2.html page3.html page4.html ...
- 5. 1989: Dynamic monolithic sites Request: “http://site.com/page” Response: <html><body> ... SERVER BROWSER Template page.php PHP BDD Query SQL
- 6. 2005: JAMstack > SSG > build step SSG Ex: Eleventy Template : page.njk Data : Markdown, JSON, BDD (API) page1.html page2.html page3.html page4.html ... Build on server +
- 7. 2005: JAMstack > CDN > disponibility Request: “http://site.com/page.html” Response: <html><body> ... CDN SERVER BROWSER page1.html page2.html page3.html page4.html ...
- 8. Eleventy Static web sites JAMstack JS - API - Markup SSG Static Site Generator
- 9. Why are we interested in static sites? Eco-design (consumes less server resources) Security (no server-side, no DB) Cost reduction (Hosting, maintenance) Performance (if well implemented!, CDN)
- 10. Eleventy’s author Web Developer for Netlify Zach Leatherman https://github.com/11ty/eleventy
- 11. Eleventy’s characteristics NodeJS, packages npm Not a framework But an HTML generator Flexible Templates, Folders, Data JavaScript 01 02 03
- 12. Some key concepts of Eleventy 01 Front matter 02 Template 03 Layout 04 Collection 05 Files architecture 06 Data cascade 07 Plugin & Filter 08 Data 09 Installation & deployment
- 13. 01 Front Matter Metadata in front page
- 14. Front Matter quesako ? - Instruction block composed of key/value and located in the header of templates. - Allows you to indicate instructions to Eleventy and to pass data to the templates. - Written in JSON, JavaScript or YAML. You can even add your own format!
- 15. example.njk
- 17. 02 Template Content in different forms
- 18. Template quesako ? - Templates are content files formatted via a tag system (HTML, Markdown) or a more advanced templating language (Handlebars, Mustache, Liquid, Nunjucks ...). Eleventy support 11 templating language ! - These templates indicate how the content and data should be used in the pages that will be built by Eleventy.
- 19. template.njk
- 20. What we can do with Nunjucks? It’s like HTML with super power !
- 26. Layout quesako ? - Layouts are special templates for wrapping content in other content. It’s quite similar to <slot> if you use a JS framework like React, Vue, Svelte ... - Their use is optional, as templating languages like Nunjuncks have similar functions.
- 27. mylayout.njk
- 28. content.md
- 29. index.html
- 31. Collection quesako ? - A collection allows you to group content. - Use the keyword “tags” in the frontmatter to attach a content in a collection. - We can loop through a collection to display all their items. - You can attach a content to several collection.
- 32. post.md
- 33. post.njk
- 34. 05 Folders & Files How is the file system organized in Eleventy?
- 35. Folders & Files By default all files in the root project folder will be compiled into the _site directory. root_project_folder ├── assets ├── file.md ├── file.njk └── _site Use an .eleventyignore file to let eleventy know which files you do not want to compile.
- 36. Folders & Files To copy your assets in the final static website, use addPassthroughCopy root_project_folder / .eleventy.js
- 37. Folders & Files root_project_folder / .eleventy.js Custom files system:
- 38. 06 Data Cascade Read the data in a certain order
- 39. Data cascade quesako ? - The data, depending on their origin, are read in a certain order and with a certain priority. We distinguish : - Global data - Data files that apply to a folder - Data files that apply to a template - The frontmatter data of a layout - The frontmatter data of a template - Computed data https://benmyers.dev/blog/eleventy-data-cascade/
- 40. 07 Plugin & Filters Extend functionality and apply filters to content
- 41. Plugins - They allow to extend the functionalities of 11ty - Step 1: install the plugin in your 11ty project via npm - Step 2: call the plugin in your 11ty config file (.eleventy.js) - Do something at the built step - Examples: > generate a RSS feed > manage images optimization > manage syntax highlighting ...
- 42. Plugins - Step 1: in a terminal - Step 2 : in your config file .eleventy.js
- 43. Filters - They allow to modify a content - Template language comes with built in filters - Custom filter > definition of a "filterName" function in the .eleventy.js file - Used in a template like this : {{ myContent | filterName }}
- 45. Filters root_project_folder / input / page.njk
- 46. 08 Data How to fetch data?
- 47. From files or an API - Eleventy can work with data coming from different sources : > Local files (md, html, templates …) > Local data (frontmatter, global data …) > External source (external API, Headless CMS API)
- 48. Data from an external API my-root-project/input/ _data/about.js
- 49. Data from an external API my-root-project/input/ about/about.njk
- 50. 09 Installation & Deployment How to install & deploy Eleventy?
- 51. Installation NodeJS (v.10 min) and npm are required
- 53. Installation How to run eleventy now ?
- 54. Deployment Static files are easy to deploy ... Vercel Netlify Cloudflare pages
- 55. Deployment - Version your project in a Git repository (Github, Gitlab, Bitbucket …). - Choose a hosting company (Netlify, Vercel …). - Link Netlify or whatever to your Git repository (dashboard). - Allow Netlify or whatever and your Git platform to talk to each other (Git platform SSH). - Select your static site from your Git platform (dashboard). - Configure your settings: branch, publish directory (dashboard). - Use a build hook to watch your update on your Git repository and trigger an automatic deployment.
- 56. Static sites ... for which type of projects? - Content Website (up to a certain size) - Website with few daily update Corporate website, documentation, blog, landing page, portfolio, agency website ... and many more. > 80% of Web ?
- 57. Eleventy - Pretty fast build times. - Zero-config by default but has flexible configuration options. - Works with your project’s existing directory structure. - Node/javaScript ecosystem. - Output pur HTML/CSS. - Works with multiple template languages. - Great use of data files/sources. - OpenSource. Con Pro - Sparse documentation. - Limited tooling, community, tutorials. - Not for very big website (build time, deployment) - Do not manage dynamic part. - You have to know how to write code to publish content by default (Markdown).
- 58. Mixing static and dynamic Meta frameworks Next, Nuxt, Sveltekit, Astro ... Headless CMS Strapi, WP, Kirby, Forestry ... Serverless functions Netlify, Vercel, Cloudflare ...
- 59. Questions ? ● Blog : pixenjoy.com ● Twitter : @pixenjoy ● Side project : thewhale.cc ● Twitter : @thewhalecc ● Mastodon : thewhalecc@framapiaf.org ● Side project : k-review.com Gilles Vauvarin
- 60. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik THANKS