O guia do programador preguiçoso para manter um site pessoal

Muitos desenvolvedores têm um site pessoal ou gostariam de ter um.

Embora existam muitas ótimas opções para criar um belo site sem nenhuma habilidade de codificação, somos desenvolvedores de software, então queremos mostrar nossas habilidades e construir algo do zero.

Codificar o site é uma coisa, e você pode terminar em 1-2 dias. Mas uma vez que seu site esteja no ar, você precisa mantê-lo para garantir que esteja disponível, atualizado e seguro.

A seguir, veremos como criar e manter um site pessoal com o mínimo de esforço em 10 etapas fáceis. Porque, embora adoremos programar, também adoramos o tempo longe do computador. 🌳🤸🍝

Vou usar meu site que reconstruí recentemente em React como exemplo. Você pode encontrar o código-fonte no meu repositório GitHub .

As dicas e truques a seguir assumem um site estático super simples que consiste apenas em uma parte frontal. No entanto, você pode facilmente estender esses conceitos para projetos mais complexos, incluindo um back-end, banco de dados ou outras peças de infraestrutura.

Não entraremos em detalhes sobre nenhuma das tecnologias mencionadas, mas forneceremos uma visão geral de alto nível para mantê-la agnóstica em relação à tecnologia.

1. Configure um repositório

Escolha uma plataforma de desenvolvimento como GitHub ou GitLab e configure um novo repositório vazio. Certifique-se de incluir uma licença e adicionar um README, para que a comunidade saiba o que pode fazer com seu código.

2. Escolha um Framework JS

Escolha uma estrutura ou biblioteca JavaScript como React, Vue ou Svelte para usar na construção de seu site. Ou não, e vá com Vanilla HTML e JavaScript se for algo que você queira experimentar.

Ao escolher qual framework escolher, o mais importante é que seja algo com o qual você goste de trabalhar.

Este é o seu site e você pode usar as ferramentas que quiser. Você pode escolher algo que já conhece e gosta ou tentar algo completamente novo que o deixe curioso.

Construí minha primeira página pessoal em Vue.js. Cerca de um ano depois, eu o reconstruí no React porque queria obter mais experiência prática com o React e experimentar algumas bibliotecas do React.

Use as ferramentas de construção de sua estrutura JS para gerar algum código clichê e obtenha um exemplo simples no estilo Hello World servido em localhost.

3. Escolha uma biblioteca de componentes de interface do usuário

Esta etapa é opcional, mas como estamos falando sobre manter o esforço mínimo aqui, recomendo incluir uma biblioteca de componentes de interface do usuário como Material UI ou Bootstrap em seu projeto. Eu escolhi Chakra UI para o meu site.

Essas bibliotecas vêm com um conjunto de componentes de interface do usuário, bem como utilitários para layout e estilo e permitem que você crie super rápido.

Certifique-se de escolher uma biblioteca de componentes bem documentada, que você considere visualmente atraente, que inclua muitos componentes e possa ser personalizada facilmente. Para personalizar a aparência da biblioteca em seu site, pode ser divertido brincar com fontes e esquemas de cores. 🎨

4. Crie algo super simples

Pense nas informações que deseja exibir em sua página inicial e, em seguida, vá em frente e crie algo usando os componentes de sua biblioteca de componentes de interface do usuário. Não pense demais.

O principal objetivo agora é fazer algo viver rapidamente e, como Voltaire já sabia, a perfeição é inimiga do bom.

Se você tem muito a dizer e muitas ideias sobre o que mostrar em seu site, ótimo! Vá em frente e crie, mas primeiro faça um plano de como organizar seu conteúdo - pense em roteamento, visualizações diferentes, seções, layout, navegação e assim por diante.

Mas se você for como eu, você pode se perguntar, neste ponto, o que colocar em sua página inicial e por que você deve construir uma porque QUEM SE IMPORTARIA?! 😳

Seus sentimentos são totalmente válidos, mas deixe-me dizer, você não precisa da permissão de ninguém ou de conteúdo sofisticado para ter uma presença online.

Mantenha-o super simples e apenas compartilhe algumas coisas sobre você que você se sinta confortável em compartilhar com os visitantes (que podem ser qualquer pessoa com acesso à Internet - lembre-se disso).

Para o meu site, mantive o mínimo possível com uma foto e um slogan sobre mim, uma lista da minha pilha de tecnologia, algumas coisas de que gosto e algumas recomendações de livros. 📚 Também incluí links para meu LinkedIn e GitHub.

5. Adicione algo divertido

Na Etapa 4, construímos algo super simples, mas simples não deve significar chato. Então agora, vamos ser interativos. 🚀

Tente pensar em algumas maneiras fáceis de tornar a visita ao seu site mais divertida e interessante. Isso pode incluir coisas como animações, interações do usuário ou alterações no esquema de cores. Não reinvente a roda embora.

Se você tem uma ideia do que fazer, é provável que já exista um pacote npm que faça exatamente isso.

Usei uma animação de rolagem para a barra de navegação, um botão para alternar entre os modos escuro e claro com uma boa transição e um botão de ícone que inicia uma festa surpresa de confete usando

react-confetti .

E é isso, você construiu um site para você! 🥳 Vejamos a seguir como implantá-lo e mantê-lo.

6. Implantar

Existem muitas opções de como implantar seu site na Internet de forma totalmente gratuita, como Netlify, Vercel ou GitHub Pages.

As etapas exatas dependerão do provedor que você escolher, portanto, siga os guias até que seu site esteja ativo em algum URL.

Eu fui com o Netlify e achei incrivelmente fácil de configurar.

Como etapa opcional, você pode decidir comprar um nome de domínio personalizado e conectá-lo ao DNS do seu provedor para substituir o URL arbitrário que você obteve. Você não precisa fazer isso, mas acho um nome de domínio personalizado um toque legal, e a compra de um domínio não deve custar muito mais do que 10 $ / ano.

7. Configurar CI/CD

Agora que seu site está no ar na internet, você quer ter certeza de não quebrá-lo acidentalmente com commits futuros. Você também deseja implantar automaticamente a versão mais recente de sua ramificação main .

Sua plataforma de desenvolvimento pode já vir com ferramentas de CI/CD integradas, como GitHub Actions ou GitLab CI/CD.

Estou usando o GitHub Actions, pois meu repositório reside no GitHub.

Para integração contínua, você pode configurar algumas verificações automatizadas para cada solicitação pull e cada mesclagem para a ramificação main . Isso pode incluir verificações como linting e formatação ou testes de unidade.

Também existem muitos modelos disponíveis, por exemplo, eu uso uma GitHub Action pré-criada para descobrir vulnerabilidades com o CodeQL.

Para Implantação Contínua, você pode configurar seu próprio script de implantação que é executado em cada push para main após a conclusão de todas as verificações. Mas, dependendo do provedor de hospedagem escolhido na Etapa 6, talvez você não precise fazer nada.

O Netlify, por exemplo, integra-se perfeitamente ao GitHub para que a ramificação main seja implantada automaticamente.

8. Use o Dependabot para manter suas dependências atualizadas

Construímos um site, o colocamos no ar e agora tudo o que queremos fazer é relaxar. Mas o ecossistema JS evolui rapidamente, assim como suas vulnerabilidades.

Queremos garantir que nossas dependências estejam atualizadas para manter nosso aplicativo seguro, mas o gerenciamento de dependências npm pode ser doloroso e certamente não queremos verificar se há atualizações todos os dias.

Felizmente, existe uma pequena ferramenta brilhante chamada Dependabot que pode cuidar de tudo isso para nós. 🤖 O Dependabot é uma ferramenta criada pelo GitHub para atualizações automatizadas de dependências. Agora também está disponível uma versão para GitLab.

Tudo o que você precisa fazer é adicionar um arquivo dependabot.yml e o GitHub criará automaticamente Pull Requests quando uma nova versão dos pacotes que você usa estiver disponível. Você pode configurar o Dependabot no arquivo YAML, para definir, por exemplo, o responsável por PRs e o número máximo de PRs abertos.

Como configuramos algumas verificações automatizadas para PRs na Etapa 7, elas serão executadas com cada PR do Dependabot e podemos ter certeza de que uma nova versão não danificará nosso site.

Nas configurações de segurança do repositório, você também pode configurar o dependabot para alertá-lo sobre quaisquer vulnerabilidades em suas dependências.

9. Verifique se há problemas de acessibilidade

Acessibilidade é um tópico tão estranho - é super importante, mas muitas vezes negligenciado, embora haja tantos frutos fáceis quando se trata de melhorar a acessibilidade de um site.

Se você usa uma estrutura JS e uma biblioteca de componentes de interface do usuário, sua pontuação de acessibilidade não deve ser completamente terrível. Provavelmente ainda pode ser melhorado, especialmente se você incluir fontes personalizadas ou esquemas de cores.

Você pode executar uma ferramenta como o Lighthouse no Chrome Dev Tools para descobrir possíveis melhorias. O Lighthouse gerará um relatório para você e sugerirá alterações para melhorar a acessibilidade.

Essas sugestões geralmente são fáceis de implementar, como aumentar o tamanho da fonte, alterar o contraste entre texto e plano de fundo ou reorganizar a ordem dos elementos HTML no DOM.

O Lighthouse também pode gerar relatórios de desempenho, práticas recomendadas e SEO. 🆒

10. Execute um trabalho Cron para executar ping em seu site

Depois de colocar meu site no ar, senti vontade de verificar pelo menos uma vez por dia se ele ainda estava lá. 🕵️‍♀️

No começo, ficava feliz toda vez que via que meu site ainda estava disponível, mas logo ficou chato.

Para garantir que você seja notificado automaticamente se o seu site for desativado por qualquer motivo, você pode configurar uma tarefa cron que simplesmente executa pings no URL do seu site em intervalos regulares.

Se o seu projeto inclui um back-end e um banco de dados, você também pode configurar alguns testes básicos de fumaça que executam, por exemplo, algumas solicitações GET em sua API.

No meu caso, acabei de configurar outra ação do GitHub que é executada uma vez por dia e faz ping na minha página. Aumente a frequência conforme achar adequado para sua página inicial e o tipo de tráfego que você espera.

Conclusão

E terminamos! Por enquanto, pelo menos.

Para mim, meu site serve antes de tudo como um playground para experimentar tecnologias que me interessam, então gosto de modificá-lo ocasionalmente. Gostaria de encorajá-lo a revisitar regularmente o código do seu site e apenas se divertir com ele. 💃

Espero que este guia tenha lhe dado uma ideia de como pode ser fácil criar e manter uma página inicial pessoal. Você provavelmente poderia construir algo simples em 1-2 dias (se você for como eu, adicione mais dois dias para acertar o layout do CSS 🙄).

A implantação do seu site e a adição de alguma automação para facilitar a manutenção podem ser feitas em menos de 2 horas.

Ansioso para ver todos os sites incríveis que você criará! 🤩