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.
For this project, we provide you with all the source code you need to get your blog up and running. We will also walk you through setting up a new Prismic project from terminal using the 'prismic-cli' tool, which will not only copy all the required code for you to get started right away, but also setup the required content repository for you in a few simple steps.
Setting up a Prismic project from a sample
We're going to kickstart our project by using the command line tool
prismic theme which takes care of every step of your initial setup in a streamlined manner.
The first step will be to install the 'prismic-cli' package. Launch a terminal instance, from where you will run the command to globally install the package.
$ npm install -g prismic-cli
Once it's been installed, you just need to navigate to where you want to create your new project folder and run the following command. This will create a new Prismic content repository, setup the custom types, and install the project code:
$ prismic theme https://github.com/prismicio/nextjs-website
The interface will guide you through creating a local folder for your project and creating a new Prismic account, or logging into your existing account if you already have one.
Navigate to the folder you have just created, and open
Confirm that the name you have chosen for your content repository has been setup as the API endpoint that the web application will use to fetch the content you create in Prismic.
Write some content
Visit the repository you have just created in your browser. It will show in your Prismic Dashboard, just as any other repositories you create. Select your master language and it's time to create some content! Start off by creating a homepage and a couple pages that we can navigate to.
Go to Content and hit New, choose the Homepage type. Fill in the content for the homepage banner, add some slices of content to flesh out 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 the navigation 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:
- Add a Link Label
- 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 blog
Now that we have some content to show off, let's check back on the code that will run your blog. Open your project folder once more in the terminal and run the development command.
$ npm run dev
This will launch a local development server at http://localhost:3000.
Getting ready to deploy to a serverless platform
If you want other people to view your new blog site, then you need to publish it in a public platform. For this purpose we will be using Now, by the same development team that works on Next.js, so it's not surprising that they're made for each other.
We'll be taking advantage of the serverless feature that deploying Next.js apps in Now provides.
But why just read about it, when we can follow a couple steps to actually try it out. You can follow the official recommendation and install Now globally with Now Desktop, or just use locally the Now package we have included with this project. No need to be concerned, whichever method you use, the end result will be the same for your site.
Deploy and go live!
You only have to navigate to your project's folder in the terminal and run the command
now if you've installed Now globally, or the following command if you want to use the included package instead.
$ npm run deploy
Follow the steps to either login or sign up to a Now account. The build process will begin now, with the configuration files and custom routing having been already been set up for you. After your project has been built on the cloud, a web address will be assigned automatically and copied to your clipboard.
That's it! You can now view your new site from any browser.
Customize to your liking
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! And if you're wondering about how the web app works or wish to learn more about expanding this project into a bigger, more personal project, feel free to contact us and we'll be happy to help you in getting your Next.js project with Prismic off the ground.
Just curious about the code?
If you aren't interested in recreating this project and would just like to look at the code then you can download the project here.