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

5

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

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!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more