Skip to content
openFrameworks web site
Python Mako JavaScript CSS Shell Nginx PHP
Find file
Latest commit f883cbc @arturoc arturoc Merge pull request #449 from tado/master
change link to the Japanese site.

openFrameworks site

This repository stores the content and code that generates the openFrameworks website.

for other language, please read below.


To contribute fixes to the webpage or documentation you can usually just fork this repository and send contributions directly from github.

Most of the content is in the content folder in markdown folder.

The tutorials folder is structured with a first level of folders that represent the category and then a inside them markdown files with the extension .markdown and a folder for each of them with the same name as the text file that contains images or any other resource. The final html for each tutorial gets generated at the same level as it's resources so the links have to be relative and without any folder like:


The documentation folder contains the OF API reference and are also in markdown format. This docs are generated from the code but the description field in every class, function or var can be edited directly in the markdown files.

Setting up the site to build locally

This site is based on nikola. There's some scripts in the root folder to make it easier to install and use.

  • ./ will install nikola and all the needed dependencies. By now is only tested on linux and osx. On osx, before to run this script, you need first to install these packages:

    brew install python3
    sudo easy_install pip
    brew linkapps python3

    and add this to your .basrc or zhsrc file export XML_CATALOG_FILES="/usr/local/etc/xml/catalog"

  • ./ will run nikola and build the web every time any file is modified. If, on osx, you receive this error: FileNotFoundError: [Errno 2] No such file or directory: 'asciidoctor', you need to install asciidoctor as explained here, and then run the script again.

  • ./ will start a local web server that serves the site and opens it in the browser

If you plan to do a big modification like contribute a translation the easiest is to leave the 2 last scripts running and just edit the content files and the site will automatically get refreshed.

Documentation-style markdown

The documentation portion of the site is written in Markdown, a wiki-style syntax. See details on Daringfireball.

The easiest way to check the syntax is having a look at the many pages already on the site, but here are some useful tips:

To insert code snippets use four tildes followed by curly braces with ".cpp" inside, and ending with four tildes:

for(int i = 0; i < 16; i++) {
    ofLog() << i;

Images are added using normal markdown format:

![Image Title](filename.png "alt text")

For a more complete description of how to contribute documentation, please see the Contributing to the Documentation tutorial.

Something went wrong with that request. Please try again.