DEV Community

0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:00
 
JavaScript Joel
JavaScript Joel

Posted on

3 1

CUSTOM STATIC SITE GENERATOR (Live Coding) [Part 1] | JavaScript | NodeJS | Images

Watch as I live code a custom static site generator using JavaScript/Node.js.

In this video, I take an images directory, optimize the images, create thumbnails and also create a webp version of the image.

Part 2: https://www.youtube.com/watch?v=UCWxte7IqME

03:30 Setup ESLint + Prettier
08:50 Setup the Debugger
10:15 Output first resized image
22:15 Output images as webp
22:55 Finally set the correct Glob path
26:30 Finally fix ESLint
30:25 Refactor
39:35 Generate Thumbnails
42:15 Final Code

To follow along:

git checkout https://github.com/joelnet/mojo-gallery.git
cd mojo-gallery
git checkout youtube-video-part-1

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up