Gatsby Theme Changelog

Gatsby Theme Changelog is a Gatsby theme for building changelog and release-notes sites where each release is authored as an MDX post with optional tags, and the output is a static, SEO-friendly site. It runs on the Gatsby framework and is published by Abdessalam BENHARIRA, with a live demo at gatsby-demo-changelog.netlify.com.

What is Gatsby Theme Changelog?

Gatsby Theme Changelog is a prebuilt Gatsby theme that turns MDX files into a browsable changelog website. You provide content in content/posts/[POST_TITLE]/index.mdx with frontmatter containing fields like type, title, date, draft, author, and tags; the theme generates pages for individual posts, a posts index, tag archives, and static pages. It is installed as an npm package (gatsby-theme-changelog) and added as a plugin in gatsby-config.js. The theme is authored by Abdessalam BENHARIRA and has a public repository with 9 stars.

What makes Gatsby Theme Changelog stand out?

• Theme UI styling — The theme's look is built on Theme UI, so you can adjust colors, typography, and global styles through a single theme object in gatsby-plugin-theme-ui.
• PrismJS syntax highlighting — Code blocks in your release notes get PrismJS highlighting out of the box.
• Gatsby Image integration — Images are optimized through Gatsby Image, giving you responsive and lazy-loaded assets.
• MDX for releases — Each release is a Markdown/MDX file, letting you embed React components inside your changelog posts.
• Tags support — Frontmatter tags create tag pages and act as filters for grouping releases by category.
• Static pages — Non-post content types get static pages, so you can add an about page, documentation, or any custom page.
• SEO friendly — The layout includes a dedicated SEO component that generates meta tags and structured data.
• Customizable through shadowing — You can override any theme component (like Nav.js and Nav.css) using Gatsby's component shadowing, or merge your own Theme UI styles into the base theme via src/gatsby-plugin-theme-ui/index.js.
• Code quality tooling — The theme ships with ESLint, Stylelint, and Prettier configurations to keep your code consistent.

Who should use Gatsby Theme Changelog?

• Open-source maintainers — Publish version-by-version release notes for libraries or tools without building a custom site from scratch.
• SaaS product teams — Maintain a public changelog that announces new features, fixes, and improvements to users.
• Technical writers — Structure product updates as tagged MDX posts and let the theme handle pagination, tags, and SEO.
• Developers who want a lightweight static site — Use Gatsby's static output to host a fast changelog on Netlify, Vercel, or GitHub Pages.

Use cases

• Project maintainers: Write release notes as MDX files, tag them (for example New or Fixed), and get a clean, filterable changelog with minimal setup.
• SaaS teams: Share product updates on a dedicated changelog page integrated into your marketing site or as a separate site.
• Individual developers: Keep a personal change log for side projects with the theme's built-in SEO and image optimization.

How does Gatsby Theme Changelog work?

1. Install the theme via npm or yarn and add it to the plugins array in gatsby-config.js.
2. Configure site metadata and theme options like basePath, contentPath, postsPerPage, and themeSwitcher.
3. Create MDX post files under the content path with the required frontmatter fields.
4. Run gatsby develop to preview the site, and gatsby build to generate static HTML.

The theme also includes a global style helper (globalStyle.js) that imports CSS files from the src/assets directory, and templates for posts, posts listing, tags, and static pages live in the src/templates folder.

FAQ

Is Gatsby Theme Changelog free to use?

Yes, the theme is published as an open-source npm package. Its repository includes a LICENSE file and contributions via issues and pull requests are welcome.

How do I customize the theme?

You can override components using Gatsby's component shadowing. Create a folder named gatsby-theme-changelog inside src and place your own files there, such as src/gatsby-theme-changelog/components/Nav.js. You can also customize the Theme UI styles by creating a src/gatsby-plugin-theme-ui folder and merging your custom theme object with the base theme.

What configuration options are available?

In gatsby-config.js, you can set basePath, tagsPath, contentPath, and assetPath under the plugin options. The siteMetadata block accepts url, title, author, description, logo, locale, and a themeConfig object that toggles the theme switcher and 'load more posts' behavior and controls postsPerPage and postsIncrementBy.

Can I write posts in MDX?

Yes, release posts are written in MDX. They live in content/posts/[POST_TITLE]/index.mdx and include frontmatter with type, title, date, draft, author, and tags.

Does the theme support tags?

Yes, add a tags array to the frontmatter. The theme generates tag archive pages automatically from the available tags.