Pano de fundo

2024-07-13

Um pouco atrasado com esta publicação, não porque tenho a disciplina de escrita de um puto de 5 anos, mas porque penso que agora seja altura perfeita para resumir esta minha aventura.

De qualquer forma, fica aqui a minha experiência ao criar e gerir este blog/portefólio.

O porquê disto tudo

Sempre gostei de ler/perder-me em blogs e publicações sobre aspetos técnicos relativos a nichos no desenvolvimento de software ou em tecnologia no geral.

Quando leio estes textos sagrados, uma vontade de fazer algo, seja estúpido, produtivo ou simplesmente inútil, cresce em mim, tendo inspirado vários projetos meus, mesmo que tenham, na sua maior parte, morrido na praia ou nunca visto a luz do dia.

No entanto, apesar da taxa de sucesso destes projetos, do trajeto, que escolho para cada um deles, costumo tirar algo interessante ou frutífero que depois acabo por revisitar.

Ao criar este meu cantinho da internet, dos frutos que vou tirando aqui ou ali, queria deixar uma semente, tal e qual como a que muitas vezes me faz levantar e como referi criar algo, assim contribuindo para este estranho ciclo.

Escolha de frameworks

Tendo decidido criar esta coletânea de paredes de texto que agora estão a ver, fui procurar as ferramentas para o fazer.

A minha experiência no desenvolvimento de web não é muita, mas existe e foi dai que parti.
Normalmente este tipo de blogs, são feitos com recurso a geradores de websites estáticos, que a partir de uma planta ou template pegam no seu conteúdo numa estrutura simples como markdown, latex ou até mesmo html e criam várias páginas.

No meu caso escolhi e uso markdown, pela sua simplicidade, nada de tags dentro de tags ou quer que seja que latex faça.

A minha experiência com este tipo de ferramentas, é baseada nas contribuições que fiz a algum tempo para o futuro (acho eu) website do meu grupo de Linux da universidade ( GLUA, se quiserem conhecer fica aí a ligação, essa malta é espetacular ). Ai utilizei Hugo, foi interessante e aprender uma sintaxe para templates como nunjucks foi útil, no entanto, achei muito a papinha da forma como o Hugo funciona á volta, e promove a utilização de temas.
Provavelmente poderia simplesmente ignorar todas essas indicações e fazer algo, como intendia, do zero, mas para isso, seria preciso ler atentamente a documentação, uma coisa que como sou estúpido não faço, e pôs-me á procura de alternativas.

Nessa minha pesquisa encontrei 11ty, e fiquei surpreendido o quão simples é, sem falar que é bastante rápido e por omissão oferece uma liberdade estupenda. Com isto, um toque de tailwind( nunca mais utilizo CSS puro ) e um ou dois plugins tinha tudo o que precisava e assim comecei a meter mãos á obra.

Desenho/Protótipo

Por muito que gostaria de dizer que sou um desenvolvedor responsável e tenho sempre reservada uma etapa para o planeamento e desenho daquilo que quero fazer, não, mergulho de cabeça e espero pelo melhor.
Aqui como muitas vezes acontece, mergulhei e bati com a cabeça. Depois de uma ou duas horas a fazer e refazer coisas aleatórias ou a olhar para uma cegante pagina em branco, percebi que se calhar era melhor tirar um tempito para realmente desenhar e estabelecer mais ou menos bases do que queria fazer.

A tela

Normalmente para websites simples utilizo, simplesmente, papel e caneta, porém, numa das minhas cadeiras na universidade utilizei figma e gostei da forma de como pouco ou nada tinha de pensar na localização dos componentes e seguir apenas a, meio que detalhada, planta.
Quando fui criar a minha conta, o nosso senhor, Richard Stallman, sussurrou-me ao ouvido e indicou-me penpot, que ao contrário do figma é FOSS (Software livre).

Do nada a algo

Neste ponto tinha o meu objétivo, as ferramentas e uma tela onde esboçar o dito cujo, mas não tinha se quer ideia do que fazer então procurei referencias onde me pudesse encostar.

Aqui estão algumas que gostei:

Desta pequena amostra, qualquer um poderia facilmente adivinhar que adoro sites minimalistas, paredes de textos vindas dos anos 90, e estariam absolutamente corretos.

Tendo estes como pilares comecei a construir o meu castelo.

A primeira coisa que fiz foi decidir a temática, e escolhi um tema arcaico, com uma estética e fontes que remetem a de um terminal. A partir daí, o resto simplesmente segui os meus instintos e fiz aquilo que gostaria de ver num blog.

Na escolha das cores, não vou mentir, copiei a palete nordica, não sei porquê, mas adoro este esquema de cores, faz me sentir confortável e com que os meus olhos deslizem como manteiga a ler.

Os únicos aspetos que acho que têm o seu mérito, se algum ..., são a navegação, onde decidi fazer da barra de navegação tapete e metê-la como um sticky footer, e o header com meu nome e email que acho que ficou engraçado.

Quando comecei a desenhar isto tudo, pensava que o resultado final ia ser completamente diferente, mas como podem ver esse não é o caso:

penpot

Não sei se isto diz alguma coisa sobre o lado artístico, ou quão má a minha criatividade é.

Mãos á obra !

Depois destes esboços feitos, deixei este projeto repousar durante um bom bocado, mas mesmo enferrujado com a ferramenta, 11ty, tailwind e outros, as plantas realmente permitiram-me avançar com o projeto.

Primeiro tentei navegar pelos projetos iniciais que o 11ty tinha na sua documentação, para projetos esqueleto na minha opinião tinham dependências a mais e desnecessárias, pelo que os descartei.
Eu apenas queria, como disse, usar tailwind e alguns plugins do 11ty nada de complicado.

Sem nada por me guiar fui então a ler a documentação e dar uso ao teclado

Honestamente, nem foi assim tão complicado, a documentação é relativamente fácil de compreender e avancei bastante rápido ( quem diria que a documentação ajuda ), tive de aprender um bocado de nunjucks e tentar perceber mais ou menos como tailwind funciona, mas outra vez, isso também não foi problema.

No 11ty tudo são templates, mesmo o próprio conteúdo, para processar um template noutro utilizamos filtros, e foi isso que essencialmente deu mais trabalho, criar ditos filtros na configuração, eleventy.js:


    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">');

    ...

Este filtro markdown pode ser aplicado nos templates desta forma :

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

E parecendo que não em um pouco mais que o uma semana tinha mais ou menos tudo pronto, só falta o mais difícil, o conteúdo.

Meter o blog no ar

Entre a fase de desenho e realmente meter mão á obra, referi que deixei o projeto repousar por um bocado, isto porque sou preguiçoso, estava ocupado com outras coisas, ou estava a construir e perceber como dar selfhost daquilo que preciso.

Nessa jornada de selfhost, aprendi que para realmente hospedar o meu website, teria de expor o endereço IP para o exterior ou utilizar um VPS com um reverse proxy redirecionando o trafico para o meu servidor.

Claro que não queria expor o meu IP então explorei a segunda opção e descobri algo . . . VPS são caras para caraças. De maneira alguma iria pagar 8€ mês, por um projeto que poderia hospedar em algo como netlify, domínio customizado, de graça.

Para esclarecer não estou a descartar o uso de uma VPS, mas para mim de momento não faz sentido, se ainda tivesse que hospedar algo mais no publico, como, por exemplo, serviços tipo pastebin ou algo colaborativo como mattermost ou alguma office suite, mas de momento não preciso.

Antes meter o anel no netlify, fui procurar por alternativas e houve uma que realmente me despertou o interesse, Surge.sh, nada de painéis de administração ou websites complicados, apenas uma cli e uns quantos comandos e tinhas o website no ar. Só não optei por esta alternativa porque o plano gratuito não suporta dominios customizados, no entanto caso precise de hospedar um website aleatório para um pequeno projeto estará no topo das minhas opções.

Um pouco desiludido, lá segui com netlify, criei uma conta, adicionei os meus domínios e meti no ar este website com a netlifly-cli.

TODOS e Conclusão

Ainda tenho uma outra coisa que quero ajustar e explorar, como o template de RSS que apesar de funcional está uma porcaria, reparar pequenos problemas que encontrar com o filtro de markdown e talvez organizar a configuração do 11ty.
Mas por agora está novo ! :D

Se disto tiro alguma coisa, é respeito por quem tem de escrever como profissão e que escrever é difícil, apesar de me estar a adequar aos poucos ao ofício.

Em suma, é bom ter este meu cantinho da internet, para me expressar e dar os meus bitaites, mesmo que dê algum trabalho.