How to use React in Jekyll?

Help
1

I know, it might be a weird question. But still, How to use React in Jekyll?

1 Like
2

Not the answer you want but maybe give Gatsby a look. It’s a static site generator like Jekyll but React based.

https://www.gatsbyjs.org/

2 Likes
3

Do you want to basically blend the create-react-app & Jekyll? If so, I want to hear why as I have a project that is doing just that. Just need user feedback to make sure it’s useful.

4

I have also thought @navarrorc, that using create-react-app and adding Jekyll would solve the problem then instead it would increase the problem because react will not understand how Jekyll import the files from other sources.

And Jekyll is Ruby-based and React is Node.js based, so I don’t think they would work :stuck_out_tongue_winking_eye:

5

I think the approach would be best configured in your Webpack config., similar to a GulpJS setup with Jekyll, so @yashumittal it probably is possible. But probably more trouble than it’s worth.

6

I have a Jekyll, React, Webpack, Node, Babel on Minimal Mistakes with a Netlify Docker Build.
Check out the Todo React component in the lower right sidebar of https://donboulton.com
Repo is at: GitHub Repo

1 Like
7

Hi there,

Did you manage to use Jekyll with create-react-app? I know you can use Webpack and React with Jekyll. But I’m looking for a solution to use create-react-app instead.

8

Hi there, could you please share your project? I also need to use a create-react-app inside a Jekyll site.

9

Did anyone ever figure out a solution to this? I am trying to deploy some minor React additions to a friend’s Jekyll site and can’t seem to get the two to play nice together.

11

My current setup has gotten easier with create-react-app. Here’s a summary:

  • create a react-app and tell jekyll to ignore it
  • make sure to update the package.json with the correct subfolder where the app will live
  • run the build, and then copy it over the subfolder where the app will live

my full write-up with detailed instructions are here: https://www.blairanderson.co/2020/create-react-jekyll/

12

You can use an npm package to deploy to Github Pages. The docs have a Github Pages section halfway down this page.

Here is a repo which is based on that and deploys a JS compiled and Jekyll built site to an empty repo for serving on GH Pages

13

These might not be as useful, but they are related

1 Like
14

If you deploy with Netlify.com instead you can avoid adding on dependencies or adding a second site to version control. Just make your Netlify build command compile the JS and build Jekyll, then serve that output directory directly. And you can mirror the command locally for easy testing.

I just found a site built with Netlify, React and Jekyll:

Here is the command used in the Netlify build command there:

Gatsby, Hugo and other Jekyll alternatives will run on Netlify too. Since Gatsby was mentioned above.

15

Oh and there is also Github workflows that can be used to compile React for GH Pages I think. Tutorial for Hugo workflow https://www.freecodecamp.org/news/publish-a-no-code-website-in-10-minutes/

1 Like