ACT Gatsby Starter is a Gatsby-based starter template for building blogs, documentation sites, and e-learning platforms entirely from markdown (MDX) files, with built-in support for Ant Design UI components and the gatsby-plugin-combine plugin.
What is ACT Gatsby Starter?
ACT Gatsby Starter is an open-source Gatsby starter that turns markdown files into interconnected web pages. It takes MDX documents — markdown with embedded JSX — as input and produces a complete static website with blog posts, snippet reference pages, and complex custom pages. The starter is maintained by act-labs and relies on gatsby-plugin-combine to merge multiple page sections, each with their own GraphQL queries and data-processing functions. Users edit pages in the src/content/posts and src/content/snippets directories, and all content is stored as ordinary MDX files.
Key Features
- Posts and snippets — Two main content types: full posts and short, cross-referenced snippets grouped in collections for quick lookup.
- MDX support — Posts and snippets are ordinary MDX files, allowing embedded JSX components such as charts, data tables, quiz popups, or tabbed text.
- Ant Design integration — A set of ready-to-use React UI components from Ant Design, including icons referenced in snippet menu definitions.
- gatsby-plugin-combine — A plugin that progressively builds complex pages by combining multiple constituent parts, each with its own queries and data processing.
- Common Gatsby plugins — Includes React Helmet for SEO and meta tags, code syntax highlighting, and image optimization.
- Customized webpack and babel config — Provides shorter, stable aliases for JavaScript imports that resist directory structure changes.
Who is it for?
- Content authors — Writers who want to manage a blog or documentation site by editing markdown files in src/content/posts and src/content/snippets without touching React code.
- Developers — Teams that need to create complex, interactive React components within pages, using MDX to embed charts, quizzes, or other dynamic elements.
- Documentation and e-learning teams — Groups building reference sites with cross-linked snippets and tutorials, where the snippet system makes related information easier to navigate.
What can you do with ACT Gatsby Starter?
- Bloggers: Publish MDX posts with frontmatter for title, keywords, and order, and take advantage of embedded React components for richer articles.
- Documentation maintainers: Structure content as snippet collections — each with a sidebar menu defined in YAML — and reference snippets from longer posts to avoid duplication.
- Educators: Build e-learning pages that split content into tabs, embed quizzes, and interlink concepts through the posts-and-snippets model.
How does ACT Gatsby Starter work?
To get started, create a new Gatsby site using the starter with gatsby new, then run npm install and npm run develop. The development server runs on localhost:8000, with live preview as you edit MDX files in the src/content directories. Frontmatter fields in each MDX file control display, and any MDX document can import and render another snippet with a simple JSX tag.
FAQ
Is ACT Gatsby Starter free?
Yes, it is an open-source starter hosted on GitHub under the act-labs organization, and contributions such as pull requests and issues are welcome.
Do I need to know React to use ACT Gatsby Starter?
Basic content editing only requires markdown. Creating complex pages, modifying page layouts, or embedding custom JSX components requires knowledge of React and Node.js modules.
How do I add a new blog post?
Create an MDX file in the src/content/posts directory. Include frontmatter with at least title, keywords, and order fields.
What is a snippet in ACT Gatsby Starter?
A snippet is a short write-up, such as a code excerpt, grouped by subject into a collection. Each collection has a sidebar menu defined in a YAML file with group names and Ant Design icons.
