Want to see an example of a multi-page website using prismic.io? 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.io 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. prismic.io will automatically assign it an API ID of "homepage". Once created, paste the following JSON into the type editor and save.

{
  "Main" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "placeholder" : "meaningful-unique-identifier...",
        "label" : "Unique ID"
      }
    },
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "placeholder" : "Site Title...",
        "single" : "heading2"
      }
    },
    "tagline" : {
      "type" : "StructuredText",
      "config" : {
        "placeholder" : "Site Tagline...",
        "single" : "paragraph"
      }
    },
    "buttonLink" : {
      "type" : "Link",
      "fieldset" : "Button Link",
      "config" : {
        "placeholder" : "Button Link"
      }
    },
    "buttonText" : {
      "type" : "Text",
      "config" : {
        "placeholder" : "Button Text"
      }
    },
    "backgroundImage" : {
      "type" : "Image",
      "config" : {
        "placeholder" : "Background Image",
        "constraint" : {
          "width" : 2000
        }
      }
    },
    "body" : {
      "type" : "Slices",
      "fieldset" : "Page content",
      "config" : {
        "labels" : {
          "textSection" : [ {
            "name" : "1col",
            "display" : "1 Column"
          }, {
            "name" : "2col",
            "display" : "2 Columns"
          } ]
        },
        "choices" : {
          "heading" : {
            "type" : "StructuredText",
            "fieldset" : "Section Heading",
            "config" : {
              "placeholder" : "Text...",
              "single" : "heading1, heading2, heading3"
            }
          },
          "textSection" : {
            "type" : "StructuredText",
            "fieldset" : "Text Section",
            "config" : {
              "placeholder" : "Text...",
              "labels" : [ "quote" ]
            }
          },
          "fullWidthImage" : {
            "type" : "Image",
            "fieldset" : "Full Width Image",
            "config" : {
              "constraint" : {
                "width" : 980,
                "height" : 300
              }
            }
          },
          "highlight" : {
            "type" : "Group",
            "fieldset" : "Highlight",
            "config" : {
              "repeat" : false,
              "fields" : {
                "title" : {
                  "type" : "StructuredText",
                  "config" : {
                    "placeholder" : "Highlight Title",
                    "single" : "heading2"
                  }
                },
                "headline" : {
                  "type" : "StructuredText",
                  "config" : {
                    "placeholder" : "Highlight Headline",
                    "single" : "heading3"
                  }
                },
                "link" : {
                  "type" : "Link",
                  "fieldset" : "Optional Link",
                  "config" : {
                    "placeholder" : "Optional Link"
                  }
                },
                "linkText" : {
                  "type" : "Text",
                  "config" : {
                    "placeholder" : "Optional Link Text"
                  }
                },
                "image" : {
                  "type" : "Image",
                  "config" : {
                    "constraint" : {
                      "width" : 727,
                      "height" : 402
                    }
                  }
                }
              }
            }
          },
          "gallery" : {
            "type" : "Group",
            "fieldset" : "Image Gallery",
            "config" : {
              "repeat" : true,
              "fields" : {
                "image" : {
                  "type" : "Image",
                  "config" : {
                    "placeholder" : "Image",
                    "constraint" : {
                      "width" : 727,
                      "height" : 402
                    }
                  }
                },
                "description" : {
                  "type" : "StructuredText",
                  "config" : {
                    "placeholder" : "Image Description...",
                    "single" : "paragraph"
                  }
                },
                "link" : {
                  "type" : "Link",
                  "fieldset" : "Optional Link",
                  "config" : {
                    "placeholder" : "Optional Link"
                  }
                },
                "linkText" : {
                  "type" : "Text",
                  "config" : {
                    "placeholder" : "Optional Link Text"
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

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. prismic.io will automatically assign it an API ID of "page". Once created, paste the following JSON into the type editor and save.

{
  "Main" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "placeholder" : "meaningful-unique-identifier...",
        "label" : "Unique ID"
      }
    },
    "body" : {
      "type" : "Slices",
      "fieldset" : "Page content",
      "config" : {
        "labels" : {
          "textSection" : [ {
            "name" : "1col",
            "display" : "1 Column"
          }, {
            "name" : "2col",
            "display" : "2 Columns"
          } ]
        },
        "choices" : {
          "heading" : {
            "type" : "StructuredText",
            "fieldset" : "Section Heading",
            "config" : {
              "placeholder" : "Text...",
              "single" : "heading1, heading2, heading3"
            }
          },
          "textSection" : {
            "type" : "StructuredText",
            "fieldset" : "Text Section",
            "config" : {
              "placeholder" : "Text...",
              "labels" : [ "quote" ]
            }
          },
          "fullWidthImage" : {
            "type" : "Image",
            "fieldset" : "Full Width Image",
            "config" : {
              "constraint" : {
                "width" : 980,
                "height" : 300
              }
            }
          },
          "highlight" : {
            "type" : "Group",
            "fieldset" : "Highlight",
            "config" : {
              "repeat" : false,
              "fields" : {
                "title" : {
                  "type" : "StructuredText",
                  "config" : {
                    "placeholder" : "Highlight Title",
                    "single" : "heading2"
                  }
                },
                "headline" : {
                  "type" : "StructuredText",
                  "config" : {
                    "placeholder" : "Highlight Headline",
                    "single" : "heading3"
                  }
                },
                "link" : {
                  "type" : "Link",
                  "fieldset" : "Optional Link",
                  "config" : {
                    "placeholder" : "Optional Link"
                  }
                },
                "linkText" : {
                  "type" : "Text",
                  "config" : {
                    "placeholder" : "Optional Link Text"
                  }
                },
                "image" : {
                  "type" : "Image",
                  "config" : {
                    "constraint" : {
                      "width" : 727,
                      "height" : 402
                    }
                  }
                }
              }
            }
          },
          "gallery" : {
            "type" : "Group",
            "fieldset" : "Image Gallery",
            "config" : {
              "repeat" : true,
              "fields" : {
                "image" : {
                  "type" : "Image",
                  "config" : {
                    "placeholder" : "Image",
                    "constraint" : {
                      "width" : 727,
                      "height" : 402
                    }
                  }
                },
                "description" : {
                  "type" : "StructuredText",
                  "config" : {
                    "placeholder" : "Image Description...",
                    "single" : "paragraph"
                  }
                },
                "link" : {
                  "type" : "Link",
                  "fieldset" : "Optional Link",
                  "config" : {
                    "placeholder" : "Optional Link"
                  }
                },
                "linkText" : {
                  "type" : "Text",
                  "config" : {
                    "placeholder" : "Optional Link Text"
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

Write some content

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

Go to Content, hit New, and select the Homepage type. Enter “homepage” for the Unique ID, 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. prismic.io will automatically assign it the API ID of "menu". Once created, paste the following JSON into the type editor. Save.

{
  "Main" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "placeholder" : "type a meaningful unique identifier...",
        "label" : "Unique ID"
      }
    },
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "placeholder" : "Menu title...",
        "single" : "heading1"
      }
    },
    "menuLinks" : {
      "type" : "Group",
      "fieldset" : "Menu Links",
      "config" : {
        "fields" : {
          "label" : {
            "type" : "Text",
            "config" : {
              "placeholder" : "Link label"
            }
          },
          "link" : {
            "type" : "Link",
            "config" : {
              "placeholder" : "Link"
            }
          }
        }
      }
    }
  }
}  

Fill in the menu

Let’s fill in the menu with your pages.

Go to Content, hit New, and choose the Menu type. Set the UID to "main-nav", 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.

Download Source Code

Point it to your content repository API.

// In prismic-configuration.js set up your API endpoint:
apiEndpoint: "http://your-repo-name.prismic.io/api",

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

npm install
npm install -g nodemon
nodemon

Deploy & go live

An easy way to deploy your Node.js application is to use Heroku. Just follow these few simple steps once you have successfully signed up and installed the Heroku toolbelt:

Create a file with the name Procfile at your application root. Put the following code in the Procfile file:

web: node app.js

Create a new Heroku application

$ heroku create

Initialize a new Git repository

$ git init
$ heroku git:remote -a your-heroku-app-name

Commit your code to the Git repository and deploy it to Heroku

$ git add .
$ git commit -am "make it better"
$ git push heroku master

Ensure you have at least one node running

$ heroku ps:scale web=1

You can now browse your application online

$ heroku open

All set up!

You should be able to see your working website. Click on the links in the navigation to see all your pages.

You should easily be able to modify this example site to create your own website: just edit the stylesheets and templates to fit your design.

Did this answer your question?