- PDF.js → to embed pdf files
- Gallery → to create galleries of pictures from a folder
- iframe → to embed different iframes, such as YouTube and Vimeo videos, soundcloud tracks, GoogleDocs files, etc
- imagebox → to add a caption to an image
- move → to rename a page
- smtp → to send emails, eg. when an admin makes a new user account, a new confirmation email will be sent to the specified email address of that account
- wrap → to add
html tagsinside the textbox of a page; useful when you want to wrap a portion of text inside a
divwith a specific
class(to manipulate it in
Note: the wiki runs on a digital ocean server, and I extensively followed the documentation present on the digital ocean website to set things up. For the most part though, it’s a matter of working on a unix environment with Ubuntu (in this case, but interchangeable with some other distros if you want).
The setup consists of Ubuntu 16.04.2 LTS and nginx (as it seems to work better with
node.js). Let's Encrypt for the SSL certificate.
As stated above, I presume you already have a vps set up, and running a unix-flavored distro. Often times, many hosting providers offer the option of a one-click installation of popular software, and DokuWiki is usually one of them.
In that case, jump to
- follow this guide to have tips on how to install DokuWiki (don't bother that the guide is marked as deprecated, start reading from the section Install and Configure DokuWiki)
- add custom theme: copy the
freefolder (here) inside
/lib/tpl/(check this article as a reference) (note: you have to manually copy the folder inside
/lib/tpl/, as this custom template is not available on the DokuWiki’s Extension Manager)
composeron your vps, see this article
composer installfrom the same directory where
composer.jsonsits, and wait for all packages to be downloaded and installed
template.phpwith custom version that you find in
lang.phpwith custom version in
/inc/lang/en(ref) (some labels are different, for example: Old Revisions → History, etc — change them as you need)
page.jswith custom version in
/lib/scripts(the TOC button works differently) (ref)
- for nice urls, first set some options in the panel config and update the
/wikiaccordingly (see this, and double check this section), then update nginx config file
TODO: figure how to keep customised copies of the files in 5., 6. and 7. so when dokuwiki has to be upgraded there's not need to manually replace them (DW lets you make local copies of config files, but it seems to be a bit harder when you need to manipulate core files).
UPDATE: apparently no way to make a local copy of core files (clearly). Need to use
diff when update the wiki software.
We need to install
node.js to be able to run etherpad (which is why we opted to setup a linux server from scratch).
- install node.js with nvm (in case you need to install Ubuntu software to build the nvm package, do
sudo apt-get updateand then
sudo apt-get install build-essential libssl-dev) (ref)
- install etherpad-lite
- switch to
su - etherpad(if it does not exist, make one)
- make new subdomain,
- set reading access to let’s encrypt certificates for
ethgroup (make new group):
sudo chgrp -h group folder / file+
sudo chgown -h user folder / filefrom
/etc/all the way down to the
livefolder and also the
- set ssl paths to etherpad’s
- set pad to be accessible from sub domain (change
- use subdomain url when calling the iframe from the wiki’s
- set iframed etherpad to be accessible from the same server (ref)
start Etherpad Lite instance managed by pm2
pm2 keeps the etherpad running also we we log out from the server and in case we update the server,
pm2 restart the etherpad as well.
- install pm2
- to start the etherpad, from your root server folder do:
cd /var/www/pad pm2 start bin/run.sh --name='Etherpad-Lite'
This will start the Etherpad server. You can check it is correctly running by doing
pm2 list: you will see a table with Etherpad-Lite and the status
You’ll get a new
APIKEY.txt in the same folder, copy that text on line 100 of
$instance = new EtherpadLite\Client('APIKEY', $baseUrl);
If you are working locally, you can simply do
to start the Etherpad. Of course you can install
pm2 as well and use it on your local environment.
This is handy table to show some of the options you can use to interact with Etherpad, in case you want to extend and or add other functionalities to it.
As of now, I set it to create a common pad group, and for each article created, to make a new pad instance inside the common pad group.
|create group pad||
|list all pads in group||
DokuWiki plugin-specific syntax
Once you setup all the dokuwiki plugins listed above, you can use them by following these tips and syntax.
Add a PDF
upload the pdf through the file manager and add it to the page. you’ll get something like this
add the following syntax to make the pdf browsable once the article will be saved:
pdfjs>, so you'll have
notice the colon after the major sign and before the filename
Add an iframe
for vimeo, click on the share button, then iframe and copy only the url after
iframe src=, eg
<iframe src="https://player.vimeo.com/video/223456771" width="640" height="270" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/223456771">Mouse</a> from <a href="https://vimeo.com/elofilmproductions">ELO films</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
for youtube, click on embed, then copy only the url after
<iframe width="560" height="315" src="https://www.youtube.com/embed/AWQcDlHoE4o" frameborder="0" allowfullscreen></iframe>
Add an image gallery
Open the file uploader (click
Edit this pageon any article)
Select, or drag and drop a file over the 'Select File’ / Upload area
Before clicking on Upload, prepend to the filename a ’namespace’ in the form of:
A namespace is a folder in the wiki parlance.
Since we need a namespace to create a gallery, I suggest to choose a name for the above namespace that makes semantically sense, or that is a clear reminder to the image gallery you want to create, etc.
- Once you have uploaded the first file, the prepended namespace will be visible on the tree menu in the Media File column (eg, playground, test, etc)
Now click on the newly created namespace, then drag and drop all the rest of pictures you want to upload. check if they are all correctly uploaded inside that namespace/folder
Close the File Manager window and create the image gallery like this
Notice again the colon before the namespace
Add a googledoc
For example, the following code:
will embed a google slides document. To get the link, either for a google slides or google docs, go to
File > Publish to the web and select the
Embed tag. From there, you will have a link like this
Copy only the actual link within
and put it like so
Dokuwiki is still dependant on an old version of the css preprocessor less. This caused me some problem syntax wise. Also, it heavily uses jQuery, which can be a burden or a relief depending on your approach and background.