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('DOMContentLoaded',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('DOMContentLoaded',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