It seems natural to me that the first post on my programming blog should be how I got the blog up and running. I started with a clear vision in mind: I wanted a clean, professional looking personal website to show off my growing portfolio and to blog about my growth as a developer.

Why now?

I think many people my age didn't take the internet very seriously growing up. The internet was, in my perspective, still young and mostly the territory of nerdy teenagers and 20-somethings. Sure, some people used it for serious, professional purposes but those were stinky adults. Most of what I used the internet for in my teenage years was hanging around forums with other teenagers pretending to be in their 20s. I swapped from website to website as my interests changed, using different identities and personas for each one, always making sure not to leave a trail of bread crumbs from one username to another. I was a consumer, devouring media and the words of people much smarter than me in the form of blog posts and long reddit comments.

But I didn't want to just be a consumer anymore. I wanted to build things. Making this blog, in a real sense, is making my mark on the internet. I'm no longer an anonymous internet nomad moving from website to website. For the first time, I'm accountable for every word I write. And they won't just belong to AnonymousUser123 and be doomed to archival in shuttered forums and reddit threads. They'll have a voice and a face behind them.

Choosing Ghost

So I understood the problem and I understood my goals. The next step is deciding on the path I would take and the technologies I would use. I'd heard a lot of buzz about Ghost as a publishing technology but I was absolutely convinced after reading Ghost's founder John O'Nolan's interview on IndieHackers. I needed to use Ghost. I loved their goals, I loved the fact that they were non-profit, and I was blown away by my experience using Ghost during my free trial of Ghost Pro. The editor just made sense. And if I was gonna spend hours writing blogs posts this is how I would want to do it.

Using Ghost was also a fantastic opportunity to start learning Node.js. I had originally been reticent to do so but my recent foray into Vue.js left me hungry to learn more JavaScript and I was impressed by the sample Node app that Cloud9 starts you with when you make a Node workspace: a working live chat app written in just a few files.

I wanted to keep it simple and free as I dip my toes into Node so I figured I could keep with my usual M.O. of using Cloud9 for my development environment and Heroku for deployment. I want to give a special thanks to Cloud9 for their excellent documentation and autodidacts.io for their tutorial on configuring node to work with Heroku PostgreSQL. I would have never figured out any of that on my own.

Installing Ghost

Ghost is very clear that they put their full support behind Node.js v4 so I figured I would just pick a version in that generation. Fortunately Cloud9 has nvm built in.

In our Cloud9 terminal:

$ nvm install 4.7.3
$ nvm use 4.7.3
$ node -v
v4.7.3

Now it's time to download ghost and get started.

$ curl  -L https://ghost.org/zip/ghost-latest.zip -o ghost.zip
$ unzip  -up ghost.zip -d
$ npm install --production
$ rm ghost.zip

Since we're running it on Cloud9 and not on a local machine, we'll have to edit config.js (rename config.example.js to config.js if config.js is missing).

config: {
    development: {
        url: 'https://' + process.env.C9_HOSTNAME,
    },
    server: {
        host: process.env.IP,
        port: process.env.PORT
    }
}

We should now be able to access the blog in our development environment just by running npm start in our terminal.

Creating the blog

Next up is getting it ready for deployment with Heroku. First we'll need to get the right files ready in git.

$ git init
$ git add -A
$ git commit -m "First commit"

For quality of life purposes we'll add a .gitignore that prevents the very large node_modules folder from being tracked so we can save some time each time we deploy.

$ sudo echo node_modules > .gitignore

Now it's time to make the app.

$ heroku create name-of-app

Whatever name-of-app is will be the url of your blog. For example heroku create shovonhasan will make shovonhasan.herokuapp.com.

Setting up PostgreSQL

The trickiest part of this whole process is setting up the database. Ghost's default setting is SQLite which doesn't work well with Heroku. So we'll use PostgreSQL instead.

$ heroku addons:add heroku-postgresql:hobby-dev --app name-of-app

You could have substituted hobby-dev with whatever tier of the addon you're using. hobby-dev is just the free version. Take note of the name of the database that was just created. You'll need it for this next step.

The next step is a little annoying. You'll have to go to Heroku's Database dashboard Find the database you just created, scroll down and hit the button that says "View Credentials...". Then use the information there to type the next few commands.

$ heroku config:set POSTGRES_DATABASE=<value>  
$ heroku config:set POSTGRES_HOST=<value>  
$ heroku config:set POSTGRES_PASSWORD=<value>  
$ heroku config:set POSTGRES_USER=<value>  
$ heroku config:set MY_URL=http://your-url.com  
$ heroku config:set NODE_ENV=production

Configuring things for production

With the database out of the way we need to get our configurations for our production environment correct. In config.js edit the line

production : {
  url: 'http://my-ghost-blog.com',

production: {
        url: 'http://name-of-app.herokuapp.com',
        fileStorage: false,

Make sure the url is the actual url of your website. In my case it was 'http://shovonhasan.herokuapp.com'.
Just a few lines below that you'll have your database settings.

database: {  
  client: 'sqlite3',
  connection: {
    filename: path.join(__dirname, '/content/data/ghost.db')
  },
  debug: false
},

Since we're not using SQLite anymore we'll have to change that to:

database: {  
  client: 'postgres',
  connection: {
    host: process.env.POSTGRES_HOST,
    user: process.env.POSTGRES_USER,
    password: process.env.POSTGRES_PASSWORD,
    database: process.env.POSTGRES_DATABASE,
    port: '5432'
  },
  debug: false
},

And then change the server settings from the default

server: {  
  host: '127.0.0.1',
  port: '2368'
}

server: {  
  host: '0.0.0.0',
  port: process.env.PORT
}

Lastly we'll need to make a Procfile to tell Heroku to use the new production settings we just made.

$ echo "web: NODE_ENV=production node index.js" > Procfile

Deploy

In theory, we should be ready to deploy our application to Heroku.

git add -A 
git commit -m "Configure for Heroku + PostgreSQL"  
git push heroku master
heroku run npm install --production

In my case, however, I got a silly error telling me that my version of Node was unsupported. This seems to be a common problem. If it happens to you just run

$ heroku config:set GHOST_NODE_VERSION_CHECK=false

and deploy again.

Looking forward

Although I didn't actually write any Node code it's a nice confidence boost to be up and running with a good looking website in such a small amount of time. I'm super excited to learn more about Node and blog about my progress. I also wish I had done this sooner so I could have written about learning Vue.js while making rollthebones.herokuapp.com. I'm glad I at least did it now, though, because there's still so much more to learn.

The First Step