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 toproduction
then the templates are cached and you haveservice 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 fromexport NODE_ENV production
to sayexport NODE_ENV development
so that you don’t have caching and changes appear easily. Just do aservice 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 changepage-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 aproxypass
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, thebody
has thefont-family
for all normal entries. However, changing this doesn’t override Bootstrap. It looks like you have to correct the lower level entries likep
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 amain-section
and aaside
<!--- 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;
}