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. We will also walk you through setting up a new Prismic project from your terminal using the 'prismic-cli'  tool, which will not only copy all the required code for you to get started right away, but also setup the required content repository for you in a few simple steps.
 

Setting up a Prismic project from a sample

We're going to kickstart our project by using the command line tool prismic theme  which takes care of every step of your initial setup in a streamlined manner.

The first step will be to install the 'prismic-cli' package. Launch a terminal instance, from where you will run the command to globally install the package. 

npm install -g prismic-cli

Once it's been installed, you just need to navigate to where you want to create your new project folder and run the following command. This will create a new Prismic content repository, setup the custom types, and install the project code:

prismic theme https://github.com/prismicio/reactjs-blog --conf src/prismic-configuration.js

The interface will guide you through creating a local folder for your project and creating a new Prismic account, or logging into your existing account if you already have one.

Navigate to the folder you have just created, and open prismic-configuration.js.
Confirm that the name you have chosen for your content repository has been setup as the API endpoint that the web application will use to fetch the content you create in Prismic.

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.
 

Write some content

Visit the repository you have just created in your browser. It will show in your Prismic Dashboard, just as any other repositories you create. Select your master language and it's time to create 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

Now that we have some content to show off, let's check back on the code that will run your blog. Open your project folder once more in the terminal and run the development command.

npm start

This will launch a local development server at http://localhost:3000. 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 liking

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?