Setting up a static blog with monopati

During the last weeks I spent some of my spare time to test some blog software. There are many Free Software solutions out there. After some research I short-listed Ghost, Pelican, Hugo, and Monopati. In the end I decided to move my current blog to this one here, powered by Monopati, a simple static blog generator written by Nikos Roussos.

Setting up Monopati

The installation is quite simple, all you have to do is clone the repository, install the requirements (I did it with the package manager via sudo apt-get install python3-jinja2 python3-markdown python3-yaml), then you setup your config file which is quite short; in my case:

sitename: Matthias Kirschner's Web log
author: Matthias Kirschner
rooturl: https://k7r.eu
logo: avatar.png
license: Unless otherwise stated licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike</a>

Blog posts

Blog posts are written in Markdown in posts/new-post.md with a small header:

title: Setting up a static blog with monopati
slug: setting-up-a-static-blog-with-monopati
date: 2016-02-28 10:00:00
tags: tech, fsfe
files: image1.jpg, image2.jpg
---

From here on you can type your post in markdown

To add images, you have to list them in the header as seen above, and make sure the files are in /post/files. Then you can add the images in normal Markdown syntax with:

![Description](image1.jpg)

Adding Pages

Under pages/ you can add new pages, for example index.html, they are written in html. In order to add them to the menu you have to edit templates/base.html.

<h1 class="navbar">
  <a href="/index.html">About</a> &bull;
  <a href="/blog.html">Blog</a> &bull;
  <a href="/contact.html">Contact</a>
</h1>

Committing to website

The big advantage of a static page is that you can host easily. I transfer the whole Monopati directory with rsync through ssh:

$rsync -avh --delete --progress ~/website-dir/ mk@host:/htdoc-dir/

Testing before committing

If you want to test your changes, before directly committing them online, you can run the following command in the root directory of your Monopati blog python3 -m http.server 1313 and then open localhost:1313in your Web browser to get a preview.

Modifications to default Monopati

In monopati.py

The default URL schemata in Monopati is /yyyy/mm/dd/slug, but I prefer URLs just with the title (slug):

# I prefer URLs without date attribution
#postpath = path.join(year, month, day, slug)
postpath = path.join(slug)

In /template/base.html

When I was testing Monopati there was a bug that the avatar was not displayed on the tag overview pages. Although that was fixed by Nikos in a few hours, I do not (yet?) like my old hackergotchi on each page, so for the moment I commented out the avatar.

<!-- Remove avatar 
<p class="avatar">
  <a href="/">
    <img src="/static/img/{{ logo }}" alt="{{ author }}" class="avatar img-circle" />
  </a>
</p>
-->

As well as changing the navigation to <h1> instead of <h3>.

<h1 class="navbar">
  <a href="/index.html">About</a> &bull;
  <a href="/blog.html">Blog</a> &bull;
  <a href="/contact.html">Contact</a>
</h1>

In /template/post.html

As I want to start with ## in Markdown as the second headline under the blog post's title, I change the headline setting:

<h1>
  <a href="/{{ link }}">{{ title }}</a>
</h1>

In /static/css/app.css

For reading I prefer a tighter text width:

.container {
max-width: 580px;
}

As well blue instead of red for links:

a {
color: #3394CE;
}

Which also needs to be changed here:

a:hover,
a:active,
a:visited {
color: #3394CE;
text-decoration: underline;
}

To be able to control the style of the menu items I added an own class:

h1.navbar {
    font-size: 3rem;
    letter-spacing: 0px;
    text-indent: 0px;
}

Beside that there was a bug in the default Monopati: images were not scaled. This was already fixed on Niko's website. All I had to do was adding a dot in front of the first line here:

.post img {
    display: block;
    margin: auto;
    max-width: 90%;
}

TODO list

• Style: I am still considering to change the default font to a serif font (maybe Droid Serif?) and the current font just for the headlines. In general I like the text style of Ghost's default theme Casper, so maybe I will get rid of some colours here in future.
• Contact page: Add some more information on my contact page, and improve the style. Maybe use Niko's contact page as a template.
• Sharing: Add "social media" buttons to the blog posts, so it is easier for people using those (often proprietary) platforms to share my writing about software freedom there.
• Write more posts...