Creating a personal website with Zola and ChatGPT
To create this site, I used a static website generator called Zola.
Why a static website generator? For one of the previous incarnations of this website I used Wordpress, but it was an overkill: I don't want comments (the Internet is full of mean people), the structure of the site is simple and I'm the only contributor, so a full-blown CMS isn't worth the complexity and extra cost of a database.
There are many static site generators, and they all work on the same principle: edit your content in markdown, run a "build" command that processes the content, templates and assets, and spit out the finished site. Static websites became popular thanks to GitHub pages that let you host an HTML site from a public branch in Github for free. By default Github pages are created with the Jekyll generator, which helped the success of this approach.
I chose Zola because it was said to be fast and easy to install (it is), and because it's written in Rust which I thought would give me the excuse to learn the language (I haven't). However Zola is quite new and there aren't that many themes nor answered questions around. If I did this again I would probably choose a popular framework like Jekyll.
When I first started to learn about Zola I thought I would follow the tutorial, create content with the basic theme and then update the theme to get a look and feel that I like. This however didn't work. Zola "themes" (and I suspect this is true for any static generator) are not just about how the site looks, but also how it's structured. Unlike Wordpress, you can't swap the themes freely to try out different looks. Basically Zola themes are full-fledged sites where you can add your own content as long as you follow their structure. So you should first choose a theme based on the structure, and customise the look and feel with CSS.
This started to be a bit too complex, so I took another route: first create the site in pure html and css, then parametrise it using Zola's template engine. This worked better, but I hadn't written HTML or CSS in a while and the task looked a bit daunting. Luckily this is 2023, so enter ChatGPT!
Using ChatGPT to create the CSS was exhilarating. This was my first prompt:
Can you write an html page and CSS style for a simple personal website that shows: - a header with the title of the website (Balenet) - top navigation links to posts, work and about - a short intro text below the header - a list the most recent posts with title and date The style should remind of old terminals from the 80s, green text on black background
And here is what the HTML and CSS generated by ChatGPT looked like, with no edit on my part:
Not bad, right? I could have gone with this right away, but I continued to ask questions like "can you change the link colour to this" or "can you move the date of the post under the post title" and so forth. Every time the answer was spot-on. Even the card layout for the work section was almost right the first time, here is what I asked:
OK! now we are going to create the page that lists all my work projects, to belinked from the navigation bar's "work" element. The main "work" page should display a list of projects as a series of cards with an image, a title and a short description. The cards should be displayed on as many columns as fits the screen. Each card's title and image should link to a page describing the project in question.
And here is the result, again with no changes from my side other than pasting the CSS to the existing file:
After a few rounds of Q&A I ended up with the final theme, and it was time to move it over to Zola. Here ChatGPT wasn't very helpful, probably because Zola isn't very popular and maybe even less so in 2021 when ChatGPT's training data cuts off. So I ended up reading the Zola tutorial and started to reassemble the site using Zola's building blocks.
This was all pretty standard, the only thing that required a little more advanced technique was getting the videos to show properly. Zola uses "shortcodes", basically functions that expand to full HTML when the site is built. I created one for the YouTube video container (there is a default one but I didn't like it) that looks like this:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/{{id}}" allowfullscreen></iframe>
</div>
And is then used in a markdown page like this:
{{ youtube(id="s_3gUHwg4ms") }}
This is the only way I found to add custom style and HTML to pages without adding raw HTML directly.
The whole thing took me just a few hours from zero to site. The sources are on Github if you are curious.