{"id":23459348,"url":"https://github.com/mlomboglia/jekyll-react-webpack","last_synced_at":"2025-07-18T01:10:45.729Z","repository":{"id":35030166,"uuid":"178865164","full_name":"mlomboglia/jekyll-react-webpack","owner":"mlomboglia","description":"Jekyll boilerplate with React using Webpack","archived":false,"fork":false,"pushed_at":"2022-10-06T04:40:17.000Z","size":1169,"stargazers_count":17,"open_issues_count":3,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-13T16:09:07.022Z","etag":null,"topics":["gulp","jekyll","react","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mlomboglia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":"https://www.paypal.me/mlomboglia"}},"created_at":"2019-04-01T13:05:56.000Z","updated_at":"2024-04-22T03:34:57.000Z","dependencies_parsed_at":"2022-08-08T04:00:53.134Z","dependency_job_id":null,"html_url":"https://github.com/mlomboglia/jekyll-react-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mlomboglia/jekyll-react-webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlomboglia%2Fjekyll-react-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlomboglia%2Fjekyll-react-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlomboglia%2Fjekyll-react-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlomboglia%2Fjekyll-react-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlomboglia","download_url":"https://codeload.github.com/mlomboglia/jekyll-react-webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlomboglia%2Fjekyll-react-webpack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261129818,"owners_count":23113897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp","jekyll","react","webpack"],"created_at":"2024-12-24T06:13:47.130Z","updated_at":"2025-06-21T13:35:48.283Z","avatar_url":"https://github.com/mlomboglia.png","language":"JavaScript","funding_links":["https://www.paypal.me/mlomboglia"],"categories":[],"sub_categories":[],"readme":"# Jekyll Boilerplate with React using Webpack\n\n[![npm version](https://badge.fury.io/js/jekyll-react-webpack.svg)](https://badge.fury.io/js/jekyll-react-webpack)\n[![GitHub issues](https://img.shields.io/github/issues/mlomboglia/jekyll-react-webpack)](https://github.com/mlomboglia/jekyll-react-webpack/issues)\n[![GitHub license](https://img.shields.io/github/license/mlomboglia/jekyll-react-webpack)](https://github.com/mlomboglia/jekyll-react-webpack/blob/master/LICENSE)\n\n**A Jekyll boilerplate for building modern websites 🌲**\n\nDescription available in Medium Post:\nhttps://medium.com/better-programming/build-your-great-modern-static-website-with-this-boilerplate-using-jekyll-react-and-webpack-cd63e03e4984\n\n---\n\nThis is an update of the great boilerplate built by Forestry team incorporating the ideas shared by Alli Zadrozny on his post \"Using Webpack and React with Jekyll\". All the libraries have been updated, so you can now run Jekyll with React using Webpack as the wrapper.\n\nThis boilerplate wraps [Jekyll](https://jekyllrb.com) with [Gulp](https://gulpjs.com/) as your local development build pipeline.\n\n[PostCSS](http://postcss.org/) and [Webpack](https://webpack.js.org/) + [Babel](https://babeljs.io/) are used for CSS and JS compiling \u0026 transpiling.\n\n[BrowserSync](https://www.browsersync.io/) is used for providing a modern local development experience, allowing you to preview your site on multiple devices in sync.\n\n[BrowsersList](https://github.com/ai/browserslist) is used for configuring Browser support.\n\n[SVG Sprite](https://github.com/jkphl/svg-sprite) is used to generate an SVG Sprite.\n\n# Installation\n\n## Prerequisites\nTo use Gulp, you must have [Node](https://nodejs.org/en/download/) and [NPM](https://www.npmjs.com/get-npm) installed.\n\nIf you encounter problems:  Gulp is currently not working with Node 12, downgrade to Node 11\n\n```\nnpm install -g n\nsudo n 11.15.0\n```\n\n## Setup\n\nOnce the prerequisites are installed, clone the repository to your local machine, and then run:\n\n```\n(sudo) gem install bundler\n```\n```\n(sudo) bundle install\n```\n```\nnpm install\n```\n\nThis will install Jekyll as well as all of the Node dependencies needed to run your Jekyll environment. This may take a little while!\n\n# Development\nAll development tasks are performed using npm run. See `\"scripts\"` in [package.json](/package.json) for a full list of commands.\n\n## Local Development\n\nLocal development is powered by BrowserSync, you will be able to develop sites rapidly through:\n\n- A local development server at `http://localhost:3000/`.\n- Automatic CSS updates without reloading the page\n- Automatic page reloads when content is changed\n\nRunning the local development server is as simple as running:\n\n```\nnpm start\n```\n\n*This will display all draft, future-dated, or expired content, which is not included in your production build.*\n\nIf you'd like to develop with the site as it will appear in production, run:\n\n```\nnpm run preview\n```\n\n## Production Build\n\nTo generate a final production build on your local machine you can run:\n\n```\nnpm run build\n```\n*The fresh production build of your site will end up in the `dist/` directory.*\n\n# Project Structure\n```\n.\n├── .tmp/                  // Temporary directory for development server\n├── dist/                  // The production build\n├── site/                  // The Jekyll project, with all content and static files\n|   ├── _data/             // YAML files containing site data\n|   ├── _posts/            // Jekyll's built-in blogging content type\n|   ├── _layouts/          // Your theme layouts\n|   ├── _includes/         // Your theme partials\n|   ├── css/               // Where compiled CSS files live\n|   ├── js/                // Where compiled JS files live\n|   ├── img/               // Where theme images live\n|   ├── uploads/           // Where user uploads are stored\n|   ├── _config.yml        // Production configuration settings\n|   ├── _development.yml   // Settings for local development only\n|   ├── 404.md             // Error page for your site\n|   └── index.md           // Homepage of your site\n└─── config                // Config packs\n└─── scripts               // Forestry base scripts\n└─── src/\n     ├── css               // CSS/SCSS source files to be compiled to /css/\n     └── js                // JS source files to be compiled to /js/\n      └── components       // Add your REACT components here /js/\n      scripts.js           // REACT Base handler    \n```\n\n# Inline SVG\nAny SVGs found in `src/img/` will be combined into a single SVG Sprite at `site/svg/sprite.symbol.svg`.\n\nThis boilerplate comes with a simple include for using SVGs in your layouts. You can select an svg by passing in its ID.\n\n```\n{% comment %}\n  Using a logo stored at src/img/github.svg\n{% endcomment %}\n{% include svg.html id=\"github\" class=\"optional-class\" width=\"32\" height=\"32\" %}\n```\n**Note: the `class`, `width`, and `height` params are optional**\n\n# Testing\nThis boilerplate comes with standard [ESLint](https://eslint.org/) and [StyleLint](https://github.com/stylelint/stylelint) configurations that will lint your CSS and JS for errors or common style issues, which work with most popular IDEs.\n\nThe tests can also be run from the command line:\n\n- **JS:** `npm run eslint`\n- **CSS:** `npm run stylelint`\n\nIf you want to automatically fix lint errors, you can do this from the command line as well:\n\n- **JS:** `npm run eslint:fix`\n- **CSS:** `npm run stylelint:fix`\n\n# Cleanup\n\nThis boilerplate is self-cleaning, and will remove the production `dist/` and development `.tmp/` folders every time a command is run to ensure that their contents are always up to date.\n\nIf you wish to manually cleanup, run:\n\n```\nnpm run clean\n```\n\n# Configuration\nAll build tasks are handled by Gulp and are located in `gulpfile.babel.js`. All parts of the build are configurable in discrete files to make management easy.\n\n## Paths\nAll build source and destination paths can be configured from `static-scripts.config.js`.\n\n## Jekyll\nThe build commands for Jekyll can be configured from `stat-cscripts.config.js`. Build commands are set based on the `NODE_ENV` environment variable. You can optionally load different args using the `GENERATOR_ARGS` environment variable.\n\nFour options are available:\n- `default`: the default build commands that are always run\n- `development`: additional build commands for the development server\n- `preview`: additional build commands for a production development server\n- `production`: additional build commands for production builds\n\n## BrowserSync Development Server\nThe configuration for BrowserSync is found in `.browsersyncrc.js`\n\n## CSS/SASS\nThe configuration for PostCSS is found in `.postcssrc.js`\n\n## Browser support\nBoth PostCSS and Webpack use `.browserslistrc` to decide on browser support when compiling.\n\n## Licensing\nThis boilerplate project is released under the [MIT license](/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlomboglia%2Fjekyll-react-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlomboglia%2Fjekyll-react-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlomboglia%2Fjekyll-react-webpack/lists"}