This walkthrough starts deliberately small. When you finish, you will have a branded Home page, an automatically generated Docs sidebar and one real article. Search, Blog and Downloads can wait until the basic site feels right.

Before you start

This guide assumes that:

  • Zola 0.23.6 is installed;
  • DevLab is available at themes/devlab-theme/;
  • the current directory is the root of your Zola site.

If the theme is not installed yet, choose a pinned method in Install and update.

Build the first site

  1. Create zola.toml.

    Replace the example identity and URL with your own. Search is disabled in this first configuration so there is only one moving part: rendering the site.

    base_url = "https://example.com"
    title = "Acme Docs"
    description = "Documentation for the Acme project."
    author = "Acme maintainers"
    theme = "devlab-theme"
    
    compile_sass = true
    
    [markdown.highlighting]
    light_theme = "github-light"
    dark_theme = "github-dark"
    
    [extra.devlab.brand]
    logo_text = "Acme"
    footer_text = "Acme"
    show_logo_mark = false
    
    [extra.devlab.footer]
    show = true
    note = "Documentation maintained by the Acme team."
    
    [extra.devlab.navigation]
    links = [
      { name = "Home", path = "/" },
      { name = "Docs", kind = "docs" },
    ]
    
    [extra.devlab.docs]
    section = "docs/_index.md"
    path = "/docs/"
    get_started_path = "/docs/getting-started/"
    
    [extra.devlab.appearance]
    default_mode = "system"
    show_toggle = true
    
    [extra.devlab.search]
    enabled = false
  2. Create the content tree.

    mkdir -p content/docs

    You are building this structure:

    content/
      _index.md
      docs/
        _index.md
        getting-started.md
  3. Add the Home page.

    Create content/_index.md:

    +++
    title = "Acme"
    description = "Clear documentation for building and operating Acme."
    
    [extra]
    home_layout = "wide"
    home_eyebrow = "Acme documentation"
    home_primary_action_label = "Read the docs"
    home_primary_action_path = "/docs/"
    home_features = [
      { kicker = "Start", title = "Install Acme", description = "Get a local environment running." },
      { kicker = "Build", title = "Use the project", description = "Follow focused guides for everyday work." },
      { kicker = "Reference", title = "Find exact answers", description = "Look up configuration and behavior." },
    ]
    +++
    
    Acme keeps its guides and reference material in one searchable place.
  4. Add the Docs section.

    Create content/docs/_index.md:

    +++
    title = "Documentation"
    description = "Learn Acme from the first command to production use."
    sort_by = "weight"
    template = "docs.html"
    page_template = "doc-page.html"
    +++
    
    Start with the first guide, then add sections as the project grows.
  5. Write the first article.

    Create content/docs/getting-started.md:

    +++
    title = "Getting started"
    description = "Run Acme locally for the first time."
    weight = 1
    +++
    
    You will have a working local environment by the end of this guide.
    
    ## Requirements
    
    - Git
    - the Acme command-line tool
    
    ## Start the project
    
    ```bash
    acme start
    ```
    
    Open the address printed by the command.
  6. Check and preview the site.

    zola check
    zola serve

    Open the local address printed by Zola, then visit /, /docs/ and /docs/getting-started/.

What DevLab generated for you

The Docs sidebar, mobile Docs panel, breadcrumbs, table of contents and Previous or Next links all come from the same content/docs/ tree. Adding another Markdown page is enough to extend that navigation.

Make one change at a time

Change the project name and content first. Turn on search or add another section only after these three routes build correctly. A small working configuration is easier to understand than a complete configuration copied all at once.

Add the next capability

  • Turn on search without changing the content tree.
  • Add Blog as an updates channel.
  • Add Downloads for packages and release artifacts.
  • Hide breadcrumbs, the table of contents, pagination or the footer.

Each change has a copy-ready example in Configuration recipes. Use the complete reference only when you need every default and edge case.