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.
Prerequisites
- 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 index.md 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/index.md 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 _index.md 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 www.mastodon.io
Markdown:
Previewing your website locally
To preview your website locally, simply open the terminal via your code editor and type in:
./build.sh
So that the framework starts building your website.
Then
./start.sh
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.
Conclusion
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!
