Many people use popular client-side libraries such as React and Angular, although many don't consider server-side rendering like VueJS, nevermind creating their own.

1. Creating Your Own Static
Website Generator
By Sean O’Mahoney

2. Pre-requisites to Follow Along Demo
 Have NodeJS installed
 If you want to put it online, have a GitHub account and GitHub installed
 Ideally have Visual Studio Code installed (although any other text editor works)
 That’s it!

3. How I Came Up With This?
 Recreating Jekyll (written in Ruby) in NodeJS:
 https://github.com/Sean12697/JekyllJS

4. What/Why?
 Sometimes called SSR, that being Server Side Rendered
 Essentially a server will create files (HTML/CSS/JS/etc) which will be served
 Great for data that is not subject to frequent changes or is by yourself
 Can lead to great performance (since everything is already compiled)
 (TTFB = Time to First Byte, FCP = First Contentful Paint, TTI = Time to Interactive)
 Usually better security, no open API endpoints, accessing databases, etc
 Also being server side, you can use any API Keys to get/render data from other sources
 Ideal for custom portfolios/blogs

5. https://developers.google.com/web/updates/2019/02/rendering-on-the-web

6. Why Custom?
 No restriction to a framework (which could be providing too much abstraction)
 (essentially, you are in charge of the code and can understand if it breaks easier)
 Any data could be used to generate the site, from files, json or even using API calls
 If you have web optimisation knowledge, you can use Chrome Dev Tools to increase
performance
 It’s fun!

7. https://blog.mwaysolutions.com/2013/11/08/client-vs-serverside-rendering-the-big-battle-2/

8. Quick Audit
 Around 100 HTML files generated
 0.2 Seconds until initial load
 100 in Performance, Accessibility, Best Practice and SEO in Google Lighthouse

9. Live Demo!
https://github.com/Sean12697/simple-static-site-generator
https://github.com/Sean12697/codeup-static-ssr-demo

10. NPM Packages I Use
 fs – built in, used to access the file system (create files)
 copy-dir – easily copy directories, for example a _statics folder to _site
 shelljs – use commands like mkdir and rm to create and delete files/folders
 beautify – adds tabbing/formatting to code stings like JSON
 minify – removes comments and empty space from strings, reducing size
 xml-js – quite self explanatory, turns xml into json, used to get data from sitemaps
 @octokit/rest – the official package for GitHub, can get users repos

11. Any Questions?