How to set up a Zola website with HayFlow theme in under 15 minutes
Tags: zola, hayflow, tutorial, webdev
Published: 2023-03-10 21:15:36

> (This article was written by [ChatGPT](https://fr.wikipedia.org/wiki/ChatGPT) based on [HayFlow’s readme](https://gitlab.com/cyril-marpaud/hayflow/-/blob/main/README.md))

If you're looking for a clean, modern-looking website theme that's easy to set up, HayFlow is a great option. This theme is designed to work with Zola, a static site generator written in Rust, and it features a dark theme with a particles background, vertical arrows for navigation, and a few card types to choose from. Best of all, it requires only Markdown editing, so you don't need to know HTML or CSS to use it.

## Prerequisites

Before you begin, you'll need to make sure you have [Zola](https://www.getzola.org/documentation/getting-started/installation/) installed on your system. You'll also need to have [Git](https://git-scm.com/downloads) installed to be able to clone the HayFlow theme repository.

## Live demo

See [my personal website](https://cyril-marpaud.gitlab.io/) to get a sense of what can be accomplished in a few minutes with this theme. Its source code is also available as an example in my [Gitlab website repository](https://gitlab.com/cyril-marpaud/cyril-marpaud.gitlab.io).

## 1. Initialize a new Zola website

The first step is to initialize a new Zola website. Open your terminal and navigate to the directory where you want to create your new website. Then, enter the following command:

```bash
zola init mywebsite
```

This will create a new directory called `mywebsite` with the basic files and folders needed to run a Zola website.

## 2. Download and install the HayFlow theme

Next, you need to download and install the HayFlow theme. To do this, navigate to the `mywebsite` directory in your terminal and clone the repository:

```bash
cd mywebsite
git clone git@gitlab.com:cyril-marpaud/hayflow.git themes/hayflow
```

This will download the HayFlow theme from the GitLab repository and place it in a new directory called `themes/hayflow`.

## 3. Configure your website to use the HayFlow theme

Now that you have the HayFlow theme installed, you need to tell Zola to use it for your website. Open the `config.toml` file in your text editor and add the following line at the top:

```toml
theme = "hayflow"
```

This tells Zola to use the HayFlow theme for your website. Save the file and close it.

## 4. Run your website

With your website set up and customized, you're ready to run it. Open your terminal, navigate to the `mywebsite` directory, and enter the following command:

```bash
zola serve
```

This will start a local web server and open your website in your default web browser. You should see your landing page.

## 5. Customize your landing page

With the HayFlow theme installed and configured, you're ready to customize your landing page. Open the `config.toml` file again and scroll down to the `[extra]` section. This is where you can add variables to customize your landing page.

There are three variables you can use to customize your landing page:

- `name`: This is your name.
- `roles`: This is an array of strings that represent your roles or areas of expertise.
- `links`: This is an array of objects that represent links to your social media profiles or other pages. You can use any free icon from [Font Awesome](https://fontawesome.com/search?o=r&m=free).

To add your own information, simply replace the default values with your own. For example:

```toml
[extra]
name = { first = "John", last = "Doe" }

roles = ["Web Developer", "Graphic Designer", "Social Media Manager"]

links = [
   { icon = "fa-brands fa-twitter", url = "https://twitter.com/johndoe" },
   { icon = "fa-brands fa-linkedin", url = "https://www.linkedin.com/in/johndoe" },
   { icon = "fa-solid fa-envelope", url = "mailto:johndoe@example.com" },
]
```

Once you've made your changes, save the `config.toml` file and close it.

## 6. Add additional sections to your landing page

One of the great features of the HayFlow theme is its support for multiple sections on your landing page. You can create new sections by adding new folders inside the `content` directory and adding Markdown files to those folders.

For example, to create a new section called "Pizza", create a new folder inside the `content` directory with the name of your section (e.g. pizza) and add an `_index.md` file inside it with the following front matter:

```toml
+++
title = "Pizza"
+++
```

This will create a new section on your landing page with the title "Pizza". You can add your own content to the section by editing the `_index.md` file.

## 7. Customize section cards

HayFlow offers three types of cards for your sections: `simple`, `columns`, and `list`. By default, sections use the simple card type, but you can customize this by adding a `card_type` variable to the front matter of your `_index.md` file.

For example, to create a section with a columns card type, create a new folder inside the content directory with the name of your section (e.g. ingredients) and add an `_index.md` file with the following front matter:

```toml
+++
title = "Ingredients"
[extra]
card_type = "columns"
+++
```

Next, create three additional Markdown files inside the ingredients folder with names like `one.md`, `two.md`, and `three.md`. These files will contain the content for your columns. Here's an example front matter for the `one.md` file:

```toml
+++
title = "Tomatoes"
[extra]
icons = ["fa-solid fa-tomato"]
+++

Tomatoes are a delicious ingredient in many pizza recipes.
```

This will create a column card with a tomato icon and the title "Tomatoes".

If you want to create a section with a `list` card type, the process is similar. Just set the `card_type` variable to `list` in your `_index.md` file and create Markdown files for each item in your list. You can optionally set a `link` variable detailing the corresponding URL if applicable.

## Conclusion

With HayFlow, you can have a beautiful and functional landing page up and running in just a few minutes. The modular design and support for multiple sections make it easy to customize your page to fit your needs, and the use of Markdown makes it easy for anyone to create and maintain their own landing page.

Whether you're a freelancer, a small business owner, or just looking to create a personal website, HayFlow is a great choice for your landing page. So why not give it a try and see what you can create?

## Whoami
My name is Cyril Marpaud, I’m an [embedded systems freelance engineer](https://www.linkedin.com/in/cyrilmarpaud/) and a Rust enthusiast 🦀 I have nearly 10 years experience and am currently living in Lyon (France).