A bit late on this one, totally not due to my lack of a writing routine, but because I wanted to give you the full experience of running a portefolio/blog in the long run.

Anyways, here I will present to you the behind-the-scenes of this beautilfully janky website.

Why???

I am a bit of a nerd and like to follow nerds alike, thus a major part of my RSS feeds being developer blogs.

This kind of blogs always tickled something in me, their amusing technical adventures and struggles, hidden stories behind specific programs and projects, or just random rants; on top of making me bust a laugh or two, make me eager to have such experiences of my own.

Such magic walls of texts have inspired me to go on random projects or just make something no matter how stupid it sounds, and lately that I too should, maybe, record some of my adventures.

So this project was born.

Choosing frameworks

Having decided to go build something from scratch, I went arround looking for the tools to do so.
Not really into web development, but I have done some stuff.

There was no way I would go on and write this blog posts with fancy html and css, so obviously I went the static website generator route.

My first experience with such tools was with Hugo, helping make a new landing page with some articles for my university linux group ( GLUA, shout out for those amazing guys and gals!!! ). It was somewhat interesting and learning a templating syntax like nunjucks was usefull, but other than that I found the whole hugo arquitecture a wee bit batteries included.
While that might have been a plus for a quick and easy fix, I wanted to make something mine, so I went fishing for something else.

In this fishing session I caught in my web 11ty, and was amazed how simple it was.

Fast af, plugins for additional stuff and freedom to do whatever I want !!!
I bet hugo somehow can give you a similar experience but I am bad at RTFM, so I stuck with 11ty.

Design/Prototyping

Yeah . . . While I would like to seem a reasonable developer and say this is a step in most of my projects, it is not, and so went straight into building the thing.
After an hour or two of doing and redoing stuff or looking at blinding white webpage, I realised that maybe spending a day or two just designing and prototyping the blog would be more productive.

The canvas

Normally for simple websites I usually use plain simple pen and paper, however in one of my university classes, I used figma for a project and it was really satisfying building stuff based on detailed blueprint and seeing how similar the mvp ended up looking.
Was about to use it, but our lord Richard Stallman showed me the FOSS way and decided to try penpot.

From nothing to something

At this point I had my idea, framework and canvas, however I had no clue on what to do so, I started looking for references.

Here are some of them liked:

• ntietz blog
• pluralistic
• neocities *(not the website but the content)
• dingusland
• lukesmith blog
• tom scott newsletter
• ludicity blog
• etc ...

From this small sample, one could easilly guess I am sucker for retro-ish, minimal, mostly plain text websites, and they would be absolutly right.

So on those pillars I tried to draw a castle.

For my retro niche went with a terminal theme, and for the rest just followed my instincs on what I would like to see on a blog.

Most of the color pallets were ripped from nord, I find nord themes cozy and easy to get lost in, thus my choice.

Something where I put a bit of brains on was the navigation, ditching the navbar by using a sticky footer and the freaking cool header with my email.

When I started to draw this blueprints I though they would end up far from the final result, but as you can see no big before and after :

I don't know if this says something about my genious or how bad my creativity is.

Build time !!!

After mockups were done, I let this project sip for a while, however when I came back, even rusty on the 11ty thing, the blueprints enabled me move on.

At first I tried to look for starter projects, but all the examples listed on 11ty docs were using plugins and frameworks that I did not know why I would need them.
I simply wanted to use tailwind ( all my homies hate plain css ) and maybe some 11ty plugins like RSS.

So against my will ... I RTFM and started working.

Honestly it went pretty smoothly, just had to learn some nunjucks again and use what I read in the freaking manual, like the templating file structure (spoiler: everything is a template even the content), file passtrough, other weird quirks and the in's and out's of tailwind.

Most of the work was grabbing the the raw content parsed form the markdown files to html and filter it with into some styled tags to create pretty elements in the 11ty config :

    eleventyConfig.addFilter('MarkdownFilter', function(content) {

	content = content.replace(/<p>/g, '<p class="mt-2 mb-4  [&:has(img)]:flex  [&:has(img)]:my-14  [&:has(img)]:md:h-96 [&:has(img)]:justify-center ">');
	content = content.replace(/<h1>/g, '<h1 class="font-extrabold md:text-8xl py-3 text-7xl underline ">');
	content = content.replace(/<h2>/g, '<h1 class="md:text-7xl text-6xl py-2 underline">');

    ...

This markdown filter would be applied in the post templates like this :

<div class="text-xl md:text-2xl">
  { { content | MarkdownFilter | safe } }
</div>

And like nothing in a week or so had my website pretty much polished, just missing the content, the hard part ...

Deploying

Between prototyping/designing and building there was a bit of time gap, that time gap was because I was lazy, occupied or was messing around with selfhosting.

Well in the selfhosting path I learned that to truly selfhost my website I either had to expose my ip address to the outer wilds or use a VPS with a reverse proxy manager redirecting the traffic to my server.

So I went with the second option, looked around and discovered something . . . VPS ARE FREAKING EXPENSIVE. No way I will pay 8€ a month for something I can have hosted for FREE in netlify with a custom domain.

A VPS is not out of question, especially with software that I would want to host publicly like a pastebin alike or something collaborative like mattermost or office suites, however I do not need to do such thing right now and am cheapstake, so I wont just waste money on that ... for now :D

Before going with netlify, I explored alternatives and really liked Surge.sh, no admin panel, no complicated website, just a cli tool to host your static website, but as there was no custom domain support for free and gave up on it.

With netlify chosen as my hosting provider, I just created an account, added my domains and deployed my website with the netlifly cli.

TODOS and Conclusion

Still got a few things to do play around with the RSS template, is pretty bad right now ( it works though !!! ), fix weird quirks with the markdown filter as I notice them or improve it a bit and maybe clean up the eleventy.js config here and there, but for now I think I am good.

Writing is freaking hard. Journalists, lyrics composers, novelist and every other person who writes for a job has my upmost respect.
Inspiration and motivation to write are hard to come by although I think I getting better.

Overall feels good to have my small corner of the internet to play with, even if it takes some work.