While migrating the site to Nikola, I leveraged the handbook to get going.

As I worked through setting up my site, I picked up a couple of tricks for my environment.

Use Virtualenv

If you are starting with a fresh install of Ubuntu or Mint, or even if you are not, do yourself a favor and use virtualenv. The following commands install pip, virtualenv, then setup a virtual environment for use.

$ sudo apt-get install -y python-pip
$ sudo pip install --upgrade virtualenv
$ virtualenv env

You can replace env with any name you would like. Virtualenv will create a folder of this name with the virtual python environment.

Once setup, you can activate the environment at any time:

$ source env/bin/activate

Your command will change to include the environment name, e.g. (env)$.

To deactivate the environment:

(env)$ deactivate

You should be in an activated virtual environment for all the other pip install commands used from the guidance in the handbook or in these notes.

Packages for my use

Note
The handbook covers instructions for installing development packages required for compiling some of the dependencies on Ubuntu or Mint, so I won't cover them here. Suffice it to say, you need those before moving on.

The handbook suggests using the following to install all the extra dependencies:

(env)$ pip install nikola[extras]

I don't need everything, so I installed only the dependencies I needed:

(env)$ pip install nikola
(env)$ pip install markdown
(env)$ pip install webassets
(env)$ pip install livereload

I recommend you use the command nikola auto while writing. It builds the site and starts the server. When you change a file, it sends a message to the browser to reload the page. The livereload package is required for the command.

Config using environment variables

A minor annoyance led me to this next trick. Environment variables to drive some variability in the configuration.

The minor annoyance: the blog title links to the site url in the default themes. I, naturally, configured my site with the url to the live site. This did not work very well while working on my local desktop to migrate all my pages and posts. Every time I clicked on the title, I ended up on my live site.

I introduced an environment variable for the domain and used it in a couple of key places in my conf.py.

# -*- coding: utf-8 -*-

from __future__ import unicode_literals
import time
import os

domain = os.getenv('DEPLOY_DOMAIN', 'christiancarey.com')

# ...

SITE_URL = "http://%s" % domain

# ...

DEPLOY_COMMANDS = [
    "rsync -rav --delete output/ %s:/path/to/site-data" % domain
]

# ...

You will notice it defaults to the live site if the environment variable is not set. If I am developing or setting up a test server, I can set the environment variable before running the appropriate nikola command.

(env)$ DEPLOY_DOMAIN="test.christiancarey.com"; export DEPLOY_DOMAIN
(env)$ nikola build
(env)$ nikola deploy

If you use this trick, just remember to rebuild the site after changing or unsetting DEPLOY_DOMAIN.

Customization of Theme

Last, but not least, I come to the customization I wanted for the first design of the site. I am using the default bootstrap3 theme, but wanted to customize colors and put in a background picture.

Nikola documentation points to bootswatch for some custom color schemes. It also has a bootswatch_theme command, but, at the time of this writing, it does not seem to work.

Theme customization works really well with Nikola, as you only have to put in those things you want to customize. In this case, I only need the boostrap.css (and bootstrap.min.css) files for my color scheme choice from bootswatch and a simple custom.css for the background picture.

Start by creating the custom theme folder and tell the theme you are using bootstrap3 as the base:

(env)$ mkdir -p themes/custom_theme/assets/css
(env)$ echo "bootstrap3" > themes/custom_theme/parent

Download the bootstrap.css and bootstrap.min.css files and save them in the css folder created above and set your theme in the conf.py:

# -*- coding: utf-8 -*-

from __future__ import unicode_literals
import time

# ...

THEME = "custom_theme"

# ...

You could stop here, because this covers everything but the background image.

To get the background image, I started by putting the background image a files/image directory with the name background.jpg. Then I added a custom.css file to the themes/custom_theme/assets/css folder. The contents of that file:

body { 
    background: 
        linear-gradient(rgba(39,43,48,0.8), rgba(39,43,48,0.8)), 
        url(/images/background.jpg) center center/cover no-repeat fixed; 
}
div.body-content { padding: 0 15px 15px 15px; z-index: 0; background: #272b30; opacity: .9; }

Now I'm off to the races.

-ccarey