Using Webpack and React with Jekyll

Scope

Integrating Jekyll and Webpack

Pre-work: Setting up your dev environment

1. Rearrange your project structure

.
├── _config.yml
├── _includes
│ ├── …
├── _layouts
│ ├── default.html
│ ├── page.html
│ └── post.html
├── _posts
│ ├── …
├── _sass
│ ├── _base.scss
│ ├── _layout.scss
│ └── _syntax-highlighting.scss
├── about.md
├── css
│ └── main.scss
├── feed.xml
└── index.html
.
├── _config.yml
├── package.json
├── public
│ ├── …
├── src
│ ├── _includes
│ │ ├── …
│ ├── _layouts
│ │ ├── default.html
│ │ ├── page.html
│ │ └── post.html
│ ├── _posts
│ │ ├── …
│ ├── _sass
│ │ ├── …
│ ├── about.md
│ ├── assets
│ │ ├── css
│ │ ├── images
│ │ └── javascripts
│ │ └── bundle.js
│ ├── feed.xml
│ └── index.html
├── webpack
│ ├── entry.js
│ └── components
│ └── …
└── webpack.config.js
destination: public
source: src

2. Add package.json

{
"name": "jekyll-webpack-es6-boilerplate",
"version": "0.1.1",
"description": "Example jekyll blog integrated with webpack and npm",
"authors": [
{
"name": "Allison Zadrozny",
"email": "allison@allizad.com"
}
],
"license": "ISC",
"devDependencies": {
}
}

3. Add Webpack folder

4. Configure webpack

module.exports = {
// webpack folder’s entry js — excluded from jekll’s build process.
entry: "./webpack/entry.js",
output: {
// we’re going to put the generated file in the assets folder so jekyll will grab it.
// if using GitHub Pages, use the following:
// path: "assets/javascripts"
path: "src/assets/javascripts/",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: "babel", // "babel-loader" is also a legal name to reference
query: {
presets: ["react", "es2015"]
}
}
]
}
};

5. Ignore all the things!

.sass-cache
.jekyll-metadata
public
src/assets/bundle.js
node_modules
.sass-cache
.jekyll-metadata
assets/bundle.js
node_modules
exclude: ['node_modules']

6. Include your bundle.js in your html

<!DOCTYPE html>
<html>

<body>
<script type="text/javascript" src="/assets/javascripts/bundle.js" charset="utf-8"></script></body>
</html>

<!DOCTYPE html>
<html>

<body>


{% javascript bundle %}

</body>
</html>

7. Install dependencies

$ npm install webpack babel-core babel-loader babel-preset-es2015 babel-preset-react react react-addons-update react-dom --save-dev
{
"name": "jekyll-webpack-es6-boilerplate",
"version": "0.1.1",
"description": "Example jekyll blog integrated with webpack and npm",
"authors": [
{
"name": "Allison Zadrozny",
"email": "allison@allizad.com"
}
],
"license": "ISC",
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"react": "^15.0.2",
"react-addons-update": "^15.0.2",
"react-dom": "^15.0.2"
}
}

8. Add some test javascript to entry.js

9. Build your site!

10. Create a React Component

import React, { Component } from 'react';class Hello extends Component {
render() {
return (
<div>Hey, y’all!!</div>
)
}
}
export default Hello;
import React, { Component } from 'react';
import {render} from 'react-dom';
import Hello from './components/Hello';
class App extends Component {
render() {
return (
<Hello />
)
}
}
render(<App />, document.getElementById('root'));

10. Mount your component!

<!DOCTYPE html>
<html>

<body>
<div id="root"></div>
{% javascript bundle %}
</body>
</html>
<!DOCTYPE html>
<html>

<body>
<div id="root"></div>
<script type="text/javascript" src="/assets/javascripts/bundle.js" charset="utf-8"></script>
</body>
</html>

11. Rerun your build and see your component!

In Closing

Now you’re one of the cool kids.

--

--

--

Design Lead & Developer @ bonsai.io/websolr.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alli Zadrozny

Alli Zadrozny

Design Lead & Developer @ bonsai.io/websolr.com

More from Medium

A Quick How-To Create React App with TypeScript

QR Codes generation with React

React v18.0 hooks — useTransition & useDeferredValue

React Js | JavaScript Frontend Library