Over the weekend, I experimented with designing a static website for personal use, which I could host through Keybase's KBFS-powered static site hosting service, through the use of a static website generator. This is the result of that effort.
Keybase KBFS cloud storage
Keybase provides a large amount of free and encrypted cloud storage. Every account is granted a private and public share, with shares based on their account name. Teams are also granted a share for team members to use (readers can only read from the share), and unique shares between specific people can be created dynamically by chaining their usernames together with commas as delimiters. The KBFS FUSE driver makes these shares as readily accessible as
cding into the directory from a terminal, without needing to navigate through a web interface, like so:
The above would open an encrypted share between
you. Both people are free to create and read files from this share that are only visible to themselves. Keybase will remember tat you've used this share, and will keep it visible when you
It's a great way of carrying your data everywhere you go, but where only you have the keys to decrypt your data. If you lose your keys, your data is lost in the cloud, forever. Keybase doesn't have the ability to decrypt your data. So it's important to have more than one key that you can use to access your data. Each device authenticated generates a unique key, which you can revoke at any time. A paper key may also be generated, which is a long passphrase that you can use to prove your identity at any point (provided the paper key is not revoked, of course).
Static hosting with KBFS
One of the unique benefits to KBFS is that your public directory can be used for static web hosting, if the public directory is identified as a static website. A static website will be served through Keybase if the root of your public directory contains an
index.html file. It's a great way of hosting a personal website.
Choosing the generator: Zola
Being a Rust programmer, I've had my eye on the Zola static website generator. It compiles into a single static binary, which can dynamically generate and reload static websites in a matter of milliseconds. Despite being relatively new, it already has more features than Hugo, which is the popular Golang-powered static site generator that also operates as a single static binary.
Quick technical overview of Zola
- SASS/SCSS is the language for defining style sheets.
- Markdown is the syntax that pages are written in.
- Tera is the template language which constructs the web pages.
- TOML is the basis for all configuration capabilities.
- Each markdown page contains a header, with keys describing the page and its behaviors.
- A TOML config defines behaviors for the static site generation, as well extra keys to use in templates when generating pages.
Designing a new Zola theme
However, very few themes exist for Zola, and the ones that do are very basic in design. I had an idea for what I wanted to achieve in the design, and therefore set out to design the website with a new theme written from scratch. The Tera templates proved simple to work with, and are very extensible, so the theme was completed in a day.
To give back to the creators, I am open sourcing the theme that I've developed for my website, so that anyone reading this is free to achieve a similar design with their static website. There are a few issues to work out, and some additional configuration parameters to add, but it is almost complete.
All measurements are based on
rem units instead of pixels, which will guarantee that the website scales regardless of DPI or font size settings. I've yet to add media queries to handle different screen widths, however, but my use of flex boxes should make it easy to rearrange content.