Docs
website/
└── docs/
├── doc1.md
├── doc2.md
├── doc3.md
└── sidebars.json
Write documentation under website/docs folder, with Markdown.
At beginning of each doc file, add metadata like this:
---
id: doc1
title: Latin-ish
sidebar_label: Example Page
---
Sidebar
Sidebar menu is defined in sidebars.json
Blog
website/
└── blog/
├── 2018-01-08-why-dochameleon.md
└── 2018-01-10-staging-step.md
Write blog posts under website/blog folder, with Markdown.
File name must have the format of yyyy-mm-dd-blog-file-name.md
At begging of each blog post, add metadata like this:
---
title: Why Dochameleon
author: Richard Zhang
authorUrl: https://github.com/richardzcode
authorImage: https://github.com/richardzcode.png
---
authorUrl and authorImage can be set by name/id of GitHub, Facebook, or Twitter, for example:
authorGitHub: richardzcode
or
authorFBID: ...
or
authorTwitter: ...
Pages
website/
├── components/
├── pages/
│ ├── help.js
│ ├── index.js
│ └── users.js
└── theme/
Create web pages under website/pages folder, by writing React.
Create components under website/components, for pages to import.
Write theme files under website/theme, to define styles.
Static Files
website/
└── static/
Put static files under website/static folder. They will go to ${rootUrl}${baseUrl}/
You may refer to static files in docs as /static/..., for example [Logo]( /static/img/logo.png)
Configure Source Folders
By default Dochameleon looks up sources under website which is the current commandline directory. All source folders are configurable. For example you may want to change 'docs' folder to GitHub repo '/docs'.
Set source folders in siteConfig.js
...
const siteConfig = {
projectName: 'Dochameleon',
title: 'Dochameleon',
tagline: 'Open Source Documentation Site Generator',
copyright: 'Copyright © ' + currentYear + ' Richard Zhang',
docsDir: '../docs',
pagesDir: ...,
blogDir: ...,
componentsDir: ...,
staticDir: ...,
themeDir: ...,
...