Excelsior: Personal wiki based on vimwiki

Recently, I am looking for a simple solution for personal wiki. My basic requirement is no need of database, easy deploy and lightweight.

Finally, I found the vimwiki is a perfect solution with some other services.

vimwiki: Simple syntax, perfectly integrated with vim. Export each single wiki to separate html file.
google-code-prettyfy: Used to make code snippets well formated.
Github pages: Used to host/publish the wiki.
Bootswatch: There are many beautiful and basic templates to beautify your wiki

Below is a brief description about how to setup the personal wiki which utilize above tools. Enjoy them :)

1. Vimwiki installation

https://code.google.com/p/vimwiki/wiki/Installation

Download and unpack vimwiki_N_N.zip. (N_N is version number ie 0_8)
Place unpacked files into (create directory if it isn't exists):
Linux: ~/.vim/
Windows: ~/vimfiles/, where ~ is a home directory, usually C:\Documents and Settings\USERNAME\
To install help, open Vim and run :helptags ~/vimfiles/doc command.
Modify vimrc as below, <F4> is mapped to generate html

" // --- vimwiki --- //
let g:vimwiki_list = [{'path': '~/Dropbox/vimwiki/',
			\'template_path': '~/Dropbox/vimwiki/template/',
			\'template_default': 'default',
			\'template_ext': '.html',
			\'path_html': '~/Dropbox/github/vimwiki/'}]

map <F4> :VimwikiAll2HTML<cr>

2. Use google-code-prettify for code highlight

https://code.google.com/p/google-code-prettify/

1. Download code-prettify (ex: prettify-small-4-Mar-2013.tar.bz2)
https://code.google.com/p/google-code-prettify/downloads/list

2. Modify the default vimwiki template
Add below code block before </head> and change <body> to <body onload='prettyPrint()'>

Use your prettify.js and prettify.css instead of http://XXX/prettify.css and ttp://XXX/prettify.js

<link href='http://XXX/prettify.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://XXX/prettify.js' type='text/javascript'/>
<script type='text/javascript'>
document.addEventListener(&#39;DOMContentLoaded&#39;,function() { prettyPrint();});
</script>

The result default.html of vimwiki should looks like as below

<html>
<head>
<link rel="Stylesheet" type="text/css" href="%root_path%%css%">
<title>%title%</title>
<meta http-equiv="Content-Type" content="text/html; charset=%encoding%">
<!-- Bootstrap: Bootswatch template goes here -->
<link href="http://XXX/bootstrap.min.css" rel="stylesheet"
media="screen" type='text/css'>

<!-- google-code-prettify -->
<link href='http://XXX/prettify.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://XXX/prettify.js' type='text/javascript'/>
<script type='text/javascript'>
document.addEventListener(&#39;DOMContentLoaded&#39;,function() { prettyPrint();});
</script>

</head>
<body onload='prettyPrint()'>
%content%
</body>
</html>

3. Use Github pages to host/publish you wiki

http://pages.github.com/

Build a project page for the vimwiki
https://help.github.com/articles/creating-project-pages-manually

Excelsior

5/06/2013

Personal wiki based on vimwiki

1. Vimwiki installation

2. Use google-code-prettify for code highlight

3. Use Github pages to host/publish you wiki

2 comments: