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.

Creating Your Own Static Website Generator


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Creating Your Own Static Website Generator

  1. 1. Creating Your Own Static Website Generator By Sean O’Mahoney
  2. 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. 3. How I Came Up With This?  Recreating Jekyll (written in Ruby) in NodeJS: 
  4. 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. 5.
  6. 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. 7.
  8. 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. 9. Live Demo!
  10. 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. 11. Any Questions?