The Gatsby Machine Learning Starter is a Gatsby V1 starter blog designed for writing research, mathematics, and machine learning content with interactive demos and charts.
What is the Gatsby Machine Learning Starter?
This is a ready-to-use scientific blog starter kit built on Gatsby V1. It takes content written in Markdown files (posts, pages, and parts) and queries it through GraphQL to generate a static blog site. The starter is maintained by DanShai and released under the MIT License. It includes preconfigured webpack and Babel settings to avoid heap crashes during builds and to support generator functions in JavaScript.
Key Features
- Editable Markdown content — Write posts, pages, and parts in Markdown files, queried via GraphQL for easy customization.
- TensorFlow.js integration — Includes a modified version of the tfjsx React package to run machine learning models directly in the browser.
- Chart.js integration — Uses react-chartjs instead of Plotly because Plotly doesn't compile during deployment; useful for plotting loss, accuracy, and other charts.
- KaTeX support — Renders mathematical expressions and research notation inside Markdown.
- CSV plugin support — Load and work with CSV data files within posts.
- Mermaid graph diagrams — Embed graphical schemes and flowcharts in Markdown using Mermaid syntax.
- Customizable base styles — The starter comes with easy-to-adjust base styles.
- ESLint and Prettier — Code is set up with ESLint and Prettier for consistent code style.
Who is it for?
- Machine learning researchers — Document experiments with live TensorFlow.js demos and Chart.js loss and accuracy plots.
- Math and science writers — Write equations with KaTeX and diagrams with Mermaid without leaving Markdown.
- Gatsby developers — Use a ready-made scientific blog instead of configuring webpack, Babel, and plugins from scratch.
What can you do with it?
- Publish research notes — Write Markdown posts that include live TensorFlow.js model demos and interactive charts.
- Create data-driven articles — Import CSV data and visualize it with Chart.js.
- Explain algorithms — Combine KaTeX formulas with Mermaid flowcharts to break down complex concepts.
How does it work?
Install the Gatsby CLI with npm install --global gatsby-cli, then create a new site from this starter. Content is added as Markdown files, and the starter's build configuration is already set to handle the included plugins and avoid deployment failures like Plotly's compilation issue.
FAQ
Is the Gatsby Machine Learning Starter free?
Yes, it is released under the MIT License. The repository description says "eat it! burn it! do whatever you want with it!"
What version of Gatsby does it use?
The starter is built for Gatsby V1. There is also a separate repository for a Gatsby V2 version mentioned in this README.
Why does it use Chart.js instead of Plotly?
Because Plotly doesn't compile when deploying, the author used react-chartjs to provide chart functionality without deployment issues.





