Quick start

Let's set up and begin using SimpleDoc in no time.

TL;DR

  1. Download the latest version of SimpleDoc here
  2. Configure BASE_PATH in assets/js/config.js
  3. Add your images to assets/images/
  4. Customize the content in pages/
  5. Update navigation in components/header.html
  6. Deploy to your server

Requirements

SimpleDoc needs to run from a web server and won't work when using the file:/// protocol scheme because of CORS security issues.

Directory Structure

Once unpacked, your directory will look like:

simpledoc/
├── assets/
│   ├── css/
│   │   ├── simpledoc.css
│   │   └── prism.css
│   ├── js/
│   │   ├── config.js          <-- Configure this!
│   │   ├── simpledoc.js
│   │   └── prism.js
│   └── images/
│       └── showcase/
├── components/
│   ├── header.html
│   └── footer.html
├── pages/
│   ├── documentation/
│   ├── quickstart.html
│   ├── documentation.html
│   ├── showcase.html
│   └── license.html
├── templates/
│   ├── page-template.html
│   └── doc-detail-template.html
└── index.html

Important: Configure BASE_PATH

Before you start, you must configure the BASE_PATH!

If your documentation is in a subdirectory (not at the root of your domain), you need to set this in assets/js/config.js: 

const SIMPLEDOC_CONFIG = {
	BASE_PATH: '',  // Change this to your subdirectory!
	SITE_NAME: 'SimpleDoc',
};
Examples:
Your URL BASE_PATH Setting
https://example.com/ BASE_PATH: ''
https://example.com/docs/ BASE_PATH: '/docs'
https://lastlife.net/doc/ BASE_PATH: '/doc'
https://example.com/projects/api-docs/ BASE_PATH: '/projects/api-docs'

Important notes:

  • Always start with / (forward slash)
  • Never end with / (no trailing slash)
  • Use forward slashes even on Windows

For detailed information, see SUBDIRECTORY_SETUP.md in the root directory.

Customization

Adding Your Images

Place your images in assets/images/:

  • Card images: 1.png, 2.png, 3.png, 4.png (400x300px recommended)
  • Profile images: community.png, lastlife.png (200x200px recommended)
  • Showcase: Put screenshots in assets/images/showcase/
Creating New Pages

Use the templates in templates/ directory.

Customizing PrismJS

The included Prism supports HTML, CSS, and JavaScript. To add more languages:

  1. Visit PrismJS download page
  2. Select your theme and languages
  3. Replace assets/css/prism.css and assets/js/prism.js
Updating Navigation

Edit components/header.html to add or modify menu items.

Customizing Colors

Edit assets/css/simpledoc.css to change site-wide styles.
Available MaterializeCSS colors: red, blue, green, orange, cyan, purple, pink, teal, etc.