The process was simple, we made a bunch of HTML templates for pages and made a SCSS style sheet(haven't used the non-pure CSS features yet, so it may as well be pure CSS rn).
Templates can include each other, so the header and navbar are all in a base.html that is then included in other pages. For example, the "About Us" page also includes the base.html. We have made our About Us in pure HTML+CSS and put it inside an about.html template that is then included inside the base.html by typing {% extends "base.html" %} to then finally generate the one you see on this site. It still is technically pure HTML+CSS at this point, we could have done all of this manually.
The templating system is way more potent than simple includes, but it's still basically HTML+Tera. At the end of the day, you will write HTML with some fancy features. Tera allows powerful automation which we haven't taken advantage of(if we ever do, we want to keep this simple)..
This blog page is based on a template, but the content of it is in a markdown file, so this one is not pure HTML. Using Zola, you can write markdown files and convert them to webpages like this one using the templates you made. Zola does all the formating for you, all you have to do is add {{ page.content | safe }} to your template. At the time of writing, this is the only page that is that way. Zola also supports shortcodes in markdown, which allows to insert any HTML inline insode your markdown, we will take advantage of this in the future(but too lazy to setup rn). You can also just paste HTML inside the markdown files Zola will just roll with it
We have made all the templates, css and js of this website by hand, and we will keep it this way forever. The Homepage and About Us will never have their content be generated with markdown for maximum control as we continue this web making journey.
At the begining, we started this project only to make a personal blog for ourselves, but this has turned out to be way too fun(Lost sleep over it, you know the neurodivergent struggle)
We have looked at countless Static Site Generator before concluding with this one, Here is a few of the advantages of Zola that we like:
zola serve showing a live preview withupt uploadOh, before closing this up, there is a little fun thing with the background that we have coded, if you reload the page, you might notice that faces with hats that appear in the background will move, there can be up to 4. We were too lazy to code something that would prevent them to go behind the content box. On vertical screens(such as mobile), the content box takes the entire screen and you can't see the slimes, but it's still possible to see them if you are lucky and they spawn at the bottom of the screen. If you have js disabled, then they will show up on both the side of your screen on a 1080p screen.
P.S: Zoom out and reload, the faces can appear anywhere on the entire width of the screen, and it's much easier to catch all 4.