Serve Static Pages at Scale

Serve Static Pages at Scale presentation from Static-Sites Meetup Berlin by Mouafa Ahmed

Transcript

1. Serve static pages at scale Mouafa Ahmed
2. About me Mouafa Ahmed FE Tech Lead at Smartfrog @mouafa 2
4. The Challenge Imagine that your marketing team came to you asking for: • A fast way to publish hundreds of landing pages. • Support of different languages. • The ability to change the content of those landing pages without your intervention. 4
7. A History of solutions • Python script that generate static pages with all the available localisation. • Node.js script that basically do the same thing. 7
8. What we did right • Ability to handle many languages • Putting content in Contentful • The ability to change the content without touching the code 8
9. What we missed • The ability to change the content without redeploying • Mixing template with content in Contentful • A better Developer eXperience 9
10. 10 Mixing template with content
11. Landing Pages Examples 11
16. What is Motor “MOTOR is a lightweight engine aimed to rapidly build static pages” 16
18. section1 section2 section3 Template 18 Content
19. meta.json { "template": "ebook", "relations": [ { "contentfulID": "57tKmI41k4WQsUS28ckG0", "sectionID": "section1" }, { "contentfulID": "1R3Eo49Ez6MeQYsUcoYCm", "sectionID": "section2" }, { "contentfulID": "59zeHjZ9QAcKyESsu4Iue", "sectionID": "section3" } ] } 19
20. Routing 20 lang-country FS path
21. meta path Motor Engine lang, country rendered page prerender render Parse meta 21
22. Get Entries relations Motor Prerender Parse Entries Link Content Linked Content 22
23. Prepare the local context (content + i18n + linker) content Motor Render Resolve template Pug render With the prepared context rendered page template Lang, country 23
25. Environment variables NODE_ENV = development MOTOR_PORT = 4000 SPACE_ID = contentful_SPACE_ID ACCESS_TOKEN = contentful_ACCESS_TOKEN 25
26. Configuration const motor = require('motor') const path = require('path') const config = { path: { env: path.resolve(__dirname, '.env'), views: path.resolve(__dirname, 'views'), templates: path.resolve(__dirname, 'templates'), i18n: path.resolve(__dirname, 'i18n') }, static: [ { directory: 'static', path: path.resolve(__dirname, 'static') } ], supportedLangs: ['en', 'de'] } motor(config) 26
28. 28 Thank You @mouafa