1Bootstrap your project

Create a prismic.io 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 the development kit

To get started with your website, download the prismic.io SDK, it allows you to fetch content from prismic.io and display it on your pages.

Download SDK

Configure and run your project

Unzip the downloaded file in a new location for your project.

Replace the repository url in your config file with your-repo-name.prismic.io

Copy 
// In config.php
define("PRISMIC_URL", "https://your-repo-name.prismic.io/api");

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

Make sure that you have Composer installed on your computer.

Copy 
composer install
./serve.sh

You can now launch your browser to http://localhost:8000/. You should see a static HTML page. Let's see how can we transform it into a template filled with content managed by prismic.io!

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.io backend.

Fire up a terminal (command prompt or similar on Windows)

Copy 
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 quick start. But prismic.io 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 create a new Node.js project.

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

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

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

Run your project

Point your terminal to the creating folder and run:

Copy 
# Navigate to the newly created folder and run
npm install -g nodemon
nodemon

Automatic reload

By default Node.js needs a restart to take into account your local files changes. To reload the application automatically after a file change we used nodemon, but you can use any other tool such as supervisor or node-dev.

You can now launch your browser to http://localhost:3000/. You should see a static HTML page. Let's see how can we transform it into a template filled with content managed by prismic.io!

2Create a custom type "page"

Our page contains a title, a paragraph and an image. Let's create a custom type in prismic.io with the corresponding fields. We'll add an additional UID field for querying the page.

In the repository backend you've just created, go to Custom Types and create a new Repeatable Type with the name "Page".

Once the "Page" type is created, paste the following JSON into the type editor. Save.

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

What is a Custom Type?

Custom Types allow you to define fields for your content. There are two categories, 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.

Custom types are defined using JSON syntax where you specify fields with their types (Image, StructuredText, etc.) and their configuration.

3Create your first page!

The "page" custom type you've just created contains a title, a paragraph and an image. 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, you'll need it for querying the page.
We used "get-started" for that purpose.

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

4Query the API and fill the template

Query the API for your "get-started" page

Now that you've created your "get-started" page, go back to your local code. Let's make a call the API and retrieve our page content. For that, we will use the specified UID.

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

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', 'get-started').then((prismicdoc) => {
    res.render('index', { pagecontent: prismicdoc });
  });
});
Copy 
// In app/app.php, replace:
render($app, 'page');

// with the following:
$api = $prismic->get_api();
$pageContent = $api->getByUID('page', 'get-started');
render($app, 'page', array('pageContent' => $pageContent));

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.

Copy 
// In views/index.pug

extends ./layout.pug

block body
    div.welcome
        img(src=pagecontent.getImage('page.image').url, class='star')
        != pagecontent.getStructuredText('page.title').asHtml(ctx.linkResolver)
        != pagecontent.getStructuredText('page.description').asHtml(ctx.linkResolver)
Copy 
// In app/views/page.php
<div class="welcome">
  <img class="star" src="<?= $pageContent->getImage('your-custom-type-id.your-image-field-id')->getUrl() ?>">
  <?= $pageContent->getStructuredText('your-custom-type-id.your-Richtext-field-id')->asHtml($prismic->linkResolver) ?>
  <?= $pageContent->getStructuredText('your-custom-type-id.your-Richtext-field-id')->asHtml($prismic->linkResolver) ?>
</div>

Refresh your browser!

Hit refresh in your browser and you're done! You've officially created a page that pulls content from prismic.io.

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.io 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