Ghost on Codio

A few of you may be wondering how to get the fantastic Ghost blogging platform setup on the mighty Codio, well i am here to tell you and have created this handy little tutorial that will get you up and running in around 2 minutes...

Step 1

First of all you need to create yourself a project inside Codio if you havn't already. To do this simply login to your Codio dashboard. Once you have signed in, you will be greeted with your dashboard where you can create and manage you projects. To create a new project, click Create project.

Create Project

Give your project a name, description (optional) and set your projects visibility to either public or private. Now this bit is fairly important as it gives you a nice clean base to start with, in the source make sure Template is selected and the template you want to use is Empty project.

Once you are ready to begin, click Create to be magically transported into the editor and the next stage of this tutorial...

Step 2

For this stage of the tutorial, we will requiring the help of Codio's terminal, to start a terminal session, you can either click Tools > Terminal or use the keyboard shortcut Shift + Alt + T which should open up a new terminal tab a bit like this...

Terminal

So, first of all we are going to need to pull a copy of Ghost into your project, this is done using the remarkably helpful wget library using the following command:

wget https://ghost.org/zip/ghost-latest.zip

wget will then begin downloading ghost to your project's root folder, once that has finished you are going to need to unzip it using the unzip command:

unzip ghost-latest.zip

And whalah, you have a copy of Ghost and from now onwards, wont be needing the achive you downloaded so you can clean it up using the rm command:

rm ghost-latest.zip

But don't exhale just yet as there is still some configuring to be done in the next step.

Step 3

Now you have a copy of Ghost installed in your project, you are going to need to resolve it's dependancies (download the additional packages that Ghost depends upon). Because Ghost is built using Node, this is made much simpler as it can be done using Node's package manager or NPM for short:

npm install --production

Of it goes, downloading all the packages Ghost needs as well as any packages that those packages need (that's packageception right there!).

Packages

I would advice you go and put the kettle on here as it can take up to a minute to complete.

Once the packages have been downloaded, you need to build them which is done by running Ghost:

 npm start

This perform all of the initial setup for Ghost and start the server once it is ready.

Setup

Once this setup has complete, you should notice that Ghost's internal server has been kicked into motion, along with the mode it is running in which should be Development at this stage.

Running

But some of you may notice a problem here, Ghost is running on localhost which is fine in a local development enviroment but won't been seen on Codio so we need to fix that by tweaking a couple of values.

Step 4

Before we do that though, we need to know the name of your project so that Ghost knows where your links point to. This is done by viewing your development boxes information by clicking Project > Box Info from the menu.

Box Info

The value you are interested in is the static content url, this will be put into your configuration so have it ready just to be on the safe side. Next, you need to open up the newly created config.js and paste in overwriting the file with in the following changing any occurances of http://project-name.codio.io with the static content url minus the port you saved earlier...


 var path = require('path'),
     config;

 config = {
     production: {
         url: 'http://project-name.codio.io',
         mail: {},
         database: {
             client: 'sqlite3',
             connection: {
                 filename: path.join(__dirname, '/content/data/ghost.db')
             },
             debug: false
         },
         server: {
             host: '0.0.0.0',
             port: '3000'
         }
     },
     development: {
         url: 'http://project-name.codio.io',
         database: {
             client: 'sqlite3',
             connection: {
                 filename: path.join(__dirname, '/content/data/ghost-dev.db')
             },
             debug: false
         },
         server: {
             host: '0.0.0.0',
             port: '3000'
         },
         paths: {
             contentPath: path.join(__dirname, '/content/')
         }
     }
 };

 module.exports = config;

Save the file and jump back into the terminal. All that is left to do now, is to start Ghost once more...

npm start

Preview

To preview the amazing work you have done, click the little arrow next to Project index (static) and select Box URL from the dropdown.

Preview

Autostart

To autostart Ghost upon opening your project, create and save a file named startup.sh with the following content:

npm start

And restart your box by selecting Project > Restart Box from Codio's menu for the changes to take effect, once your box has restarted, Ghost will be started automatically so you don't need to worry about finding it in the sneaky hidden dropdown again.