Adding a personal touch

In my last post Building My Blog I described how I followed a great tutorial to get my Blog site up and running with Pelican. However,before I start blogging in anger, I wanted to change the look of the site a bit to suit my own personal tastes. I quickly narrowed my choices for the new theme down to three options:

I really liked all three and the choice was difficult but in the end I settled for Alchemy. It is worth noting though that I decide to change theme again Voce and Elegant will immediately be in contention.

Setting up Alchemy

The instruction on how to install and configure Alchemy are very will described on the Alchemy site so I won't regurgitate here, but these are the highlights.

Installation

I installed Alchemy as a Github sub-module so in your Pelican site:

mkdir themes
git submodule add https://github.com/nairobilug/pelican-alchemy themes/pelican-alchemy

And then in Pelican config:

THEME = 'themes/pelican-alchemy/alchemy'

Plugins

Bootstrapify is used for rendered HTML. This was also installed as a Github sub-module.

mkdir plugins
git submodule add https://github.com/ingwinlu/pelican-bootstrapify plugins/pelican-bootstrapify

And in Pelican config:

# http://docs.getpelican.com/en/stable/plugins.html#how-to-use-plugins
PLUGIN_PATHS = ['plugins']
PLUGINS = ['pelican-bootstrapify']

BOOTSTRAPIFY = {
    'table': ['table', 'table-striped', 'table-hover'],
    'img': ['img-fluid'],
    'blockquote': ['blockquote'],
}

I already had both a plugins folder and plugins in use so no need for me to create the folder. I just added pelican-bootstrapify to my existing PLUGINS variable.

The main reason I like this theme is this approach to tables. Hopefully I won't regret it in the future.

Favicons

I created a site image and then used Favicon Generator to generate a favicon package and download it. I'll come back to the site image in a moment.

Then, to install:

mkdir content/extras
unzip <PATH_TO_PACKAGE>.zip -d content/extras

There was an extra step required here. I had to rename the supplied site.webmanifest file to manifest.json

And then in Pelican config and the extras folder to the STATIC_PATHS variable as well as the EXTRA_PATH_METADATA:

# https://github.com/getpelican/pelican/wiki/Tips-n-Tricks#second-solution-using-static_paths
STATIC_PATHS = ['extras', 'images']
EXTRA_PATH_METADATA = {
    "extras/android-chrome-192x192.png": {"path": "android-chrome-192x192.png"},
    "extras/android-chrome-512x512.png": {"path": "android-chrome-512x512.png"},
    "extras/apple-touch-icon.png": {"path": "apple-touch-icon.png"},
    "extras/browserconfig.xml": {"path": "browserconfig.xml"},
    "extras/favicon-16x16.png": {"path": "favicon-16x16.png"},
    "extras/favicon-32x32.png": {"path": "favicon-32x32.png"},
    "extras/favicon.ico": {"path": "favicon.ico"},
    "extras/manifest.json": {"path": "manifest.json"},
    "extras/mstile-150x150.png": {"path": "mstile-150x150.png"},
    "extras/safari-pinned-tab.svg": {"path": "safari-pinned-tab.svg"},
}

RFG_FAVICONS = True

Other small details

In addition to the main changes above I also made a few smaller changes to complement the theme.

I added a SITESUBTITLE
I added a SITEIMAGE
I added ICONS

The site subtitle is just a variable in your Pelican config file. Enough said. The site image wasn't too much bother either. I added the site image to the images folder that I'd previously created and then just added the variable to Pelican config:

SITESUBTITLE = "The ramblings of a frustated Python Data Scientist ..."
SITEIMAGE = "/images/python_programming.png width=150 height=150"

Icons took me a little while to understand and get working. The Alchemy theme does not have a side bar so the Social links need a new home. This is where Icons come in. I thought that I understood all this but for the life of me the Icons of my Social Links wouldn't appear, even though I could see them in the static HTML. This took too long to figure out and in the end I was kicking myself. I was doing everything perfect except that I didn't realise that the Font Awesome icons were case sensitive. Here is the working Icons entries in my Pelican config:

ICONS = (
    ("twitter", "https://twitter.com/David__Colton"),
    ("github", "https://github.com/davidcolton/"),
    ("linkedin", "https://www.linkedin.com/in/davidcolton/"),
)

Adding Maths

Part of what I've planned for this blog will mean I need the ability to add Mathematical formulas. render_math to the rescuer. When installing this plugin the instructions suggestion adding the entire pelican-plugins as a sub-module of my source tree. Not something I wanted to do. Instead I did clone the plugins repository but in it's own right and I then just copied the render-math plugin into the plugins folder. My Pelican config was then updated:

PLUGIN_PATHS = ["plugins/"]
PLUGINS = ["pelican-bootstrapify", "i18n_subsites", "render_math"]

And to check that everything is working as expected, some sample math formulas:

$$e=mc^2$$

Look good. Basic maths working.

Oh, before I forget

Before I forget you'll need to install Typogrify and BeautifulSoup4.

pip install typogrift
pip install beautifulsoup4

This is not the last post on my setup and environment. I want to look closer at the options provided by make and also describe my development environment setup.

More anon.

David's Blog

Changing the Theme of my Blog