notoriousb1t

Migrating My Blog to Ghost

A few weeks ago I attended a UX Meetup about usability testing and got some positive (and some not so positive) feedback about my blog using the 5 second test. The meetup presenter displayed the home page and asked everyone to write down something positive and negative on a piece of paper, and then showed the results on a word cloud.

While the typography and colors were well received, I got feedback that the top of my site was noisy and that there wasn't a clear way to view posts in categories. Instead of trying to build a whole tag system into the Node Express site I already had, I decided to move my blog back into a CMS. I chose Ghost because it has a really simple interface for authoring and it is based on Node Express with Handlebars, a pretty similar setup to what I had.

Picking a Theme

I decided I should put my pride aside and buy a theme from Theme Forest. Themes cost almost nothing compared to the time I would spend learning the environment and hacking something together, so it made sense to get something off the shelf and customize as needed.

I found Nice Bird for Ghost and really liked the masonry layout, the built-in search, and the area where an advertisment could be placed. I decided to buy it and started to customize it.

Nice Bird Theme

Customizing Nice Bird

I started out by downloading the full Ghost CMS and running the setup commands:

npm install && npm start  

Then I had to unzip the Nice Bird theme and move all of the assets to the 'themes' folder under Ghost. I switched to the Nice Bird theme and started configuring and hacking away.

After a few days of styling and moving things around, I realized there was a whole lot of dead weight in the libraries it imported and that the styles weren't built in a way that I could easily extend without doing a lot of class specific overrides to replace both Bootstrap and Nice Bird's styles.

Starting Over

I decided to try to merge my existing layout and styles with the default Casper theme instead. Instead of trying to change everything at once, I reasoned I would also be able to learn the environment a little bit while converting over.

I was able to merge my styles and the Casper styles together with little to no friction, and I was able to give the site a fresh look without doing a complete overhaul.

Current Styles of notoriousb1t

Additional Challenges

There were a few challenges in moving to a CMS and keeping my links alive.

The documentation for changing Express routes in Ghost seems to be lacking. In the end, I was able to alias my old links using NGINX since I am already using it as a reverse proxy. Ultimately, I learned a lot about configuring NGINX and I am not too sore on this point.

Since I would be authoring through a web portal with a login, I needed to add SSL to my site to keep my password safe from a Man in the Middle Attack. Getting that working was an interesting experience because I did not need to configure SSL in NGINX before now. As a bonus, that should boost my search ranking.

Outro

Although there is still work to do on the site, I am really excited to get my writing back on track. Getting Ghost installed will allow me to author from anywhere. Stay tuned for weekly articles. :)