Quick Start

Install Illuminate

Illuminate is not available as an installable package (yet). It might eventually be published as a Gatsby starter and/or theme for other people to use, but for now, it's a just tool for exploration and a continuous work in progress. You can learn more about how and why I built Illuminate in About and what I have planned for it in Roadmap.

---

Add pages

New documentation pages are added to the docs folder. The documentation landing page (index.mdx) is included by default and can be edited to add your content to introduce visitors to the product and help guide them through the rest of the documentation. Refer to Markdown and MDX for a full guide on how to author content with Illuminate.

src/

├─ docs/

│ ├─ index.mdx

├─ images/

│ ├─ image.png

│ ├─ icon.png

│ ├─ logo.svg

├─ illuminate.config.js

Create a new page

Create a new MDX (.mdx) file in the docs folder for each documentation page (aka article). Organize your files into sub-folders based on how you would like to group them in the navigation. Use kebab case for the file and folder names. The file and folder names will be used to generate the page slug for the URL.

src/

├─ docs/

│ ├─ index.mdx

│ ├─ new-group/

│ │ ├─ new-page.mdx

├─ images/

│ ├─ image.png

│ ├─ icon.png

│ ├─ logo.svg

├─ illuminate.config.js

Add front matter

Add YAML front matter at the top of each page with the title and description of the content. These fields are used to populate the page's metadata for SEO, as well as the title and description that appear at the top of the article.

Add content

Within your MDX files, you can author content using Github Flavored Markdown (GFM) Markdown for text and leverage the power of React components for more dynamic elements. Add any of the built-in components included with Illuminate, such as Accordions, Callouts, Cards, Tabs, or Code Hike blocks can be used without importing. Alternatively, you can also import any Chakra UI components or your custom components.

---

Update the navigation

Add your new pages to the navigation in illuminate.config.js. Add an entry for each new page with the title, path, and, optionally, a badge for highlighting new or important pages.

---

Preview your documentation

Start a local development server to preview your changes locally:

Any updates made to your content while in development mode will live reload in the browser without the need to refresh the page.

---

Publish your documentation

While the actual build and deployment processes might vary based on your hosting solution, use this command to build your site for production:

During this build process, Pagefind will index your content to make it searchable within the site.

---

Next steps

Refer to Configuration to learn how to customize your documentation website with your information and branding.