# 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"
    ```yaml
    title: My Custom Site
    description: This is my custom site.
    ```

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

[MkDocs documentation](https://squidfunk.github.io/mkdocs-material/setup/){ .md-button }

**The Bunker Operations Current Configuration:**

??? "Bunker Operations mkdocs.yml Configuration"
    ```yaml
    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
    ```

### Navigation

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"
    ```yaml
    nav:
      - Home: index.md 
      - About: about.md
      - Contact: contact.md
    ```

2. **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
    ```

!!! tip "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.