1Bootstrap your project

Create a Prismic content repository

A repository is where your website's content will live. Simply create one choosing a repository name and a plan. We've got a variety of plans including our favorite, Free!

Create Repository

Download PHP Quickstart

To get started with your website, download the Prismic PHP Quickstart project.

Download PHP Quickstart

Configure and run your project

Unzip the downloaded file, then open the PHP Quickstart project folder in your favorite code editor.

Open config.php and assign the API endpoint for your Prismic repository to the PRISMIC_URL constant:

Copy 
// In config.php
define('PRISMIC_URL', '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 the following commands:

Make sure that you have Composer installed globally on your computer. You can either follow the instructions on the Composer website or install it with Brew.

Copy 
composer install
./serve.sh

You can now launch your browser to http://localhost:8000, you should see a static HTML page.

Next let's see how to create a page in your website filled with content retrieved from Prismic!

Install the prismic Command Line Tool

To get started with your website, install the command line tool. It allows you to quickly start JavaScript projects that access your Prismic backend.

If you don't already have them, make sure to first install Node.js and npm on your machine.

Fire up a terminal (command prompt or similar on Windows) and run the following command.

Copy 
npm install -g prismic-cli

Sometimes it's possible that this command doesn't work. If that's the case for you, try executing a sudo command:

Copy 
sudo npm install -g prismic-cli

Don't speak JavaScript?

Since every web developer speaks some JavaScript, we chose JavaScript and Node.js for the purpose of this tutorial. But Prismic content management approach is API based, and you're free to use PHP, JavaScript, Ruby or any other programming language or framework.


The prismic command is now available globally. We will now use that tool to launch this tutorial project. In the terminal, navigate to the location you want to launch your project and run the following command.

Copy 
prismic init your-repo-name --template Quickstart-NodeJS

The `init` command will initialize a Node.js project that is configured to connect with the repository you just created!

The command will end by displaying a link to your content repository backend in the form of https://your-repo-name.prismic.io.

Run your project

Point your terminal to the folder that was just created and run:

Copy 
# Navigate to the newly created folder and run
npm run dev

You can now launch your browser to http://localhost:3000, you should see a static HTML page.

Next let's see how to create a page in your website filled with content retrieved from Prismic!

2Create a Custom Type "Page"

We will create a page containing a title, a paragraph and an image. Let's create a Custom Type in Prismic with the corresponding fields. We'll add an additional UID (unique identifier) field for querying the page.

Go to the repository backend you've just created (at https://your-repo-name.prismic.io). Then navigate to the "Custom Types" section (icon on the left navbar) and create a new Repeatable Type, for this tutorial let's name it "Page".

Before clicking on button "Create new custom type", make sure that the system automatically assigns this an API ID of "page", because we'll use it later for querying the page.

Once the "Page" Custom Type is created, we have to define how we want to model it, that is to say a document containing a UID, a title, a paragraph and an image. Click on "JSON editor" (right sidebar) and paste the following JSON data into the Custom Type JSON editor. When you're done, hit "Save".

Copy 
{
  "Main" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "placeholder" : "UID"
      }
    },
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "placeholder" : "Title..."
      }
    },
    "description" : {
      "type" : "StructuredText",
      "config" : {
        "multi" : "paragraph,em,strong,hyperlink",
        "placeholder" : "Description..."
      }
    },
    "image" : {
      "type" : "Image"
    }
  }
}
Copy 
{
  "Main" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "placeholder" : "UID"
      }
    },
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "placeholder" : "Title..."
      }
    },
    "description" : {
      "type" : "StructuredText",
      "config" : {
        "multi" : "paragraph,em,strong,hyperlink",
        "placeholder" : "Description..."
      }
    },
    "image" : {
      "type" : "Image"
    }
  }
}

What is a Custom Type?

Custom Types are the structure, model, and configuration for your content. They allow you to define the needed fields for your content.

There are two kinds of Custom Type: Repeatable Types and Single Types. Repeatable Types are for content that you will have more than one of, such as articles, products, places, authors, etc. Single Types are for content that you only need one instance of, such as a homepage or a privacy policy page.

3Create your first page!

The "Page" Custom Type you've just created contains a title, a paragraph, an image and a UID (unique identifier). Now it is time to fill in your first page!

Create a new "Page" content in your repository: go to "Content" and hit "New".

Fill the corresponding fields. Note the value you filled in the UID field, because it will be a part of the page URL, for that purpose let's use "quickstart".

When you're done, hit "Save" then "Publish".

4Query the API and create the page template

Query the API for your "quickstart" page

Now that you've created your "quickstart" page in your Prismic repository, go back to your local code. Let's make an API call to retrieve the page content. For that, we will use the specified UID.

Once we've retrieved the page, we will render the template providing it with its content.

Add the following route to your app/app.php file:

Add the following route to your app.js file:

Copy 
// In app.js, in place of the block starting with "app.route('/')", put the following:
app.route('/').get(function(req, res) {
  req.prismic.api.getByUID('page', 'quickstart').then((document) => {
    res.render('index', { document });
  });
});
Copy 
// In app/app.js, in place of the block starting with "$app->get('/',", put the following:
$app->get('/', function ($request, $response, $args) use ($app, $prismic) {
    // Query the API
    $api = $prismic->get_api();
    $document = $api->getByUID('page', 'quickstart');

    // Render the page
    render($app, 'home', array('document' => $document));
});

Replace static content with corresponding page fields

Now all that's left to be done is replace the static non-managed content in the template with content we fetched from the API. In your app/views/home.php file replace everything with the following:

Replace static content with corresponding page fields

Now all that's left to be done is replace the static non-managed content in the template with content we fetched from the API. In your views/index.pug file:

Copy 
extends ./layout.pug

block body
  div.welcome
    img(src=document.data.image.url, class='star')
    != PrismicDOM.RichText.asHtml(document.data.title, ctx.linkResolver)
    != PrismicDOM.RichText.asHtml(document.data.description, ctx.linkResolver)
Copy 
<?php
use Prismic\Dom\RichText;
 
$document = $WPGLOBAL['document'];
?>
 
<?php include_once 'header.php'; ?>
    
<div class="welcome">
    <img src="<?= $document->data->image->url ?>" class="star"/>
    <h1><?= RichText::asText($document->data->title) ?></h1>
    <div>
        <?= RichText::asHtml($document->data->description) ?>
    </div>
</div>
 
<?php include_once 'footer.php'; ?>

Refresh the page http://localhost:8000 and you should see your content! You've officially created a page that pulls content from Prismic.

In your browser go to http://localhost:3000 and you're done! You've officially created a page that pulls content from Prismic.

Obviously, since this approach is based on API, you're completely free to choose a different framework or template engine. It's all up to you!

5Well done!

Sit back and enjoy the result.

Basically in these few steps you've added content management to your page and thanks to the Prismic Writing Room, you'll have:

- 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