DEV Community 👩‍💻👨‍💻

Play Button Pause Button
JavaScript Joel
JavaScript Joel

Posted on

CUSTOM REACT STATIC SITE GENERATOR (Live Coding) [Part 2] | JavaScript | NodeJS | ReactJS

Watch as I live code a Custom Static Site Generator using ReactJS.

The audio after (52:10) went to sh*t. Sorry about that.

I have a basic HTML template, which I use as the foundation to create my React Application. From this template I create all the React Components I need to render the gallery. After the components have been created I use renderToStaticMarkup to render then to a file.

If you missed Part 1: https://www.youtube.com/watch?v=inAWGWfpkHs

0:32 launch.json (for debugging)
0:53 package.json (babel / build scripts)
1:38 first build / console (hello world)
1:56 Hello React
4:35 index.html (the template)
12:30 config.yml (importing the data into the template)
29:10 first raw render of HTML
32:00 import images into gallery
45:30 gallery starting to look like a gallery
52:10 Audio goes to sh*t
52:28 Surprise Kitty!!!
59:10 Final render of Gallery (Ooof)
1:00:45 Deploy Live!
1:02:45 Epilogue

To follow along:

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

More Minute JavaScript Videos:

Screenshot of YouTube Channel

Top comments (2)

Collapse
 
maciejmyslinski profile image
Maciej

dude, what makes you blink so frequently?! 😄 super distracting.
Anyway, keep up the good work ;)

Collapse
 
joelnet profile image
JavaScript Joel

haha I will lose any staring contest!

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.