Writing tech docs

like a hacker with Jekyll

Created by Tom Johnson

The scenario

Tool options

Static site generators


"Blogging like a hacker"

"On Sunday, October 19th, I sat down in my San Francisco apartment with a glass of apple cider and a clear mind. After a period of reflection, I had an idea. While I'm not specifically trained as an author of prose, I am trained as an author of code. What would happen if I approached blogging from a software development perspective? What would that look like?"
Blogging like a hacker, Tom Preston-Werner, co-founder of Github
What would happen if we approached technical writing from a software development perspective?

CMS vs. Static site generators

Jekyll how-to

Why people like Jekyll:

  • Simple
  • Stable
  • Secure
  • Lightweight
  • Fast
More details »

Doc sites using Jekyll

More details »

Writing tech docs like a hacker

Site generator: Jekyll
File format: Text files
Authoring: Text editor
Advanced logic: Liquid
Collaboration: Git
Versioning: Git
Building: Server hooks

Using Jekyll for tech writing: My journey

Designing the Site?

Solution: Bootstrap

  • Turns out theming is easy
  • Easy to clone any existing site
  • Use Bootstrap for framework
More details »

Content re-use?

Solution: Includes

Store content in _includes folder. Then insert like this:

{% include myfile.html %}

Conditional filtering?

Solution: Liquid

{% if site.audience == "administrators" %}
show this to administrators
{% elsif site.audience == "analysts" %}
show this to analysts
{% endif %}
More details »

Multiple outputs?

Solution: Multiple config files

  • Separate config files for each variant
  • Each config file has various properties
    (audience, platform, product, version)
  • Create scripts that compile build commands

Sample build command:

//build administrators output
jekyll build --config config_administrators.yml --destination ../outputs/admins

//build analysts output
jekyll build --config config_analysts.yml --destination ../outputs/analysts
More details »

Multi-level navigation menu?

Solution: Separate data from presentation

  • Store menu items in YAML file
  • "for" loop in HTML layout parses through YAML
  • Navgoco jQuery component handles other aspects (expand/collapse, cookie, accordion)
More details »

Alerts: Notes, tips, cautions?

Solution: Includes with Parameters

  • Store note code as include
  • Pass parameters with include code

// create the note.html include:

Note: {{include.content}}
//use it like this: {% include note.html content="My note content goes here ..." %}
More details »

Avoiding broken links?

Solution: YAML-based links

  • Iterate through TOC to create YAML file to get link URLs
  • Push them into Markdown reference format
  • Include at the bottom of each file
More details »

PDF output?

Solution: Prince XML

  • Iterate through sidebar menu to get list of links
  • Feed the list of links to Prince XML
  • Store command in shell script
More details »

Re-use across projects?

Solution: Single project for writers

  • All writers work in same project
  • Collaborate through version control
  • Each project stored in its own subfolder
  • Exclude other directories in each project's config file
More details »

Version control workflows?

Solution: Learn the needed workflow

  • Focus only on necessary Git commands
  • Coordinate more among team members
  • Avoid simultaneously editing the same page
  • Look regularly at commit logs


Solution: Stick with Core Jekyll

  • Avoid plugins or overly complicated code
  • Have all writers work in same project
  • Stop changing processes/code each month
  • Establish standards and provide training


Solution: Swiftype or Algolia

  • Implementation requires UX skills
  • More difficult if content isn't public


Solution: Separate projects

  • Separate out UI strings into data file
  • Send out Markdown files for translation
  • Create new project with translated files

How Jekyll makes me feel

Analogy with first telephone

Bell and an early model of the telephone
More details »

Disruptive innovations

Social coding

Documentation theme
for Jekyll

  • Newer theme: Single output, multiple sidebars (Github repo)
  • Older theme: Multiple outputs, one sidebar (Github repo)


Tom Johnson