Here's how to make your first site in Koriander CMS. After finishing this tutorial you'll achieve the following:

Install and start Koriander CMS on your computer
Edit your first page on your Koriander CMS site
Customize your first page's template
Change how your first page looks like with a stylesheet
Download a copy of your site as a ZIP file

Install Koriander CMS

Install Koriander CMS on your computer using pipx. Install pipx using the official pipx installation instructions. Open a terminal on your computer and make sure that you can run pipx. Type the following command and press the Enter key:

pipx --version

pipx version on the author's computer Open in new tab (full image size 37 KiB)

On the author's computer this command prints the following:

1.8.0

If you see pipx printing a version number like 1.8.0, you're ready to install Koriander CMS on your computer. Type the following command and press the Enter key:

pipx install koriander

Install Koriander CMS with pipx install koriander Open in new tab (full image size 45 KiB)

When Koriander CMS installs, pipx install koriander prints the following:

  installed package koriander 0.19.0, installed using Python 3.13.13
  These apps are now globally available
    - koriander
done! ✨ 🌟 ✨

The version numbers printed here, 0.19.0 and 3.13.13 may be different when you install Koriander CMS.

Launch Koriander CMS

Type the following command in your terminal to launch Koriander CMS:

koriander

Type koriander in your terminal and press Enter to launch Koriander Open in new tab (full image size 37 KiB)

When you launch Koriander CMS, it automatically opens its start page in your browser. If your browser doesn't open, copy the green address below Log in with the following link: .

Koriander CMS prints a log in link that you can open in your browser Open in new tab (full image size 119 KiB)

Once Koriander CMS opens in your browser, you should see the following page:

This is the index page that you see when Koriander CMS starts Open in new tab (full image size 94 KiB)

Press the blue Edit page link in the top to open the page editor for the index page:

Edit the page using the Edit page link — Edit the page using the **Edit page** link Open in new tab (full image size 95 KiB)

This takes you to the page editor for the index page. You can use the Markdown editor on the left side to edit the index page contents:

Use the editor on the left side to edit the index page contents Open in new tab (full image size 154 KiB)

Here's an example of what you may want to add to the page:

You can format text, create numbered and unnumbered lists, and write quotes with Markdown Open in new tab (full image size 152 KiB)

Try uploading a picture by selecting it in your operating system's file browser and dropping it in the editor:

Open in new tab (full image size 156 KiB)

A Markdown ![](…) image appears on the left side and the preview on the right should show the actual image:

An image tag appears on the left side and an actual image appears in the preview on the right side. Open in new tab (full image size 163 KiB)

Edit the picture description by adjusting the Markdown text that Koriander inserted for you. Here's the Markdown from the screenshot before:

![](Screenshot 2026-08-30 at 23.32.40.png)

Change the picture description by writing something between the ![ and ] symbols:

![A screenshot of Koriander](Screenshot 2026-08-30 at 23.32.40.png)

The preview updates and shows the picture description that you've entered:

The page preview shows the picture description that you've just entered Open in new tab (full image size 59 KiB)

Save your changes by pressing the Save button on the right side:

Press the Save button to save your changes — Press the **Save** button to save your changes Open in new tab (full image size 168 KiB)

Go back to the start page and see your newly created page:

After saving, press View on site to see your changes — After saving, press **View on site** to see your changes Open in new tab (full image size 174 KiB)

Here's what your index page should look like now:

Your index page should look different now Open in new tab (full image size 110 KiB)

Perhaps you've noticed that the image is quite big! Here's how to fix it.

Customize the template

Select the Template link in the top toolbar:

This opens up the template editor for the index page. Koriander CMS inserts the template that it currently uses for the index page and you can customize it here:

Customize the index page template here Open in new tab (full image size 186 KiB)

Under {% load i18n %}, insert the following text:

{% block extrahead %}
<link rel="stylesheet" href="mystyle.css" />
{% endblock extrahead %}

This is what the template should look like after you insert this text:

The template should list your new {% block extrahead %}… tag below {% load i18n %} Open in new tab (full image size 191 KiB)

Scroll down and press Save and continue editing:

Koriander CMS should show you the following message with green text:

The template "index.html" was addeedd successfully. You may edit it again below.

Create a CSS asset

Now press the green Add link next to the Asset files entry in the left Koriander CMS menu:

Press Add next to Asset files — Press **Add** next to **Asset files** Open in new tab (full image size 183 KiB)

This opens up an editor in which you can create a CSS asset:

Pressing Add opens up the asset editor — Pressing **Add** opens up the asset editor Open in new tab (full image size 106 KiB)

In the Path field, enter "mystyle.css". In the Data field, enter the following CSS contents:

img {
  width: 100%;
  max-height: 20rem;
  object-fit: contain;
}

In the Type field dropdown, choose CSS. Here's what you should end up with:

This is how the asset editor looks like when you've updated the Path , Data , and Type field — This is how the asset editor looks like when you've updated the **Path**, **Data**, and **Type** field Open in new tab (full image size 99 KiB)

Press Save and then press View site to review your changes. Here's what the new index page should look like now:

Press Save and then press View site . You should now see the image appearing in a viewable size — Press **Save** and then press **View site**. You should now see the image appearing in a viewable size Open in new tab (full image size 131 KiB)

Download your site

In this section you're going to download a copy of your site as a ZIP archive. First, go to the Koriander administration index by selecting the Admin link in the top toolbar:

Select Admin in the top toolbar — Select **Admin** in the top toolbar Open in new tab (full image size 133 KiB)

In the Koriander administration index, select the Site settings link:

Select Site settings — Select **Site settings** Open in new tab (full image size 111 KiB)

On the Change Site settings screen, press the grey ZIP Download button:

Press ZIP Download — Press **ZIP Download** Open in new tab (full image size 113 KiB)

On the Create ZIP archive screen, press the Create button:

Press Create — Press **Create** Open in new tab (full image size 97 KiB)

This should take you to the Download ZIP archive screen. Select the Download link to download a ZIP archive with your Koriander site. This downloads a site.zip file:

In your operating system's Downloads directory, open the site.zip file that you've just downloaded:

When you unpack the site.zip file, you can see all files needed to view your Koriander site:

The site.zip archive contains all your Koriander site files — The **site.zip** archive contains all your Koriander site files Open in new tab (full image size 91 KiB)

Open the index.html page inside the site directory highlighted on the previous screenshot. This opens a local copy of the index page in your browser:

Open the index.html file to view a local copy of the index page on your computer Open in new tab (full image size 111 KiB)

Create your first Koriander CMS site

Install Koriander CMS

Launch Koriander CMS

Customize the template

Create a CSS asset

Download your site

Tags