Sample Blog with API-based CMS in Node.js

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!

1. Install the Prismic Command Line Tool

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

npm install -g prismic-cli

If for some reason this command doesn't work for you, try executing a sudo command:

sudo npm install -g prismic-cli

 2. Run the theme command

Once the installation is finished, navigate to the location where you want to create your new project folder and run the following command. This will create a new Prismic repository along with different custom types and install the project code:

prismic theme --theme-url https://github.com/prismicio/nodejs-blog --conf prismic-configuration.js

(MAKE SURE YOU'RE USING THE LATEST VERSION OF THE CLI)

This command will ask you to add a name to create a Prismic repository and the name of the local folder to initialize the project.

Navigate to the folder you have just created. Open the 'prismic-configuration.js' file and confirm that the name you have chosen for your Prismic repository has been set up correctly as the API endpoint that the web application will use to fetch the content you will create in Prismic.

3. Write some content

Now your Prismic repository has two brand new Custom Types: Blog Home and Post.

• Blog Home: A Single type blog's homepage that contains a title, a description and an image.
• Post: A Repeatable type post that that uses content Slices. This Custom type gives you 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.

Go to Content, hit New, and select the Blog home type. Fill in the content for the headline, description, and image banner. Save and publish!

Now, create two information posts. Go to Content, hit New, and select the Post type. Make sure to fill the mandatory UID field that is used for that post's URL. Add some content slices, then save and publish!

4. Launch the local server

Now, open your project folder in the terminal and run the following command :

npm install
npm install -g nodemon
nodemon

This will launch a local development server at http://localhost:3000.

Check it out to make sure that everything looks good. All changes made in your repository are reflected!

4. Deploy & go live!

An easy way to deploy your Node.js application is to use Heroku. Just follow these few simple steps once you have successfully signed up and installed the Heroku toolbelt. Create a file with the name Procfile file at your application root. Put the following code in the Procfile file:

web: node app.js

Create a new Heroku application

heroku create

Initialize a new Git repository

git init
heroku git:remote -a your-heroku-app-name

Commit your code to the Git repository and deploy it to Heroku

git add .
git commit -am "make it better"
git push heroku master

Ensure you have at least one node running

heroku ps:scale web=1

You can now browse your application online

heroku open

Customize to your likings

Click on the links in the navigation to see all your pages. Now can now easily be able to modify this example site to create your website: just edit the stylesheets and templates to fit your design.