13. Templating Engines: Pug - Gr0mi4/Hello-World GitHub Wiki

  1. Learn about Pug syntax: https://itnext.io/pug-js-to-make-your-life-easier-with-html-templates-9c62273626e0

  2. Rewrite all html pages to Pug format, hardcoding all data at this step. You can use this helpful converter to simplify and speed up the process: http://html2jade.org/ Compile with this command pug src --pretty --out build.

  3. Break down pages to smaller pieces – components. Each component lives in its own file and then use include to include other components into each other or into main templates: include otherfile.pug.

  4. Learn about data interpolation syntax: https://pugjs.org/language/interpolation.html

  5. For every page create a json file with data necessary to render the page:

/pages
  /about
    - index.pug
    - data.json

index.pug (example)

doctype html
html(lang="en")
  head
    title= title

  body
    h1 Pug - node template engine

data.json (example)

{
  "title": "Hello world"
}

Then compile using this command: pug src/pages/about/index.pug --pretty --out build/pages/about -O src/pages/about/data.json. Unfortunately without JS you'll need to create a long chain of these commands to compile all pages:

"pug": "npm run pug:page-about && npm run pug:page-main && ..."
"pug:page-about": "pug src/pages/about/index.pug --pretty --out build/pages/about -O src/pages/about/data.json",
"pug:page-main": "pug src/pages/main/index.pug --pretty --out build/pages/main -O src/pages/main/data.json",
...