NPM is the recommended installation method. To install Entu SSG run:
$ npm install entu-ssg
To build Your site run:
$ npx entu-ssg build /path-to-my-page/entu-ssg-config.yaml
If source folder is Git repository Entu SSG runs incremental build (based on Git changes since last commit). To run full build use full as second parameter:
$ npx entu-ssg build /path-to-my-page/entu-ssg-config.yaml full
MacOS and Windows GUI for local development are downloadable from github.com/entu/ssg-app. Or run (for full build use full as second parameter):
$ npx entu-ssg serve /path-to-my-page/entu-ssg-config.yaml
Sites build process is configurable by Yaml file and its path must be first argument for entu-ssg.js. Required parameters are:
locales:
- en
- et
defaultLocale: et
source: ./src
js: ./src/_scripts
styl: ./src/_styles
build: ./dist
server:
port: 4000
public: ./public
dev:
aliases: true
paths:
- test/page1
- test/page2
ignorePaths:
- test/page3
Page is generated from index.pug file. All other .pug files are ignored, but You can use those files for include/extends. You can put locale identificator to filename (like index.en.pug) for locale specific content.
To pass content and configuration to index.pug use data.yaml file. This data is passed to index.pug in object named self (To get property text from data.yaml use self.text in index.pug).
You can put locale identificator to filename (like data.en.yaml) for locale specific content. This way You can use index.pug as a template and pass all locale specific texts from "data" files.
Some page parameters will change how HTML is generated. Those are:
Some additional parameters are passed to template in self object. Those are:
path: /testpage1
aliases:
- /test
- /test123
data:
news: ./datafiles/news.yaml
someOtherData:
- A
- B
To use same template for multiple pages (blog posts for example) you can put array of objects into data.yaml file. Each object must describe page as explained above.
If You need to use keys do distinct each page there is option to use object in data.yaml file with parameter multipage: true. In this case You can use page path as key.
-
path: /testpage1
someOtherData:
- A
- B
-
path: /testpage2
someOtherData:
- C
- D
multipage: true
page1:
path: /testpage1
someOtherData:
- A
- B
page2:
path: /testpage2
someOtherData:
- C
- D
To pass same content to all index.pug files use global.yaml file. This data is passed to index.pug in object named self (To get property footer from global.yaml use self.footer in index.pug). Data what is set in pages's own data.yaml will expand/overwrite global.yaml.
You can put locale identificator to filename (like global.en.yaml) for locale specific content.
For inserting inline CSS to individual pages use style.styl file in page's folder. Generated style is inserted just before </head>
tag.
You can put locale identificator to filename (like style.en.styl) for locale specific style.
For inserting inline JS to individual pages use .js file in page's folder. Generated script is inserted just before </body>
tag.
You can put locale identificator to filename (like script.en.js) for locale specific script.
- src
|- _scripts
| |- somescript.js
| +- somescript2.js
|
|- _styles
| +- style.styl
|
|- _templates
| |- layout.pug
| +- mixins.pug
|
|- testpage1
| |- data.en.yaml
| |- data.et.yaml
| +- index.pug
|
|- testpage2
| |- data.yaml
| |- index.en.pug
| |- index.et.pug
| |- style.styl
| |
| +- testpage2en
| |- data.en.yaml
| |- index.en.pug
| +- script.en.js
|
|- data.yaml
|- global.yaml
+- index.pug
- dist
|- en
| |- index.html
| |- testpage1
| | +- index.html
| |
| +- testpage2
| |- index.html
| +- testpage2en
| +- index.html
|
|- et
| |- index.html
| |- testpage1
| | +- index.html
| |
| +- testpage2
| +- index.html
|
|- script.js
|- script.js.map
|- style.css
+- style.css.map