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.
1. Install the Prismic Command Line Tool
The first step will be to install the 'prismic-cli' package to be able to run the needed Prismic commands. Launch a terminal, from where you will run the command to globally install the package.
npm install -g prismic-cli
If for some reason this command doesn't work for you, try executing a sudo command:
sudo npm install -g prismic-cli
2. Run the theme command
Once the installation is finished, navigate to the location where you want to create your new project folder and run the following command. This will create a new Prismic repository along with different custom types and install the project code:
prismic theme --theme-url https://github.com/prismicio/nodejs-website --conf prismic-config.js
(MAKE SURE YOU'RE USING THE LATEST VERSION OF THE CLI)
This command will ask you to add a name to create a Prismic repository and the name of the local folder to initialize the project.
Navigate to the folder you have just created. In the ‘config’ folder open the 'prismic-config.js' file and confirm that the name you have chosen for your Prismic repository has been set up correctly as the API endpoint that the web application will use to fetch the content you will create in Prismic.
3. Write some content
Start by creating a homepage and two regular pages in your prismic repository.
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!
4. 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:
- 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!
5. Launch the local server
Now, open your project folder in the terminal and run the following command :
npm install -g nodemon
This will launch a local development server at http://localhost:3000.
Check it out to make sure that everything looks good. All changes made in your repository are reflected!
6. Deploy & go live
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
Initialize a new Git repository
heroku git:remote -a your-heroku-app-name
Commit your code to the Git repository and deploy it to Heroku
git add .
git commit -m "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
Click on the links in the navigation to see all your pages. Now can now easily be able to modify this example site to create your website: just edit the stylesheets and templates to fit your design.