How to set up a Zola website with HayFlow theme in under 15 minutes

(This article was written by ChatGPT based on HayFlow’s readme)

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 installed on your system. You'll also need to have Git installed to be able to clone the HayFlow theme repository.

Live demo

See my personal website 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.

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:

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:

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:

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:

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.

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

[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:

+++
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:

+++
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:

+++
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 and a Rust enthusiast 🦀 I have nearly 10 years experience and am currently living in Lyon (France).