Gatsby V2 Scientific Blog Starter is a blog template built on Gatsby V2 for producing scientific, mathematical, and machine-learning content, with out-of-the-box support for TensorFlow.js demos, KaTeX math rendering, Chart.js visualizations, and Mermaid diagrams.
What is the Gatsby V2 Scientific Blog Starter?
This starter takes Markdown files as input and outputs a static blog using Gatsby's GraphQL data layer. It combines a blog frontend with specialized scientific writing tools: a modified TensorFlow.js package for interactive ML demos, KaTeX for mathematical expressions, Chart.js for loss and accuracy plots, and Mermaid for diagrams. The template is available on GitHub and licensed under the MIT License.
Key Features
- Markdown content via GraphQL — Write posts, pages, and parts in Markdown; Gatsby queries them through GraphQL for easy customization.
- TensorFlow.js integration — A modified tfjsx React package works inside Gatsby to embed interactive machine learning demos.
- Chart.js for ML metrics — Uses react-chartjs instead of Plotly (which fails during deployment) to display loss curves, accuracy graphs, and other charts.
- KaTeX math rendering — Mathematical expressions and research formulas render directly in the browser with KaTeX.
- CSV plugin support — Load and work with tabular data from CSV files in your Markdown posts.
- Mermaid diagram support — Embed graphical schemes and flowcharts in Markdown using Mermaid syntax.
- Customizable styles and tooling — Base styles are easy to override, and ESLint and Prettier are configured for consistent code quality.
Who is it for?
- Machine learning practitioners — Write up model experiments and include live TensorFlow.js demos and training charts.
- Researchers and academics — Publish research notes or papers with KaTeX-formatted equations and Mermaid diagrams.
- Science educators — Create lesson posts that combine CSV datasets, formulas, and visual explanations.
What can you do with it?
- Share interactive ML demos — Embed a TensorFlow.js model that readers can run directly in the blog post.
- Visualize training metrics — Use Chart.js to plot loss and accuracy curves alongside your narrative.
- Write math-heavy posts — Render LaTeX-style formulas with KaTeX without any build-time processing.
- Diagram explanations — Add Mermaid graphs and flowcharts to your Markdown content.
How does the starter work?
Install the Gatsby CLI globally with npm install --global gatsby-cli, then create a new site from this starter. Content is written in Markdown files inside the content directory, and Gatsby compiles them into static pages using GraphQL queries. Deploy the output to any static host such as GitHub Pages (the demo site runs on GitHub Pages).
FAQ
Is this starter free to use?
Yes, the starter is released under the MIT License, so you can use and modify it freely, including for commercial projects.
Does it support math formulas?
Yes, KaTeX is integrated, so you can write mathematical expressions in Markdown and they will render in the browser.
Why use Chart.js instead of Plotly?
The author notes that Plotly does not compile when deploying, so react-chartjs is used instead — making it reliable for showing loss and accuracy functions and other charts.
Can I load CSV data in posts?
Yes, the template includes CSV plugin support, so you can read and display data from CSV files in your Markdown content.
