This is a Jekyll blog. If you’re not familiar with Jekyll, it’s a very simple site generator where you can write blog posts using Markdown, and it will generate the final HTML pages (you can specify a theme). I put these Jekyll-generated HTML files online using Cloudflare Pages, which is another product I love. Anytime I need to host static websites, I use Cloudflare Pages or GitHub Pages. I put up my code in a private GitHub repo, and Cloudflare connects to that, recognizes the repo as a Jekyll repo, and serves the HTML files. Also, since I bought the domain on Cloudflare, I didn’t even have to edit DNS records – Cloudflare did it for me. Anyway, that’s my love letter to Cloudflare. Onwards to the interactive playground bit.

All the playgrounds are React components inside a single React app that I’ll call react-blog-app. To include them in Jekyll, I use Webpack config to create blog-post-specific bundle.js files, by adding new entry points for each blog post. Like the one used in the viewbox post is called viewbox.bundle.js. After that, all you need to do is put this bit of code in the Markdown post.

<div id="root"></div>
<script src="/app/dist/viewbox.bundle.js"></script>

In Jekyll’s config.yml, I’ve added an “include” statement for the dist folder, like so:

include: - react-blog-app/dist/

This is cool because I just have to run npm run build inside my react-blog-app, and then commit and push to GitHub, and that’s it, the site is live. For this blog, I just push to main and deploy that branch. There are no custom scripts to remember or maintain, and it’s not hosted anywhere that I have to maintain. Very happy with this setup.