Want to see an example of a multi-page website using Prismic? Look no further! In this project, we provide all the code you need for a personal website with a homepage, information pages, and a navigation. Let's see how to set up Prismic to get this up and running.

As mentioned above, we provide you with all the source code you need to get this example website working. After you set up your content repository we will show you how to configure the code, preview your content, and deploy your site to the web.

Start a content repository

A content repository is where you define, edit and publish your content.

 

Create a “homepage” custom type

Custom types allow you to define and configure fields for your content.

This homepage will contain a mandatory banner section as well as a Slice zone. The slice zone will consist of a number of templated sections to pick and choose from. This way a content author can independently fill in and arrange their pages how they want.

You will only need one instance of the "homepage" type, so this will be a Single Type. In the repository you've just created, go to Custom Types, create a new type, select Single Type, and give it the name Homepage. Make sure that it has the API ID of "homepage". Once created, paste the following code into the JSON editor and save.

{
  "Main" : {
    "homepage_banner" : {
      "type" : "Group",
      "config" : {
        "fields" : {
          "title" : {
            "type" : "StructuredText",
            "config" : {
              "single" : "heading2",
              "label" : "Banner Title",
              "placeholder" : "Site Title..."
            }
          },
          "tagline" : {
            "type" : "StructuredText",
            "config" : {
              "single" : "paragraph",
              "label" : "Tagline",
              "placeholder" : "Site Tagline..."
            }
          },
          "button_link" : {
            "type" : "Link",
            "config" : {
              "label" : "Button Link"
            }
          },
          "image" : {
            "type" : "Image",
            "config" : {
              "constraint" : {
                "width" : 2000,
                "height" : null
              },
              "thumbnails" : [ ],
              "label" : "Banner Image"
            }
          },
          "button_label" : {
            "type" : "StructuredText",
            "config" : {
              "single" : "paragraph",
              "label" : "Button Label"
            }
          }
        },
        "label" : "Homepage Banner",
        "repeat" : false
      }
    },
    "page_content" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "labels" : {
          "text_section" : [ {
            "name" : "1col",
            "display" : "1 Column"
          }, {
            "name" : "2col",
            "display" : "2 Columns"
          } ]
        },
        "choices" : {
          "text_section" : {
            "type" : "Slice",
            "fieldset" : "Text Section",
            "description" : "Simple text section with either one or two columns",
            "icon" : "text_fields",
            "non-repeat" : {
              "rich_text" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
                  "label" : "Rich Text",
                  "placeholder" : "Text..."
                }
              }
            },
            "repeat" : { }
          },
          "quote" : {
            "type" : "Slice",
            "fieldset" : "Quote",
            "description" : "A stylized quote",
            "icon" : "format_quote",
            "non-repeat" : {
              "quote_text" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Quote Text"
                }
              }
            },
            "repeat" : { }
          },
          "full_width_image" : {
            "type" : "Slice",
            "fieldset" : "Full Width Image",
            "description" : "A wide, thin image",
            "icon" : "broken_image",
            "non-repeat" : {
              "image" : {
                "type" : "Image",
                "config" : {
                  "constraint" : {
                    "width" : 980,
                    "height" : 300
                  },
                  "thumbnails" : [ ],
                  "label" : "Image"
                }
              }
            },
            "repeat" : { }
          },
          "image_gallery" : {
            "type" : "Slice",
            "fieldset" : "Image Gallery",
            "description" : "A collection of images, each with a description and an optional link",
            "icon" : "image",
            "non-repeat" : {
              "gallery_title" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading2, heading3",
                  "label" : "Gallery Title",
                  "placeholder" : "Image Gallery Title..."
                }
              }
            },
            "repeat" : {
              "image_description" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Image Description",
                  "placeholder" : "Image description..."
                }
              },
              "link" : {
                "type" : "Link",
                "config" : {
                  "label" : "Link",
                  "placeholder" : "Optional Link"
                }
              },
              "link_label" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Link Label",
                  "placeholder" : "Optional Link Label"
                }
              },
              "image" : {
                "type" : "Image",
                "config" : {
                  "constraint" : {
                    "width" : 727,
                    "height" : 402
                  },
                  "thumbnails" : [ ],
                  "label" : "Image"
                }
              }
            }
          },
          "image_highlight" : {
            "type" : "Slice",
            "fieldset" : "Image Highlight",
            "description" : "A section to highlight an image with title, text, and optional link",
            "icon" : "star",
            "non-repeat" : {
              "featured_image" : {
                "type" : "Image",
                "config" : {
                  "constraint" : {
                    "width" : 727,
                    "height" : 402
                  },
                  "thumbnails" : [ ],
                  "label" : "Featured Image"
                }
              },
              "title" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading2",
                  "label" : "Image Title",
                  "placeholder" : "Featured Title..."
                }
              },
              "headline" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading3",
                  "label" : "Image Headline",
                  "placeholder" : "Featured Headline..."
                }
              },
              "link" : {
                "type" : "Link",
                "config" : {
                  "label" : "Featured Link",
                  "placeholder" : "Optional Link"
                }
              },
              "link_label" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Featured Link Label",
                  "placeholder" : "Optional Link Label"
                }
              }
            },
            "repeat" : { }
          }
        }
      }
    }
  }
}

 

Create a “page” custom type

The page custom type will be just like the homepage type, but without the mandatory banner section at the top. It will also take advantage of slices to make creating pages easier and more dynamic.

In this case, we will create more than one page, so the custom type will fall into the category of Repeatable Type.

Go to Custom Types, create a new type, select Repeatable Type, and name it Page. Make sure that it has an API ID value of "page". Once created, paste the following code into the JSON editor and save.

{
  "Main" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "placeholder" : "meaningful-unique-identifier...",
        "label" : "Unique ID"
      }
    },
    "page_content" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "labels" : {
          "text_section" : [ {
            "name" : "1col",
            "display" : "1 Column"
          }, {
            "name" : "2col",
            "display" : "2 Columns"
          } ]
        },
        "choices" : {
          "text_section" : {
            "type" : "Slice",
            "fieldset" : "Text Section",
            "description" : "Simple text section with either one or two columns",
            "icon" : "text_fields",
            "non-repeat" : {
              "rich_text" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
                  "label" : "Rich Text",
                  "placeholder" : "Text..."
                }
              }
            },
            "repeat" : { }
          },
          "quote" : {
            "type" : "Slice",
            "fieldset" : "Quote",
            "description" : "A stylized quote",
            "icon" : "format_quote",
            "non-repeat" : {
              "quote_text" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Quote Text"
                }
              }
            },
            "repeat" : { }
          },
          "full_width_image" : {
            "type" : "Slice",
            "fieldset" : "Full Width Image",
            "description" : "A wide, thin image",
            "icon" : "broken_image",
            "non-repeat" : {
              "image" : {
                "type" : "Image",
                "config" : {
                  "constraint" : {
                    "width" : 980,
                    "height" : 300
                  },
                  "thumbnails" : [ ],
                  "label" : "Image"
                }
              }
            },
            "repeat" : { }
          },
          "image_gallery" : {
            "type" : "Slice",
            "fieldset" : "Image Gallery",
            "description" : "A collection of images, each with a description and an optional link",
            "icon" : "image",
            "non-repeat" : {
              "gallery_title" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading2, heading3",
                  "label" : "Gallery Title",
                  "placeholder" : "Image Gallery Title..."
                }
              }
            },
            "repeat" : {
              "image_description" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Image Description",
                  "placeholder" : "Image description..."
                }
              },
              "link" : {
                "type" : "Link",
                "config" : {
                  "label" : "Link",
                  "placeholder" : "Optional Link"
                }
              },
              "link_label" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Link Label",
                  "placeholder" : "Optional Link Label"
                }
              },
              "image" : {
                "type" : "Image",
                "config" : {
                  "constraint" : {
                    "width" : 727,
                    "height" : 402
                  },
                  "thumbnails" : [ ],
                  "label" : "Image"
                }
              }
            }
          },
          "image_highlight" : {
            "type" : "Slice",
            "fieldset" : "Image Highlight",
            "description" : "A section to highlight an image with title, text, and optional link",
            "icon" : "star",
            "non-repeat" : {
              "featured_image" : {
                "type" : "Image",
                "config" : {
                  "constraint" : {
                    "width" : 727,
                    "height" : 402
                  },
                  "thumbnails" : [ ],
                  "label" : "Featured Image"
                }
              },
              "title" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading2",
                  "label" : "Image Title",
                  "placeholder" : "Featured Title..."
                }
              },
              "headline" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading3",
                  "label" : "Image Headline",
                  "placeholder" : "Featured Headline..."
                }
              },
              "link" : {
                "type" : "Link",
                "config" : {
                  "label" : "Featured Link",
                  "placeholder" : "Optional Link"
                }
              },
              "link_label" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Featured Link Label",
                  "placeholder" : "Optional Link Label"
                }
              }
            },
            "repeat" : { }
          }
        }
      }
    }
  }
}

 

Write some content

Start by creating three pages: a homepage and two regular pages.

Go to Content, hit New, and select the Homepage type. Fill in the content for the homepage banner, then add slices to add the page content.

Save and publish!

Now, create two information pages. Go to Content, hit New, and select the Page type. Make sure to fill the mandatory UID field that is used for that page's URL. Add some content slices, then save and publish!

 

Create a "menu" custom type

Next we need to create a custom type that allows the content managers to add and order links in a navigation bar. We will use a group of links in order to accomplish this.

We will only need one instance of this custom type, so it falls into the category of Single Type.

Create a new custom type, select Single Type, and give it the name Menu. Make sure that it has the API ID of "menu". Once created, paste the following JSON into the type editor & save.

{
  "Main" : {
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "placeholder" : "Menu title...",
        "single" : "heading1"
      }
    },
    "menu_links" : {
      "type" : "Group",
      "config" : {
        "fields" : {
          "label" : {
            "type" : "StructuredText",
            "config" : {
              "single" : "paragraph",
              "label" : "Link Label",
              "placeholder" : "Link Label..."
            }
          },
          "link" : {
            "type" : "Link",
            "config" : {
              "label" : "Link",
              "placeholder" : "Select a Link..."
            }
          }
        },
        "label" : "Menu Links"
      }
    }
  }
}

 

Fill in the menu

Let’s fill in the menu with your pages.

Go to Content, hit New, and choose the Menu type. Give the menu a title, and add all your pages.

For each page you want to add to the navigation bar: 

  1. Add a Link Label 
  2. Click on Link, then “What kind of link do you want to insert?,” select “Link to a Document,” and select the appropriate page.

Save and publish!

 

Run the website

Let’s see if things are working. First, download the website source code.

 
Point it to your content repository API

Let's modify the link in our configuration file to point to our repository's API endpoint.

// In src/prismic-configuration.js
apiEndpoint: 'https://your-repo-name.prismic.io/api/v2'

And once more in the index file

// In public/index.html
window.prismic = {
  endpoint: 'https://your-repo-name.prismic.io/api/v2'
};

Fire up a terminal (command prompt or similar on Windows), point it to your project location and run!

npm install
npm start

Your site should be running locally in http://localhost:3000 now. Check out how all your content is being shown, and how changes in your repository are reflected.

 
Deploy & go live!
We are going to be using Netlify to easily deploy our React app. They offer several options to deploy your site, including a useful Continuous Deployment option if your project is on a repository in GitHub, GitLab or Bitbucket. It's a great idea if you've cloned our repository to get started. For this project, we're going to use their command line tools to perform a manual deployment.

Once you have signed up in their platform, open up a terminal, navigate to your project folder, and install their command line tools package.

$ npm install netlify-cli -g

If this install fails, you can try again with a sudo command

$ sudo npm install netlify-cli -g

We are now going to use the netlify commands to setup your project and link your folder to Netlify.

$ npm run build
$ netlify deploy

Follow the instructions to create and configure your new Netlify site. When it gives you the option to select the deploy path to use, select "./build"
This prepares a draft deploy that you can review using the Live Draft URL it provides. You're now ready to publish your deployment

$ netlify deploy --prod

And specify the deploy path "./build" as before. You can check the status of your manual deployment using the Netlify web app, change your site's name and open it.
Congratulations! Your Prismic site is now live!  
 

Customize to your likings

You should easily find what to modify in the code to customize the website: just edit the stylesheets and the templates to fit your design!
 

About Prismic

Prismic is content management made easy and fast with publishing benefits:

  • Full versioning of your content
  • A nice rich editor to create and edit your content
  • Collaboration with other users you choose to add to your repository
  • Performance and scalability for your content using a Content Delivery Network around the world
Did this answer your question?