TF Product Focus - Publishing Website Made Easy using ThreeFold x Zola Framework

Publishing Website Made Easy using ThreeFold x Zola Framework

Hi all, my name is Sasha from ThreeFold Product Management, and today I would like to create a tutorial on how you can easily publish a website or a github page using our ThreeFold x Zola Framework.

What is Zola Framework?

Zola is a static site generator (SSG), similar to Hugo, Pelican, and Jekyll (for a comprehensive list of SSGs, please see Jamstack). It is written in Rust and uses the Tera template engine, which is similar to Jinja2, Django templates, Liquid, and Twig. Content is written in CommonMark, a strongly defined, highly compatible specification of Markdown.

While you can also publish a static website using Zola alone, we at ThreeFold have customized the framework and created a website template that makes it even easier for anyone to build a website by simply cloning template and fill it with their own website data.


  • Github Account
  • Zola Framework
  • Markdown language knowledge

In order to publish a website using ThreeFold x Zola Framework, you would need to have an account on github (to store your website data in a github repository), as well as to have Zola framework installed on your machine.

Installing Zola on Your Machine

To install Zola on your machine, simply go to your terminal and run the following command:

MacOS (brew):

$ brew install zola

Windows (scoop):

$ scoop install zola

Details on Installation and other operating systems, read: Zola Installation Manual

Clone ThreeFold Website Template on Github

Our Team has especially created an html/css/markdown based template repository on github, free for anyone to use. To start working on your project, simply fork /clone this repository to your own github account.

Open and edit your Zola Template on code editor

Once the template is forked and cloned, open your code editor and start working on your website. I will explain a little more about the content editing process and procedure

Navigating the Template

Each editable page would be found under ‘content’ folder. Each subfolder under ‘content’ represent a single individual page. Each subfolder will contain image files that will be displayed for the page, and file and that’s where you can replace the template content with your own website content. For example, if I want to edit the homepage of my website, I would go to the following

content/home/ and start editing.

On this picture above you could tell that the website is complied of 3 pages: home, page2, page3.

Navbar made easy

When you make a new page folder, we have designed it in a way that the website would automatically generate a new navbar item using the name of each folder you created.

My navbar based on the picture below would be: Home Page2 Page3. Simply rename the folder to edit the navbar item name.

Replace Logo with your Own logo

To replace the logo, add your own logo image to ‘home’ folder.

And then go to file and replace the logo_path: images/yourlogoimagename.jpg

Editing The Content

We have designed the template in certain ways that it would accommodate different indentation web page style, such as placeholders, footer, header, left-indentation, right-indentation.

All you need to do is just replace the texts and images using markdown language, and use the indentation style you would like to use for your page. Don’t know how to markdown? Here’s a complete markdown syntax guide for you to begin with.

For example, the first section of the homepage of


Previewing your website locally

To preview your website locally, simply open the terminal via your code editor and type in:


So that the framework starts building your website.



So that the framework starts serving your website preview locally.

When successful, it will give you a link to a local preview of your website. Go ahead and copy paste the url onto your web browser to preview your website locally.

Congratulations! You just built your website locally

Now you can push all your commits and send all the local changes back to its origin repo on github to start publishing your website.

Publishing a Github Page or website using your own domain

Once all commits have been pushed back to your github repository online, you can start publishing your website.

The first thing you need to do is to go back to your code editor, and find config.toml file on your website repo. Edit the base_url on the config.toml file on your repo to your own domain.

Save all your changes and push all your commits to its origin again.

Publish your github page

Later on, go to your github repo settings, go to Pages on the left navigation sidebar. Add your own custom domain to start publishing your website.

And you are done! Your website will be published, and it will take only a minute or so to complete the process. Refresh page, and you will see a link to your newly published website.


I hope you’ve found this tutorial helpful. You have learned how to publish your website using ThreeFold Zola framework and GitHub. Now you can go ahead and show the world of your incredible work. Happy Experimenting!


Excellent! Will start a private project this weekend!


Great stuff, thank you for creating this @sashaastiadi :pray:

1 Like

One question @sashaastiadi … this is great for how to publish a website but what about if someone wants to host the website they created on the grid itself? Could we add an extension of this tutorial to include information about that?

they can of course deploy the website on their own node, but the tutorial would be for advance users since we dont have website weblet yet available on tfplayground. i’ll discuss how to best address this tutorial in the next days

1 Like