How to Create a DoView Board Collection

Creating a DoView Board Collection

Quick Overview

It is not difficult to create a DoView Board Collection, or a Collection of Collections like this one. Create your DoView Boards with the AI Prompt, edit them as appropriate and host them on Github for free. Just f

Below is the simplest way to make your own DoView board collection, using the existing GitHub collection as a model.

1. What the current collection is doing

The official collection is just a static GitHub Pages website. GitHub Pages can publish HTML, CSS, JavaScript, and JSON files directly from a GitHub repository. (GitHub Docs)

The official repository is structured like this:

official-doview-board-collection/
  README.md
  index.html
  boards/
    index.html
    collections.json
    generic-initiatives/
      index.html
      collection.json
      generic-small-business-doview-board-....html

The official README shows the same pattern: a root index.html, a boards/ folder, a boards/index.html, subfolders under boards/, and board .html files. (GitHub)

The root index.html is only a redirect to boards/. (GitHub) The main collection page at boards/index.html loads the list of subcollections from boards/collections.json. (GitHub) Each subcollection folder has its own index.html, which loads the boards listed in its local collection.json. (GitHub)

2. Create your own repository

  1. Go to GitHub and sign in.

  2. Click the + button at the top right.

  3. Click New repository.

  4. Give it a name, for example:

my-doview-board-collection

  1. Set it to Public if you want it visible on the web.

  2. Tick Add a README file.

  3. Click Create repository.

GitHub’s own beginner instructions follow this same pattern: create a new repository, then upload your project files. (GitHub Docs)

3. Create this folder structure

In your new repository, create this structure:

my-doview-board-collection/
  README.md
  index.html
  boards/
    index.html
    collections.json
    my-first-collection/
      index.html
      collection.json
      my-first-board.html
      my-second-board.html

You can do this directly on GitHub using Add file → Create new file or Add file → Upload files. GitHub supports adding files through the web interface by choosing Add file → Upload files. (GitHub Docs) You can also create new files directly in a chosen folder. (GitHub Docs)

4. Add the root index.html

At the top level of your repository, create a file called:

index.html

Put this in it:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My DoView Board Collection</title>
  <meta http-equiv="refresh" content="0; url=boards/">
  <link rel="canonical" href="boards/">
</head>
<body>
  <p>
    Redirecting to the DoView Board Collection:
    <a href="boards/">open the collection</a>.
  </p>
</body>
</html>

This follows the official collection’s approach, where the root page redirects visitors to boards/. (GitHub)

5. Add boards/index.html

The easiest method is to copy the official boards/index.html file and edit the visible wording.

In that file, change things like:

<div class="hdr-title">DoView Board Collection from DoViewPlanning.Org</div>

to something like:

<div class="hdr-title">My DoView Board Collection</div>

Also change:

<div class="hdr-subtitle">A DoView Collection. Illustrative strategy and outcome boards.</div>

to something like:

<div class="hdr-subtitle">A collection of my DoView Boards.</div>

Important: in the official file, the page loads the subcollection list from this line:

const response = await fetch('./collections.json', { cache: 'no-store' });

So your collections.json file must sit in the same folder as boards/index.html. (GitHub)

6. Add boards/collections.json

This file controls the cards shown on the main collection page.

Create:

boards/collections.json

Example:

{
  "version": "v1.0.0",
  "collections": [
    {
      "title": "My First Collection",
      "href": "my-first-collection/",
      "count": "2 boards"
    }
  ]
}

Fields to amend:

Field What it does Example version Your collection version "v1.0.0" title Name shown on the collection card "My First Collection" href Folder to open when clicked "my-first-collection/" count Small text shown on the card "2 boards"

The official collections.json uses this same pattern: a version and a collections list with title, href, and count. (GitHub)

7. Create a subcollection folder

Inside boards/, create a folder for each subcollection. Use simple lowercase names with hyphens:

boards/my-first-collection/

Avoid spaces in folder names. Use:

my-first-collection

not:

My First Collection

Inside that folder, add:

index.html
collection.json
my-first-board.html
my-second-board.html

The official collection folders follow this pattern: each subcollection folder contains collection.json, index.html, and the individual board .html files. (GitHub)

8. Add the subcollection index.html

Again, the easiest method is to copy one of the official subcollection index.html files.

The important bit is this line:

const response = await fetch('./collection.json', { cache: 'no-store' });

That means each subcollection’s index.html expects to find a file called collection.json in the same folder. (GitHub)

You can amend visible wording in the file, but you do not need to change the JavaScript unless you want a different layout.

One thing to change: the heading currently says:

<h2>Agency DoView Boards</h2>

For a general collection, change it to:

<h2>DoView Boards</h2>

9. Add the subcollection collection.json

This file controls the boards shown inside one subcollection.

Create:

boards/my-first-collection/collection.json

Example without a featured board:

{
  "version": "v1.0.0",
  "title": "My First DoView Collection",
  "subtitle": "A collection of my DoView Boards",
  "status": "Draft – Not Endorsed",
  "currentTitle": "My First Collection",
  "boards": [
    {
      "title": "My First Board",
      "acronym": "Board 1",
      "file": "my-first-board.html",
      "ref": "b001"
    },
    {
      "title": "My Second Board",
      "acronym": "Board 2",
      "file": "my-second-board.html",
      "ref": "b002"
    }
  ]
}

Example with a featured board at the top:

{
  "version": "v1.0.0",
  "title": "My First DoView Collection",
  "subtitle": "A collection of my DoView Boards",
  "status": "Draft – Not Endorsed",
  "currentTitle": "My First Collection",
  "featured": {
    "title": "Overview Board",
    "eyebrow": "Start here",
    "description": "This is the main overview board for the collection.",
    "file": "overview-board.html",
    "ref": "b000"
  },
  "boards": [
    {
      "title": "My First Board",
      "acronym": "Board 1",
      "file": "my-first-board.html",
      "ref": "b001"
    }
  ]
}

Fields to amend:

Field What it does title Big heading at the top of the subcollection page subtitle Smaller line under the heading status Text on the right-hand status bar currentTitle Breadcrumb name featured Optional top/apex board boards List of boards shown as cards file Exact filename of the board HTML file ref Your own short reference code

The official collection.json files use these fields, including title, subtitle, status, currentTitle, optional featured, and a boards list. (GitHub)

10. Upload your actual board HTML files

Put each standalone board .html file inside its subcollection folder.

Example:

boards/my-first-collection/my-first-board.html
boards/my-first-collection/my-second-board.html

Then make sure the filenames in collection.json match exactly:

"file": "my-first-board.html"

GitHub filenames are case-sensitive. So these are different:

my-first-board.html
My-First-Board.html

Keep filenames lowercase and simple.

11. Turn on GitHub Pages

  1. Open your repository on GitHub.

  2. Click Settings.

  3. In the left menu, click Pages.

  4. Under Build and deployment, choose Deploy from a branch.

  5. Under Branch, choose:

main
/root

  1. Click Save.

GitHub’s Pages quickstart gives the same route: go to Settings → Pages, select Deploy from a branch, and choose the branch/publishing source. (GitHub Docs)

Your site should appear at:

https://YOUR-GITHUB-USERNAME.github.io/my-doview-board-collection/

Project sites use this pattern:

https://<owner>.github.io/<repositoryname>

(GitHub Docs)

12. Test these URLs

After GitHub Pages publishes, test:

https://YOUR-GITHUB-USERNAME.github.io/my-doview-board-collection/

It should redirect to:

https://YOUR-GITHUB-USERNAME.github.io/my-doview-board-collection/boards/

Then test your subcollection:

https://YOUR-GITHUB-USERNAME.github.io/my-doview-board-collection/boards/my-first-collection/

Then test a board:

https://YOUR-GITHUB-USERNAME.github.io/my-doview-board-collection/boards/my-first-collection/my-first-board.html

GitHub says Pages changes can take up to 10 minutes to publish. (GitHub Docs)

13. Checklist before publishing

Check these carefully:

[ ] Root index.html exists
[ ] boards/index.html exists
[ ] boards/collections.json exists
[ ] Each subcollection folder has index.html
[ ] Each subcollection folder has collection.json
[ ] Every board listed in collection.json has a matching .html file
[ ] Folder names in collections.json end with /
[ ] No spaces or unusual characters in filenames
[ ] GitHub Pages is set to main / root

14. What not to copy unchanged

Be careful with wording like:

Official DoView® Badge
Standards-Compliant Board Structure
Source: Dr Paul Duignan
Official public collection

The official repository notes that DoView trademarks, official badges, endorsement, certification, approval, quality assurance, affiliation, and official-status claims are governed separately. (GitHub)

For your own collection, safer wording is:

A DoView-compatible board collection
Draft – Not Endorsed
Created using the DoView Planning approach

Also, standalone board HTML files are active HTML/JavaScript files, not passive documents. Do not publish sensitive or confidential material unless you have proper security and access-control arrangements. (GitHub)