Quick start

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

Download

You can download the latest version of SimpleDoc on its GitHub release page.

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.

TL;DR

  1. Configure BASE_PATH in assets/js/config.js
  2. Add your images to assets/images/
  3. Test locally with a web server
  4. Customize the content in pages/
  5. Update navigation in components/header.html
  6. Deploy to your server