Pencilblue: Easy Way to Shift in Content Management

PencilBlue, Technologies

Mar 27, 2015

In this article, we’ll see a Pencilblue Introduction

Table of Contents

Welcome to the enchanting world of Pencil Blue, a groundbreaking content management system (CMS) that defies conventions and fuels your creative aspirations.

If you’re seeking a truly unique and powerful platform to build stunning websites, It is your ultimate companion. We invite you to embark on an extraordinary journey and discover the unrivaled potential of Pencil Blue.

Get ready to unlock the gates of imagination and bring your wildest web dreams to life.

What is Pencilblue

It is a Node.js web framework.

It is Full-stack online publishing and CMS for Node.js.

Pencilblue has been full-stack means, it uses both client and sever-side frameworks which happen to be in the JavaScript programming language. The client-side framework it uses is AngularJS and well Node.js for the server side.

It supports the MongoDB database by default. If you have used any of these tools to build for the web, you will understand why they were chosen by the team to build the framework.

Its “sweet spot is a brand or publication that wants a serious, data-driven website, but also wants non-technical team members to be able to manage it easily”.

Because of this, it was built “to fit right in between three genres: blogging (WordPress), traditional CMS (Drupal), and point and click (Squarespace)”.

Installation

Download and install Node.js

In the browser, go to http://nodejs.org/download and download the latest version of the Node.js Windows MSI installer for your processor type.
Run the downloaded MSI installer file and follow the instructions in the install program.

Download and install MongoDB

In the browser, go to http://www.mongodb.org/downloads and download the latest version of the MongoDB Windows MSI installer for your processor type.
Run the downloaded MSI installer file and follow the instructions in the install program.

Install git for Windows

In the browser, go to http://git-scm.com/download/win to download the latest version of git for Windows.
Run the downloaded exe installer file and follow the instructions in the install program.

Install the Pencil Blue command-line interface tool

Open a command prompt as an administrator (Microsoft how-to).
Run npm install -g pencilblue-cli to install the command-line interface through NPM.

Install and Run Pencil Blue

Once pencilblue-cli is installed, in the git bash window (Start Menu -> Git -> Git Bash), cd to the directory that you want the PencilBlue directory to install to.
Run pbctrl install [directory] where the directory is the name of the folder you want Pencil Blue to be installed to. Follow the instructions.
cd to the directory you installed Pencil Blue to and run pbctrl start
You should now be able to navigate to your install of PencilBlue through the URL you specified in the install.

Let’s Build a Website with Pencil blue

In this section, we will build a website using It. If you’ve not read the first two sections, please move up and read. This section is based on them.

Now that we’ve gone through the process of installing all we need to build a website with Pencil blue, let’s get build one.

Open your terminal or command prompt and cd into your working directory (where you want the project code to reside). Run pbctrl install hello-pencilblue.

You will be asked the following questions. I’ve added what you will type a response.

Pencilblue: Site Name: (My Pencil blue Site)

Type

‘Hello Pencil blue’

and enter or you can leave it as

My Pencil blue Site

Pencilblue: Site Root: (http://localhost:8080)

Just type enter to use the default. You can choose to change the port if 8080 has already been taken. e.g.

http://localhost:8081

Pencilblue: Address to bind to: (0.0.0.0)

Just type enter to use the default.

Pencilblue: Site Port: (8080)

Just type enter to use the default. You can choose to change it if 8080 has already been taken. Note: Make sure the port you specify here is the same as you specified on the site root URL.

Pencilblue: MongoDB URL: (mongodb://127.0.0.1:27017)

Just type enter to use the default or you can choose another URL of the MongoDB instance you want to use.

Pencilblue: Database Name: (pencilblue)

Just type enter to use the default or you can choose a different one.

Pencilblue: Do you want to install Bower components?: (y/N)

If you do not want to use CDN URLs for your libraries like Angularjs and bootstrap but want to use a locally installed version type y and press enter or return but if you want to use CDN, then type N and press enter or return.

It will start cloning the source files for the app from GitHub, install the node dependencies and install the bower components if you selected yes to, Pencilblue: Do you want to install Bower components?: (y/N).

After All that, a config.js file will be generated for you which will be used by penciblue.

Now, cd into the directory in which It has been installed and type pbctrl start. Make sure your MongoDB instance is up and running before you start the app else you will get an error.

Note: The name you chose for the app (like ) will be used to name the directory in which pencil blue will be installed.

Now navigate to the URL you specified in step 2 above in your browser. It will present you with a form to enter details to setup an Administrator account for you to enable access to the admin section of It which will be located at [url]/admin (e.g. http://localhost:8080/admin)

And there you go. You have Pencil blue up and running.

How to learn

There are several places you can learn about Pencil blue. The following are links to resources you can use.

It is more than just a CMS; it’s a catalyst for creative brilliance.

With its Node.js-powered infrastructure, intuitive design capabilities, effortless content creation, limitless customization options, collaborative environment, exceptional performance, and developer-friendly ecosystem, It revolutionizes the way websites are crafted.

Step into a world where boundaries fade away, and imagination knows no limits. Embrace the power of It, and let your digital dreams become extraordinary realities.

Blog