creation year: 2021
glitched logo of Yoctolio


A couple of months ago my friend had the need for a quick web page containing a selection of his work. As the requirements was pretty simple I decided to create a small prototype directly in good'ol HTML + CSS, as all the videos featured on the website are hosted on YouTube this took me a couple of minutes and everyone was happy.

Now of course my friend kept on working and therefore producing more videos, videos that he wanted to showcase. Adding a small html snippet every time was of course not a problem but there was always a delay and that when I thought

"Is there a way to over-engineer that process and to increase my Rust knowledge at the same time ?"


To fit this use case Yoctolio needs to have the following features :


Because this project is also about learning there are some self imposed constraints :

Getting started


Using Cargo : cargo install yoctolio

Initialize project

Once yoctolio installed you can run yoctolio init to initialize a new project.

After configurating everything to your liking you can simple run yoctolio build to compile your website.


Add video content

The first step needed to add content on your portifolio is to create a file at the following path : config/config.txt

As well as the config/tags.txt file with the following content :

1, directing
2, editing

The words directing and editing can be changed and any tag can be added as long as their id (the number in front of the name) is uniq.

Inside this file you can now add one line per section on the index page of the portfolio :

Name of the section, file_name_of_the_section.txt

Yoctolio will now generate a section called Name of the section, the videos you wish to include in this section need to be listed in the file you defined. In this case config/file_name_of_the_section.txt

To add a video you need to follow this pattern :

Name of the video, youtube_url, tag_number, year, description

Where :

Changing the template

The default templates are visible in the project repository, to create your own you can simply create a templates folder with an index.html inside and it will be used by default.

Adding a page

If you want another page you can create a folder at the following path templates/pages containing any html page that will be included in you portfolio.

Adding assets

Whenever you want to include css, js, images or any asset to you projects you can simply create a folder at the following path templates/assets, the content of this folder will be copied to public/assets during compilation.

Adding partials

A partial is a small html snippet that can be easilly reused in different pages and template, it can be useful for header, footer, navigation...

To add partials to your porfolio you need to create the folder templates/partials, then inside create any html file. To call a partial from a page of the index.html you just have to include the following snippet : {{!partial_name}}.

So if you create templates/partials/footer.html it is called by using {{!footer}} in any template.

Live reload

When working on your templates you probably want to regenerate automatically the website as doing it manually can be quickly become annoying.

To do so I usually use entr like that :

ls templates/* | entr yoctolio build