how i made this web page

my last post covered my shiny new CV and résumé, but i’ve been cooking this website at the same time. i can’t ship a job application pointing to an unfinished home page, can i?

that’s what this article is about. how i made this site in only a few hours with the help of generative AI – you may have heard of it, it’s been in the news recently.

why create a website?

any computer science student worth their salt will want to host their own server at some point. i think. i have never hosted a server before. fortunately, i don’t need to, because i can use PVVs web-docs as a member! i’ll probably set up a server some day, and i’ll be sure to write about it.

through a conversation about said web-docs with someone at PVV, they mentioned that i could set up a static site generator (SSG) that serves the site every time someone fetches the web page – or perhaps running on a daily cron-job to update the content, if any changes have been made. that’s what this is about.

i wanted a place to put my write-ups; to motivate the creation of said write-ups and; to share my code and what i am working on. as such, a personal web page is a no-brainer. plus, it doubles as a portfolio of sorts!

so, time to brush up on html and css (we are avoiding javascript).

what’s the big picture plan?

for my purposes, creating a static site is all i need. just some html and css with some hyperlinks to other html-pages. but that is too simple, let’s complicate things.

let’s write a static site generator. i had originally thought about doing this in uiua, but given some job application deadlines coming up, i don’t have time for that. so we are doing it in python and we are going to be happy about it – also because that is what my LLM gave me.

this SSG will take in markdown and jinja2 html templates to generate an output folder with the desired website structure with generated html documents. the content and metadata we get from the markdown documents will be shoved into a template to display neatly. all pages of the website use the same simple css for consistent looks.

additionally, i will be using nix to manage dependencies and build the project together with make. i will use jj for version control. why? i like these.

did i mention i am trying to do this as fast as humanly possbile, thus opting out of the human aspect and leaning solely (mostly (quite a bit (but still fairly manual))) on the power of the machine through the extensive use of AI? well, as it turns out, i am a subscriber of Kagi Search, and i get some of their AI models for free. So i decided to try out their ‘code’ model.

let’s get to work

the promptening

to start out, i gave Kagi AI model ‘code’ this prompt:

    can you generate complete html and css for me for a very simple, minimalistic
    portfolio page for me? i want a nav bar with pretty much only the home page and
    a blog page for now, since i want to be able to feed an SSG some markdown to
    render as blogs, and the home page to simply be an introduction to me and
    showcase of programming projects, and probably a recent blogs list. use dracula
    color theme

the result was astounding, etc. etc. (you’ve heard this before). but the AI did make some mistakes that needed to be tweaked. but i don’t remember those as of writing, so i’ll leave it as “hindsight is 20/20”.

so after prompting day in, day out (exaggeration), after jumping over obstacles (exaggeration), running with weighted clothes (anime exaggeration), striding against the river (exaggeration), climbing the mountain while rolling a bolder, only for it to roll down from the summit (sisyphus), i at last reached it (dramatic conclusion). basically, i tuned the css a little so my neurons fired with happy noises (personification).

i had a working site using templates and a build.py-file within a few hours that morning, before going to school. turns out vibe coding works.

this site had a working nav-bar with the home page, blogs page and a now page on it. all these pages were unified under the same, clean, dracula-colored css. it’s great.

writing blogs

the next step is to wring out some blogs. thus i started typing. because i watch theprimeagen, i am influenced and are thus a user of the dvorak keyboard layout. as such, while you were studying, i studied the keyboard. basically, i can type pretty fast, and are good at articulating my thoughts. this is also partly why i like language learning, but i digress.

after writing blazingly fast, i finished the first two blogs (i am currently, as of writing this, writing this, so the statement must be false. logicians rejoice!) the writing experience is rather pleasant, because i get to just write markdown, and it will be automagically turned into html through the AI-generated python file.

oh, i remembered an issue with the AI-generated python code now: the markdown parsing doesn’t properly handle codeblocks. so i need prompt some more.

deploying

the last step is to essentially put the output of the SSG onto my home folder on one of the server machines at PVV. it will be picked up and hosted promptly (pun intended).

i contemplated a few different ways to do this. the first one, would’ve been quite neat: simply cloning my repo with the site and blogs, then building it using nix. the issue was that the machine used a too old version of nix! hogwash, says i.

a different option would be to simply run the python script manually in a venv, but the same issue arose thence as well! python was too out of date!

thus, my only perceivable option was to copy the files from my laptop to the server through scp, ‘secure copy’. basically, cp through ssh. this worked beautifully, but killed any hope of cron-jobbing the SSG. i will have to look into this further some other time.

what went wrong? future path

using generative AI to speedrun the creation of a personal website works, but isn’t pleasant. it is better to take the time to craft your own site. i would prefer this, because it would give greater control over the look and feel of the site. however, the time cost of doing that is not one i’m willing to (able to) pay as of now.

in the future, i hope to rewrite the site and the static site generator to generate the entire site, not just the blogs, from markdown. because i like markdown more than a bunch of html, even though templates make html nice.

i already mentioned doing it in uiua, which would entail creating my own markdown parser, unless i also use something like pandoc. using pandoc could also be a nice path to go. i could also explore htmx, as i have heard many good things about it… but not recently: is it dead? i don’t know, that is a question to answer some other day.

turns out webdev is a little fun.