Tutorial

Welcome to the Pruvious tutorial!

Introduction

This tutorial will guide you through the process of creating a portfolio website with Pruvious. It will cover page layouts, blocks, custom collections, and more through text and videos. The goal is to help you understand the Pruvious CMS and teach you how to create your own website using Pruvious.

The tutorial is authored by Muris Ceman (@murisceman), the creator and maintainer of the Pruvious CMS.

Project

We will create a portfolio website called Rayleigh from scratch. Here is a preview of how it will look:

The design was created in Figma. You can freely clone it to your drafts from https://pruvious.com/tutorial/figma.

Prerequisites

Before attempting the code in this tutorial, make sure you have the following installed on your local machine:

• Node.js - v20.0.0 or newer

• Text editor - We recommend Visual Studio Code with the Volar Extension

• Terminal - In order to run commands

While the tutorial aims to be beginner-friendly, we need to establish a baseline to maintain focus on the Pruvious functionality. We will include relevant documentation links when introducing new concepts. To fully benefit from this tutorial, it is recommended that you have a moderate to advanced understanding of HTML, CSS, Vue, and Nuxt.

Repository

The project's repository is available on GitHub. At the end of each lesson, you will find a link to a separate repository that reflects the current state of the project.