• All content is stored in a git repo as vimwiki content (to avoid having to sync HTML content as well)
  • All content automatically converted to HTML and moved to the appropriate directory when the git repo is pushed
  • Template based on bootstrap, so theming/building the template is easy peasy

Tables without any styles are gross, so let's use the styles from Bootstrap. Problem is that Vimwiki doesn't provide a way to add a class to a table element, so we'll do it with JQuery:

			$("table").addClass("table table-condensed table-hover");

This adds .table, .table-condensed, and .table-hover classes to every table element in the whole document. Don't see why it should be any other way for the moment.

By default, there is no difference between how a non-checkbox list item, unchecked list item, and a checked list item are displayed when exported to HTML.

There are 5 states of a checkbox, 0-4, and they each represent a different level of completeness. This is mainly for checklist items with children.

Checkbox states:

State # % Complete li class Unicode character Escape sequence HTML code
0 0% done0 \u25EF &#9711;
1 1-33% done1 \u25D4 &#9684;
2 34-66% done2 \u25D1 &#9681;
3 67-99% done3 \u25D5 &#9685;
4 100% done4 \u2714 &#10004;

Now, in order to use these in our HTML, we just have to write a style for ul li.doneX:before in our header like so:

ul li.done0:before {content: '\25EF';}
ul li.done1:before {content: '\25D4';}
ul li.done2:before {content: '\25D1';}
ul li.done3:before {content: '\25D5';}
ul li.done4:before {content: '\2714';}

Now here's a few test lists:

  • Unfinished item
  • Finished item
  • Parent item 1
    • Child item 1
    • Child item 2
    • Child item 3
    • Child item 4
  • Parent item 2
    • Child item 1
    • Child item 2
    • Child item 3
    • Child item 4
  • Parent item 3
    • Child item 1
    • Child item 2
    • Child item 3
    • Child item 4
  • Parent item 4
    • Child item 1
    • Child item 2
    • Child item 3
    • Child item 4
  • Parent item 5
    • Child item 1
    • Child item 2
    • Child item 3
    • Child item 4

The easiest way to manage this wiki, and also allow it to be hosted, is to commit all the wiki documents to a repo, and script the deployment to the wiki's webroot using git's post-receive hook. The origin remote repo also hosts the http server, so it makes things simple. Less simple because it requires a vim plugin to compile the HTML files, but it's still doable.

First part of this solution is the vimrc for the remote machine. This sets the destination for the final html files, the origin wiki files, and the html template page.

set nocompatible
filetype plugin on
syntax on
let g:vimwiki_list = [{
  \ 'path': '/tmp/vimwiki/',
  \ 'path_html': '/srv/wiki/',
  \ 'template_path': '/tmp/vimwiki/html-template',
  \ 'template_default': 'index',
  \ 'template_ext': '.html'}]

Note: lines 1-3 are required for vimwiki to work correctly with the post-receive hook. The rest of the config are options for vimwiki directly.

The post-receive hook is a fairly simple bash script. This script is located at ~/git/vimwiki.git/hooks/post-receive, and is run every time the repo receives a push from downstream.

mkdir /tmp/vimwiki
export GIT_WORK_TREE=/tmp/vimwiki

export GIT_DIR=/home/thurstylark/git/vimwiki.git 

git checkout -f

vim -u /tmp/vimwiki/html-template/srv-vimrc -c VimwikiAll2HTML -c q /tmp/vimwiki/ 

cp /tmp/vimwiki/html-template/slate.bootstrap.css /srv/wiki/

rm -rf /tmp/vimwiki

It first makes a directory under /tmp for the contents of the repo, sets \(GIT_WORK_TREE and \)GIT_DIR, and does a git checkout for all the files in the repo.

Line 9 is where the magic happens. This line runs vim with the vimrc from above, and runs the :VimwikiAll2HTML command.

Next, the script copies over the one CSS file that I need to host myself, and lastly, it cleans up the temp dir.

  • Commit to a repository
  • Setup remote to host
  • Setup remote to automatically :VimwikiAll2HTML after it's been pushed to
  • Document push to deploy