arrow_left
Genesis
Getting Started
Core Setup
JS in Genesis
Extending
The GenesisRenderer API
The GenesisColors API
CLI
Installation
GitHub Releases
openSUSE (OBS)
Usage
Using the CLI
Getting Started with Genesis
Welcome to Genesis! This guide will walk you through the basic setup and usage of the Genesis static site generator.
Genesis is still very new and experimental, so you might encounter some unexpected bugs or odd behavior. Additionally, Genesis is primarily designed for content-focused websites like documentation and blogs. For projects requiring complex JavaScript interactions, modern frontend frameworks, or heavy client-side functionality, Genesis is not recommended as it lacks the flexibility of traditional web development tools.
Genesis Variants
Genesis is available in two variants:
  1. genesis-core
    - Designed for developers to directly integrate Genesis into your Kotlin codebase.
  2. genesis-cli
    - Built on top of
    genesis-core
    to use it as standalone software without dealing with code when getting started.
Content Format
Genesis expects
Markdown content
irrespective of whether you're using CLI or core. These Markdown files can contain
front matter
based on YAML which will be used to populate the meta tag values in the generated HTML.
Front Matter Structure
You can include YAML front matter at the beginning of your Markdown files:
---
title: "Page Title"
ogTitle: "Custom Open Graph Title"
ogDescription: "Description for social media sharing"
ogImagePath: "assets/images/og-image.jpg"
---

# Your Markdown Content Starts Here
content_copy
Front Matter Fields:
  • title
    (required): Sets the HTML
    <title>
    tag value
  • ogTitle
    (optional): Custom Open Graph title for social sharing
  • ogDescription
    (optional): Description for social media previews
  • ogImagePath
    (optional): Path to Open Graph image for social sharing
Project Structure
Irrespective of which variant you are using, you must always have a
genesis.config.yml
file in which you define the structure that Genesis will look for.
Valid syntax for
genesis.config.yml
:
siteTitle: "Your Site Title"
siteFaviconPath: "favicon.ico" # Optional
siteTopBarTitle: "Your Top Bar Title"
sideNavBarItems:
- label: "Introduction"
filePath: "index.md"
- isHeading: true
label: "Getting Started"
- label: "Installation"
filePath: "docs/installation.md"
- label: "Quick Start"
filePath: "docs/quick-start.md"
- isDivider: true
- label: "Advanced"
items:
- label: "Configuration"
filePath: "docs/advanced/configuration.md"
- label: "Customization"
filePath: "docs/advanced/customization.md"
content_copy
Important Notes:
  1. Start Page
    : Your site's start page should always be named
    index.md
    and placed at the root of your project. This represents the introduction or landing page that visitors see when they first arrive at your site. For example, the page you are currently reading is named
    index.md
    and is located at the root.
  2. File Paths
    : Genesis can read any text file format (
    .md
    ,
    .txt
    , etc.) you specify in
    filePath
    , but the content should be in Markdown format. Double-check your paths.
  3. HTML Tag Escaping
    : Raw HTML tags in markdown content must be manually escaped. For example, use
    &lt;title&gt;
    instead of
    <title>
    . Genesis does not automatically escape HTML tags, so any raw HTML tags should be properly escaped to prevent rendering issues.
  4. Headings
    : Set
    isHeading: true
    to create bold section headers in your navigation.
  5. Dividers
    : Use
    isDivider: true
    to add visual separators in the nav.
  6. Labels
    : The
    label
    text appears for any navigation item that has a
    filePath
    .
  7. Nested Items
    : Use the
    items
    array to create nested navigation structure.
  8. Site Settings
    :
    • siteTopBarTitle
      - Text shown in the top bar
    • siteTitle
      - Goes in the HTML
      <title>
      tag (can be overridden by front matter)
    • siteFaviconPath
      - Path to your favicon (optional)
  9. Raw HTML Blocks
    : Raw HTML blocks can also be used, for example tables, as Genesis does not support table syntax in Markdown. This allows for more flexibility in formatting content.
Real-World Examples
The best way to see what Genesis can do is to explore real projects built with it. In fact, this very documentation you’re reading was generated using Genesis itself.
  • Genesis Documentation:
    . This is the source for the documentation you are currently reading.
  • Linkora Sync-Server Documentation:
Assets
Put all your assets (images, CSS, etc.) in an
assets
folder at the root. Genesis will copy this to the build directory.
info
Last Updated on: Sep 12, 2025 at 10:07 PM IST
Made with genesis.