Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Theme for HIPS catalogs

How to use this theme


This theme is installed on top of an existing HIPS catalog and makes it possible to display it’s content in a browser. The catalog is autogenerated by hips deploy and should contain a /catalog_index.json file and a /solutions/ directory containing the solutions and their media files.


You can add the website functionality to a catalog by running the following commands:

yarn init
yarn add gatsby react react-dom gatsby-theme-hips

Setup required files

You need to add a minimal version of your logo as SVG to /src/images/icon.svg. This is used as the favicon in the browser. To change the icon on the website content header, copy the same file or a bigger version of your logo to /src/gatsby-theme-hips/images/icon.svg.

Next, create a markdown page in /pages/about.md and describe what this collection is about. Use this template:

layout: page
title: About
permalink: /about/

Add your about section here.

Then create a new file called /gatsby-config.js where you add this and adjust title and subtitle to your need:

module.exports = {
 siteMetadata: {
    title: 'MY HIPS',
    subtitle: 'HIPS Catalog theme',
  plugins: [
      resolve: "gatsby-theme-hips",
      options: {},

That’s it, you can now run your gatsby site using

yarn gatsby develop

Optional adjustments

Change the content of the start page

Add a new file here: /src/gatsby-theme-hips/components/home.js. This is the default content:

import React from "react"
import { Box, Link } from "theme-ui"

const Home = () => (
  <Box>Welcome! Please visit the <Link href="/catalog">catalog</Link> to get an overview of our solutions deployed via HIPS.</Box>
export default Home

Adding more pages

Add new pages to /pages analogue to about.md and add them to the top menu by adjusting siteMetadata.menuLinks in gatsby-config.js.

© 2023 Gatsby, Inc.