Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

Présentation du générateur de site statique eleventy

Download to read offline

Cette présentation s'est déroulée dans le cadre des "Webmardi" le 6 juillet 2021. https://webmardi.ch/

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Présentation du générateur de site statique eleventy

  1. 1. Eleventy aka 11ty webmardi.ch 6 juillet 2021 By Gilles Vauvarin
  2. 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. 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. 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. 5. 1989: Dynamic monolithic sites Request: “http://site.com/page” Response: <html><body> ... SERVER BROWSER Template page.php PHP BDD Query SQL
  6. 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. 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. 8. Eleventy Static web sites JAMstack JS - API - Markup SSG Static Site Generator
  9. 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. 10. Eleventy’s author Web Developer for Netlify Zach Leatherman https://github.com/11ty/eleventy
  11. 11. Eleventy’s characteristics NodeJS, packages npm Not a framework But an HTML generator Flexible Templates, Folders, Data JavaScript 01 02 03
  12. 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. 13. 01 Front Matter Metadata in front page
  14. 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. 15. example.njk
  16. 16. 02 Template Content in different forms
  17. 17. 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.
  18. 18. template.njk
  19. 19. What we can do with Nunjucks? It’s like HTML with super power !
  20. 20. 03 Layout Content in content
  21. 21. 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.
  22. 22. mylayout.njk
  23. 23. content.md
  24. 24. index.html
  25. 25. 04 Collection Categorize content
  26. 26. 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.
  27. 27. post.md
  28. 28. post.njk
  29. 29. 05 Folders & Files How is the file system organized in Eleventy?
  30. 30. 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.
  31. 31. Folders & Files To copy your assets in the final static website, use addPassthroughCopy root_project_folder / .eleventy.js
  32. 32. Folders & Files root_project_folder / .eleventy.js Custom files system:
  33. 33. 06 Data Cascade Read the data in a certain order
  34. 34. 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/
  35. 35. 07 Plugin & Filters Extend functionality and apply filters to content
  36. 36. 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 ...
  37. 37. Plugins - Step 1: in a terminal - Step 2 : in your config file .eleventy.js
  38. 38. 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 }}
  39. 39. Filters root_project_folder / .eleventy.js
  40. 40. Filters root_project_folder / input / page.njk
  41. 41. 08 Data How to fetch data?
  42. 42. 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)
  43. 43. Data from an external API my-root-project/input/ _data/about.js
  44. 44. Data from an external API my-root-project/input/ about/about.njk
  45. 45. 09 Installation & Deployment How to install & deploy Eleventy?
  46. 46. Installation NodeJS (v.10 min) and npm are required
  47. 47. Installation In your terminal :
  48. 48. Installation How to run eleventy now ?
  49. 49. Deployment Static files are easy to deploy ... Vercel Netlify Cloudflare pages
  50. 50. 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.
  51. 51. 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 ?
  52. 52. 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).
  53. 53. Mixing static and dynamic Meta frameworks Next, Nuxt, Sveltekit, Astro ... Headless CMS Strapi, WP, Kirby, Forestry ... Serverless functions Netlify, Vercel, Cloudflare ...
  54. 54. Questions ? ● Blog : pixenjoy.com ● Twitter : @pixenjoy ● Side project : thewhale.cc ● Twitter : @thewhalecc ● Mastodon : thewhalecc@framapiaf.org ● Side project : k-review.com Gilles Vauvarin
  55. 55. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik THANKS
  • JulienRabaud

    Jul. 26, 2021

Cette présentation s'est déroulée dans le cadre des "Webmardi" le 6 juillet 2021. https://webmardi.ch/

Views

Total views

75

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×