You start customizing the theme by gutting the existing content in this theme and replacing it with your own content. Start with the configuration files, then customize the data files, and add your own markdown pages in the root directory.
Edit me

About customizing the theme

The theme shows two build outputs: one for designers, and one for writers. The dual outputs is an example of the single sourcing nature of the theme. The designers output is comprehensive, whereas the writers output is a subset of the information. Follow these steps to customize the theme with your own content.

To customize the theme:

  1. In the theme's root directory, rename config_writer.yml to config_marketer.yml and customize all the values inside that file based on the instructions in Setting configuration options. Do the same with config_designer.yml (changing it to config_developer.yml) and continue to clone and customize the config file for other audiences you need.

    In this theme, each output requires a separate config file. If you have 10 audiences and you want separate sites for each, then then you'll have 10 config files in this directory.

  2. Make similar customizations to the PDF configuration files. You will later use these files when you create PDFs.

  3. In the _includes/custom directory, open conditions.html and customize the values there specific to your outputs. (Basically, replace writer with developer, and designer with marketer.)

    The conditions.html file is used to apply different requirements to the sidebar and other files. The conditions.html file is included in various parts of the theme — the sidebar.html, the topnav.html, and some of the print files. conditions.html is sort of the brains of the theme. If you don't have a specific value for audience, version, platform, or product, just put all.

  4. Remove the pages that begin with "doc_" in the root directory, and then add your own pages here. Leave all the files flat in the root directory.

    If you nest files inside folders, you'll create problems for the links and the theme will break. Yes, this will result in a lot of files in the root directory, but you can get around this issue with some viewing strategies in your text editor.

    For example, with WebStorm, if you press Shift twice and type the file name you want, the editor finds it. I usually have the preview mode open in another browser and navigate the content that way. When I want to edit a specific file, I copy the filename path from the preview browser, press Shift twice, and then it opens. You can also create a favorites section that just shows files you've added to Favorites (an option in the context menu).

  5. Inside _data, open sidebar_doc.yml and topnav_doc.yml and customize the navigation.

  6. In the root directory, customize the index.md file. This file will be the homepage for all of your projects.

    Use conditional tags (for example, {% if site.project == "writers" %} ... {% endif %}) to change the content for different builds of your site. See for more information on applying conditions.

  7. In the _includes folder, open footer.html and customize the content (namely the footer image). If you have different footers for different outputs, use conditional tags as you did with index.md.

  8. Build your site with a command such as jekyll serve --config configs/config_writers.yml etc., and preview it at the URLs provided.