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/ 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 and add them to the top menu by adjusting siteMetadata.menuLinks in gatsby-config.js.