Tongfamily (Richtong.com Sync)

Ok, nothing like learning a new stack everyday. It sure feels like I do that these days. This one is digitalocean.com running node.js, running the ghost blogging platform using handlebar for templating and bootstrap for the front end. What fun!
Here are some tips:

• Digitalocean’s one click install really works. A $5 droplet and you have a running system. Love how small software can be.

• You want to install SSL right away as it is completely insecure and you want to edit /etc/nginx/sites-available/ghost. The main thing is you need to have an SSL certificate. Startssl.com is a good place.

• You can run multiple ghost on a single site. The tricks are to get your nginx file correct so that it correctly maps urls coming in with ports. And to have multiple ghost installations all with different configuration ports so that you can have them all running.

• In development mode, NODE_ENV=development is the default, none of the templates are cached. So you get immediate feedback. If you set it to production then the templates are cached and you have service ghost restart to get ghost to see it.

• If you want to hack away at casper or whatever, the easiest thing to do is to use github to manage it. You can fork the casper repo into your own and then do a git clone, then you don’t have to worry about version control

• There is no simple way to just use Bootstrap with Ghost. There is much hacking around. There are some very basic things that give you bootstrap, but the simplest thing to do is to just include three lines in your default.hbs. See w3schools.org for how to do that. The nice thing is that you are not really hosting bootstrap at all. Just calling it from maxcdn. This is a nice way to handle it.

• You really want to back up your database. There is a hidden URL at http://yoursite.com/ghost/debug that let’s you do a backup of ghost plus its database. I was also thinking about making the whole thing a git repo so that’s another way to do it since it is all textual. This works as long as the database doesn’t get corrupted, so beware. But one quick hack is to create a git repo and push it up to github.com as documented karl says, but basically you first create the github.com repo from the web interface then you and make sure you don’t create anything (that is no readme.MD).

cd new-git-repo-directory
git init
git add --all
git remote add origin git@github.com:your-git-account/new-git-repo-directory.git
git push -u origin master

• An even cooler thing to do is to actually fork the ghost repo into your private one. Then git clone that into your ghost configuration. So at that point, when you want to get a new version of ghost, it is a matter or rebasing and then pulling.

• In Digital ocean, you can specify what environment you want to run by changing /etc/init.d/ghost and flipping from export NODE_ENV production to say export NODE_ENV development so that you don’t have caching and changes appear easily. Just do a service ghost restart and you are back in business

Tricks

• You can use Ghost as a static “poor man’s” CMS by create static pages. These are controlled by the page.hdb template. You can even have custom templates on every page where every page has a corresponding page-$page.hdb template, so for instance if you want the about page to be different, you change page-about.hdb by copying the default page.hdb in and hacking away.

• Given all the CSS and other layering, it is nearly impossible to figure out what is happening. I like Safari, but the Chrome tools are way more straightforward. You can actually see the font being used for instance, so use Chrome for debugging 🙂

• If you are doing any kind of structured work, you probably want to git clone the bootstrap repo so that you can rebase the changes. And also keep all the changes in a separate css and js files. This will keep things pretty pure. It does mean that you can’t use Less or Sass to compile CSS and you may have to eventually, but its a good start.

• Bootstrap.js itself uses bower.js as its installation and management tool. Yet another node.js application.

• The Digital Ocean default install has you switching to their DNS Servers. That’s quite a bit of change particularly if you have a site with other things. Fortunately Anup explains how to change just the A record from your DNS Server and point it to digital ocean. Nice trick!

• You can configure nginx to use multiple ghost configurations with multiple server directives with a proxypass to a different socket. Makes it easy to run test servers on the same machine.

Traps

• Another approach is to use Bootstrap Magic which gives you a customized full download of bootstrap with everything configured for you and this is a true fork of the Bootstrap code which is good and bad because you don’t get updates. There should be a way to do the equivalent of a rebase master from bootstrap itself. Seems like a trap long term but probably quick to do. I’d rather git clone it and then remember the changes so you can rebase as needed.

• All the example code puts the raw Bootstrap classes directly into your HTML which makes you vulnerable to changes at the naming level. Instead, you need to use Less Mix-ins to put the semantics over the class names in Bootstrap. So instead of say the three column layout, you create classes on top like main-support-points.

• When you try to override the CSS of Bootstrap, the various components don’t cascade. So for instance in the default scheme Casper in Ghost, the body has the font-family for all normal entries. However, changing this doesn’t override Bootstrap. It looks like you have to correct the lower level entries like p with font-family instead. So it looks like you need to change each level with your custom css, so instead of creating 10 column and 2 columns, we define a main-section and a aside

<!--- our new, <span class="hiddenSpellError" pre="" data-mce-bogus="1"-->semanticized HTML5 -->
<article><section class="main">...</section><aside></aside></article><!-- its accompanying Less stylesheet -->
article {
.makeRow();
section.main {
.makeColumn(10);
}
aside {
.makeColumn(2);
}
}

• And you can do the same for many objects like buttons where you use a class and then call the actual underlying Bootstrap class to do the real work. It separates your HTML from bootstrap.

<!-- Before -->
<a class="btn danger large" href="#">Click me!</a>
<!-- After -->
<a class="annoying" href="#">Click me!</a>
a.annoying {
.btn;
.btn-danger;
.btn-large;
}