Too busy to start from scratch, but excited to start learning how to use an API-based CMS? Get a blog up and running in minutes. Modify and adapt it to your liking, it's all yours!

For this project, we provide you with all the source code you need to get your blog up and running. After you set up your content repository we will show you how to configure the code and see your content in action.

Start a content repository

A content repository is where you define, edit and publish content.

 
Create a blog home custom type

Custom types allow you to define and configure fields for your content.

This blog's homepage contains a title, a description and an image. Let's create a custom type with the corresponding fields. We will only need one instance for the homepage, so we will set it up as a Single Type.

In the repository you've just created, go to Custom Types, create a new type, select Single Type, and give it a name of Blog Home. Make sure that the system automatically assigns it the API ID of "blog_home". Once created, paste the following JSON into the type editor. Save.

{
  "Main" : {
    "headline" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "label" : "Headline",
        "placeholder" : "Main title..."
      }
    },
    "description" : {
      "type" : "StructuredText",
      "config" : {
        "multi" : "heading2",
        "label" : "Description",
        "placeholder" : "Sub-title..."
      }
    },
    "image" : {
      "type" : "Image",
      "config" : {
        "constraint" : {
          "width" : 140,
          "height" : 140
        },
        "thumbnails" : [ ],
        "label" : "Image"
      }
    }
  }
}

 
Create a blog post custom type

In the designed blog post layout, we give the possibility to alternate paragraphs, quotes and images. Images can be displayed in full width with a nice overlay, or centered in the body with a caption below.

We use content slices to define this layout in the custom type. As an author you'll be able to freely compose your post's body by alternating those components.

We will need to be able to create more than one blog post, so this will fall into the category of repeatable type. Create a new type, select Repeatable Type, and give it the name Post. Make sure that the system automatically assigns it the API ID of "post". Once created, paste the following JSON into the type editor. Save.

{
  "Blog Post" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "label" : "UID",
        "placeholder" : "unique-identifier-for-blog-post-url"
      }
    },
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "label" : "Title",
        "placeholder" : "Blog Post Title..."
      }
    },
    "date" : {
      "type" : "Date",
      "config" : {
        "label" : "Date"
      }
    },
    "body" : {
      "type" : "Slices",
      "fieldset" : "Slice zone",
      "config" : {
        "labels" : {
          "image_with_caption" : [ {
            "name" : "emphasized",
            "display" : "Emphasized"
          }, {
            "name" : "image-full-width",
            "display" : "Full"
          } ]
        },
        "choices" : {
          "text" : {
            "type" : "Slice",
            "fieldset" : "Text",
            "description" : "A rich text section",
            "icon" : "text_fields",
            "non-repeat" : {
              "text" : {
                "type" : "StructuredText",
                "config" : {
                  "multi" : "paragraph, preformatted, heading2, heading3, strong, em, hyperlink, embed, list-item, o-list-item",
                  "label" : "Text",
                  "placeholder" : "Post text..."
                }
              }
            },
            "repeat" : { }
          },
          "quote" : {
            "type" : "Slice",
            "fieldset" : "Quote",
            "description" : "A quote section",
            "icon" : "format_quote",
            "non-repeat" : {
              "quote" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "paragraph",
                  "label" : "Quote",
                  "placeholder" : "Post Quote..."
                }
              }
            },
            "repeat" : { }
          },
          "image_with_caption" : {
            "type" : "Slice",
            "fieldset" : "Image with Caption",
            "description" : "An image with an optional caption",
            "icon" : "image",
            "non-repeat" : {
              "image" : {
                "type" : "Image",
                "config" : {
                  "constraint" : {
                    "width" : 1200
                  },
                  "thumbnails" : [ ],
                  "label" : "Image"
                }
              },
              "caption" : {
                "type" : "StructuredText",
                "config" : {
                  "single" : "heading3",
                  "label" : "Caption",
                  "placeholder" : "Image Caption..."
                }
              }
            },
            "repeat" : { }
          }
        }
      }
    }
  }
}

 

Write some content

Start by filling in your photo, your name and a headline for your blog's home.

Go to "Content" and hit "New", choose the Blog's home type and fill it with your own content. Save and publish!

Now, write a few blog posts. Make sure to fill the mandatory UID field that is used for your post's URL. Save and publish!

 

Run the blog

Time to see thinks working! First, download the blog source code.

 
Point it to your content repository API

Let's modify the link in our configuration file to point to our repository's API endpoint.

// In src/prismic-configuration.js
apiEndpoint: 'https://your-repo-name.prismic.io/api/v2'

And once more in the index file

// In public/index.html
window.prismic = {
  endpoint: '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!

npm install
npm start

Your site should be running locally in http://localhost:3000 now. Check out how all your content is being shown, and how changes in your repository are reflected.

 
Deploy & go live!
We are going to be using Netlify to easily deploy our React app. They offer several options to deploy your site, including a useful Continuous Deployment option if your project is on a repository in GitHub, GitLab or Bitbucket. It's a great idea if you've cloned our repository to get started. For this project, we're going to use their command line tools to perform a manual deployment.

Once you have signed up in their platform, open up a terminal, navigate to your project folder, and install their command line tools package.

$ npm install netlify-cli -g

If this install fails, you can try again with a sudo command

$ sudo npm install netlify-cli -g

We are now going to use the netlify commands to setup your project and link your folder to Netlify.

$ npm run build
$ netlify deploy

Follow the instructions to create and configure your new Netlify site. When it gives you the option to select the deploy path to use, select "./build"
This prepares a draft deploy that you can review using the Live Draft URL it provides. You're now ready to publish your deployment

$ netlify deploy --prod

And specify the deploy path "./build" as before. You can check the status of your manual deployment using the Netlify web app, change your site's name and open it.
Congratulations! Your Prismic site is now live!  

 

Customize to your likings

You should easily find what to modify in the code to customize the blog: just edit the stylesheets and the templates to fit your design!

 

About Prismic

Prismic is content management made easy and fast with publishing benefits:

  • 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
Did this answer your question?