Skip to content

Building Your Custom Site

Getting started with Change Maker is simple and flexible. Here are the steps to create your own custom site from scratch.

Starting from Scratch

Your site only needs a few things to get started:

Docs folder: This is where all your content will live. You can organize your content into subfolders and files as needed.

Configuration file: This file contains the settings for your site, such as the site title and description.

Navigation: This text defines the structure of your site, including the order of pages and the hierarchy of the navigation.

Docs

  1. Backup the Docs Folder: Before making any changes, it's a good idea to backup the docs folder. This ensures you have a copy of the original content and all these manuals.

  2. Create a New Folder: Create a new folder called docs in the root directory. This will be the root folder for your custom site.

  3. Add Your Content: Add your content to the docs folder. You can create subfolders and organize your content as needed.

Configuration

The most basic configuration for your site is the mkdocs.yml file. This file contains the site title, description, and other settings.

Basic mkdocs.yml Configuration 
title: My Custom Site
description: This is my custom site.

You can find all the configuration options on the mkdocs documentation page:

MkDocs documentation

The Bunker Operations Current Configuration:

Bunker Operations mkdocs.yml Configuration 
site_name: Change Maker
site_description: A powerful documentation system combining simplicity with professional features. Own your documentation, data, and design; don't rent it.
site_url: https://changemaker.bnkops.com/
site_author: Bunker Ops
site_dir: docs

theme:
  logo: logo.svg
  name: material
  custom_dir: docs/overrides
  palette:
    scheme: slate
    primary: amber
    accent: deep purple
  features:
    - navigation.sections
    - navigation.instant
    - navigation.instant.progress 
    - navigation.instant.preview
    - navigation.tracking
    - navigation.indexes
    - toc.integrate
    - content.code.copy
    - navigation.path
    - navigation.top
    - navigation.footer
    - header.autohide

markdown_extensions:
  - pymdownx.highlight:
      anchor_linenums: true
      line_spans: __span
      pygments_lang_class: true
  - pymdownx.inlinehilite
  - pymdownx.snippets
  - pymdownx.superfences
  - admonition
  - pymdownx.details
  - attr_list
  - md_in_html
  - footnotes
  - pymdownx.emoji:
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg

extra_css:
  - stylesheets/extra.css
  - https://fonts.googleapis.com/icon?family=Material+Icons

copyright: Copyright © 2024 The Bunker Operations - Built with Change Maker

extra:
  generator: false
  social:
    - icon: material/web
      link: https://repo.bnkops.com/Home.html

plugins:
  - social
  - search
  - blog:
      draft_on_serve: false

nav:
  - Welcome to Bnkops Change Maker: index.md
  - Why Change Maker: Why Change Maker.md
  - Bnkops Deploy: bnkops Deploy.md
  - Admin Log: blog/index.md
  - Install & Manuals:
      - Getting Started: manuals/index.md
      - Prerequisites: manuals/prerequisites.md
      - Installation: manuals/Installation.md
      - Reset & Build: manuals/Build Site.md
      - Backend & Editor: manuals/Backend & Editor.md
      - Simple Markdown Guide: manuals/Simple Markdown Guide.md
      - Commands: manuals/Commands.md
      - Use Obsidian as Site Editor: manuals/obsidian.md
      - Customize Your Landing Page: manuals/Customize Your Landing Page.md
      - Example Political Apps: manuals/Examples.md
      - Get Online: manuals/Get Site Online.md
      - Visit repo.bnkops.com for more!: https://repo.bnkops.com/Home.html
  - Feature Tracking: Feature Tracking.md
  - Who is bnkops: Who is bnkops.md

The navigation for your site is defined in the mkdocs.yml file. This file contains the structure of your site, including the order of pages and the hierarchy of the navigation. You have two options for defining the navigation:

  1. Manual Navigation: You can manually define the navigation in the mkdocs.yml file. This gives you full control over the structure of your site. For example
Manual Navigation Example 
nav:
  - Home: index.md 
  - About: about.md
  - Contact: contact.md
  1. Automatic Navigation: You can let MkDocs automatically generate the navigation based on the structure of your docs folder. This is the default behavior if you don't define the navigation in the mkdocs.yml file. Mkdocs will generates navigation via alphabetical order of the files in the docs folder.

For example, if you have the following files in your docs folder:

Example Docs Folder Structure 
docs/
    index.md
    about.md
    contact.md

These will load up in the navigation as follows:

Generated Navigation Example 
- About
- Contact
- Home

index.md

The index.md file is always the first file in the navigation. The root index.md file is always the first file in the navigation. It works as the home page with it is located in the root of the docs folder. If you create a index.md file in a subfolder, it will be the first file in the navigation of that subfolder.

More Customization

Follow the rest of the guide to build up your custom site with more advanced features and customization options.